/* ====================================================================
MAISON FOREVER LAB · CSS SIGNATURE COUTURE LUXE
Version 3 · 28 mai 2026
====================================================================
Palette : Bordeaux velours · Or · Or clair · Champagne · Ivoire · Lilas
Typographie : Didot (titres) + Cormorant Garamond (texte) + Great Vibes (signature)
==================================================================== */
/* ====== VARIABLES MAISON ====== */
:root {
/* Palette signature lockée 21 mai 2026 */
--mfl-bordeaux: #4a0f1a;
--mfl-bordeaux-fonce: #2c0810;
--mfl-or: #c9a050;
--mfl-or-clair: #e3c47e;
--mfl-or-vif: #d4a850;
--mfl-champagne: #f5ead6;
--mfl-champagne-clair: #faf3e0;
--mfl-ivoire: #faf6ee;
--mfl-lilas: #d4c5e0;
--mfl-lilas-fonce: #b8a5cb;
--mfl-gris-pierre: #888888;
--mfl-noir-doux: #2a2a2a;
/* Typographie */
--mfl-font-titre: 'Didot', 'Cormorant Garamond', 'Times New Roman', serif;
--mfl-font-corps: 'Cormorant Garamond', 'Georgia', serif;
--mfl-font-signature: 'Great Vibes', cursive;
--mfl-font-mention: 'Inter', -apple-system, sans-serif;
/* Espacements */
--mfl-radius: 4px;
--mfl-transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ====== RESET ET BASE ====== */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html { scroll-behavior: smooth; }
body {
font-family: var(--mfl-font-corps);
font-size: 1.05rem;
line-height: 1.7;
color: var(--mfl-noir-doux);
background: var(--mfl-ivoire);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; transition: var(--mfl-transition); }
img { max-width: 100%; height: auto; display: block; }
/* ====== CONTAINERS ====== */
.mfl-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.mfl-container-narrow {
max-width: 820px;
margin: 0 auto;
padding: 0 2rem;
}
/* ====== TYPOGRAPHIE ====== */
.mfl-eyebrow {
font-family: var(--mfl-font-mention);
font-size: 0.78rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--mfl-or);
font-weight: 500;
margin-bottom: 1.5rem;
display: inline-block;
}
.mfl-eyebrow-or { color: var(--mfl-or); }
.mfl-eyebrow-champagne { color: var(--mfl-champagne); }
.mfl-eyebrow-bordeaux { color: var(--mfl-bordeaux); }
.mfl-section-title {
font-family: var(--mfl-font-titre);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 300;
color: var(--mfl-bordeaux);
line-height: 1.15;
margin-bottom: 1.5rem;
letter-spacing: 0.02em;
}
.mfl-section-title em {
font-family: var(--mfl-font-corps);
font-style: italic;
color: var(--mfl-or);
font-weight: 400;
}
.mfl-section-title-center { text-align: center; }
.mfl-section-baseline {
font-family: var(--mfl-font-corps);
font-style: italic;
color: var(--mfl-or);
font-size: 1.25rem;
line-height: 1.6;
}
.mfl-text-large {
font-size: 1.15rem;
line-height: 1.8;
color: var(--mfl-noir-doux);
margin-bottom: 1.5rem;
}
.mfl-text-large em { color: var(--mfl-or); font-style: italic; }
/* ====== ORNEMENT SVG ====== */
.mfl-ornement {
width: 60px;
height: 12px;
display: inline-block;
color: var(--mfl-or);
}
/* ====== FILETS OR ====== */
.mfl-filet-or {
height: 1px;
background: linear-gradient(90deg, transparent, var(--mfl-or), transparent);
width: 100%;
margin: 2rem 0;
}
.mfl-divider-or {
text-align: center;
margin: 4rem 0;
position: relative;
}
.mfl-divider-or::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--mfl-or), transparent);
z-index: 0;
}
.mfl-divider-mark {
background: var(--mfl-ivoire);
padding: 0 1rem;
position: relative;
z-index: 1;
color: var(--mfl-or);
font-size: 1rem;
}
/* ====== BOUTONS ====== */
.mfl-cta-or {
display: inline-block;
padding: 1rem 2.5rem;
background: linear-gradient(135deg, var(--mfl-or) 0%, var(--mfl-or-clair) 50%, var(--mfl-or) 100%);
color: var(--mfl-bordeaux);
font-family: var(--mfl-font-corps);
font-weight: 500;
font-size: 1rem;
letter-spacing: 0.18em;
text-transform: uppercase;
border: none;
border-radius: var(--mfl-radius);
cursor: pointer;
transition: var(--mfl-transition);
box-shadow: 0 4px 20px rgba(201, 160, 80, 0.3);
}
.mfl-cta-or:hover {
transform: translateY(-2px);
box-shadow: 0 6px 30px rgba(201, 160, 80, 0.5);
}
.mfl-cta-or-large {
padding: 1.2rem 3rem;
font-size: 1.05rem;
}
.mfl-cta-or-small {
padding: 0.7rem 1.5rem;
font-size: 0.85rem;
}
.mfl-cta-outline {
display: inline-block;
padding: 1rem 2.5rem;
background: transparent;
color: var(--mfl-bordeaux);
border: 1px solid var(--mfl-or);
font-family: var(--mfl-font-corps);
font-weight: 500;
font-size: 1rem;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
transition: var(--mfl-transition);
}
.mfl-cta-outline:hover {
background: var(--mfl-or);
color: var(--mfl-bordeaux);
}
.mfl-btn-group {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
margin-top: 2.5rem;
}
.mfl-btn-group-center { justify-content: center; }
/* ====== HEADER ====== */
.mfl-header {
background: var(--mfl-ivoire);
border-bottom: 1px solid rgba(201, 160, 80, 0.3);
padding: 1.2rem 0;
position: sticky;
top: 0;
z-index: 1000;
backdrop-filter: blur(10px);
}
.mfl-header-container {
max-width: 1300px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.mfl-logo {
display: flex;
align-items: center;
gap: 0.8rem;
}
.mfl-logo-img {
height: 50px;
width: auto;
}
.mfl-logo-text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.mfl-logo-brand {
font-family: var(--mfl-font-titre);
font-size: 1.35rem;
font-weight: 300;
letter-spacing: 0.12em;
color: var(--mfl-bordeaux);
}
.mfl-logo-sub {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.78rem;
letter-spacing: 0.2em;
color: var(--mfl-or);
text-transform: uppercase;
}
.mfl-nav {
display: flex;
gap: 2rem;
list-style: none;
align-items: center;
}
.mfl-nav a {
font-family: var(--mfl-font-corps);
color: var(--mfl-bordeaux);
font-size: 1rem;
letter-spacing: 0.05em;
position: relative;
}
.mfl-nav a:after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 1px;
background: var(--mfl-or);
transition: var(--mfl-transition);
}
.mfl-nav a:hover { color: var(--mfl-or); }
.mfl-nav a:hover:after { width: 100%; }
.mfl-burger {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
}
.mfl-burger span {
display: block;
width: 24px;
height: 1.5px;
background: var(--mfl-bordeaux);
margin: 5px 0;
transition: var(--mfl-transition);
}
/* ====== HERO COUTURE LUXE ====== */
.mfl-hero {
background:
radial-gradient(ellipse at center, rgba(201, 160, 80, 0.15) 0%, transparent 60%),
linear-gradient(135deg, var(--mfl-bordeaux-fonce) 0%, var(--mfl-bordeaux) 50%, var(--mfl-bordeaux-fonce) 100%);
color: var(--mfl-or);
padding: 8rem 0 6rem;
position: relative;
overflow: hidden;
text-align: center;
}
.mfl-hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(201, 160, 80, 0.08) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(212, 197, 224, 0.08) 0%, transparent 40%);
pointer-events: none;
}
.mfl-hero-mark {
display: flex;
justify-content: center;
margin-bottom: 2rem;
}
.mfl-hero-enseigne {
font-family: var(--mfl-font-titre);
font-size: clamp(3.5rem, 9vw, 6.5rem);
font-weight: 300;
color: var(--mfl-or);
line-height: 1;
letter-spacing: 0.08em;
text-shadow: 0 0 40px rgba(201, 160, 80, 0.4);
margin: 0;
}
.mfl-hero-enseigne span {
display: block;
}
.mfl-hero-enseigne .enseigne-1 {
font-size: 0.85em;
margin-bottom: 0.3rem;
}
.mfl-hero-sub-enseigne {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
margin: 2rem 0;
}
.mfl-hero-sub-enseigne .filet {
display: block;
width: 60px;
height: 1px;
background: var(--mfl-or);
}
.mfl-hero-sub-text {
font-family: var(--mfl-font-corps);
font-style: italic;
color: var(--mfl-or-clair);
font-size: 1.1rem;
letter-spacing: 0.3em;
text-transform: uppercase;
}
.mfl-hero-slogan {
font-family: var(--mfl-font-titre);
font-size: clamp(1.4rem, 3vw, 2rem);
color: var(--mfl-champagne);
font-weight: 300;
margin: 2rem 0 1rem;
font-style: italic;
}
.mfl-hero-subtitle {
font-family: var(--mfl-font-corps);
font-size: 1.15rem;
color: var(--mfl-champagne);
max-width: 600px;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
/* ====== HERO PAGE INTÉRIEURE ====== */
.mfl-page-hero {
background:
radial-gradient(ellipse at center, rgba(201, 160, 80, 0.12) 0%, transparent 60%),
linear-gradient(135deg, var(--mfl-bordeaux-fonce) 0%, var(--mfl-bordeaux) 100%);
color: var(--mfl-or);
padding: 6rem 0 4rem;
text-align: center;
position: relative;
}
.mfl-page-title {
font-family: var(--mfl-font-titre);
font-size: clamp(2.5rem, 6vw, 4.5rem);
color: var(--mfl-or);
font-weight: 300;
letter-spacing: 0.04em;
text-shadow: 0 0 30px rgba(201, 160, 80, 0.3);
margin-bottom: 1.5rem;
}
.mfl-page-baseline {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 1.3rem;
color: var(--mfl-champagne);
max-width: 700px;
margin: 0 auto;
}
/* ====== SECTIONS ====== */
.mfl-section {
padding: 6rem 0;
}
.mfl-section-ivoire { background: var(--mfl-ivoire); }
.mfl-section-champagne { background: var(--mfl-champagne); }
.mfl-section-bordeaux { background: var(--mfl-bordeaux); color: var(--mfl-champagne); }
.mfl-section-lilas { background: var(--mfl-lilas); }
.mfl-section-bordeaux .mfl-section-title { color: var(--mfl-or); }
.mfl-section-bordeaux .mfl-section-title em { color: var(--mfl-or-clair); }
.mfl-section-header {
text-align: center;
margin-bottom: 4rem;
}
/* ====== MANIFESTE ====== */
.mfl-manifeste {
background: var(--mfl-ivoire);
padding: 6rem 0 3rem;
text-align: center;
}
.mfl-manifeste-quote {
font-family: var(--mfl-font-titre);
font-size: clamp(1.8rem, 3.5vw, 2.5rem);
font-weight: 300;
color: var(--mfl-bordeaux);
line-height: 1.4;
margin: 2rem 0;
letter-spacing: 0.01em;
}
.mfl-manifeste-quote em {
font-style: italic;
color: var(--mfl-or);
}
.mfl-manifeste-sign {
font-family: var(--mfl-font-corps);
font-style: italic;
color: var(--mfl-or);
letter-spacing: 0.2em;
text-transform: uppercase;
font-size: 0.85rem;
margin-top: 2rem;
}
/* ====== CARDS PRODUITS ====== */
.mfl-card-produit {
background: white;
border-radius: var(--mfl-radius);
overflow: hidden;
box-shadow: 0 4px 30px rgba(74, 15, 26, 0.08);
transition: var(--mfl-transition);
display: flex;
flex-direction: column;
}
.mfl-card-produit:hover {
transform: translateY(-4px);
box-shadow: 0 8px 40px rgba(74, 15, 26, 0.15);
}
.mfl-card-image {
aspect-ratio: 1/1;
overflow: hidden;
background: var(--mfl-champagne);
}
.mfl-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.mfl-card-produit:hover .mfl-card-image img {
transform: scale(1.05);
}
.mfl-card-content {
padding: 2rem;
flex: 1;
display: flex;
flex-direction: column;
}
.mfl-card-badge {
font-family: var(--mfl-font-mention);
font-size: 0.7rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--mfl-or);
margin-bottom: 1rem;
font-weight: 500;
}
.mfl-card-titre {
font-family: var(--mfl-font-titre);
font-size: 1.8rem;
font-weight: 300;
color: var(--mfl-bordeaux);
margin-bottom: 0.5rem;
}
.mfl-card-baseline {
font-family: var(--mfl-font-corps);
font-style: italic;
color: var(--mfl-or);
margin-bottom: 1.5rem;
}
.mfl-card-desc {
flex: 1;
margin-bottom: 1.5rem;
}
.mfl-card-prix {
font-family: var(--mfl-font-titre);
font-size: 1.3rem;
color: var(--mfl-bordeaux);
margin-bottom: 1rem;
}
.mfl-card-prix-strike {
text-decoration: line-through;
color: var(--mfl-gris-pierre);
font-size: 0.9em;
margin-right: 0.5rem;
}
/* ====== GRID ====== */
.mfl-grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2.5rem;
}
.mfl-grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 3rem;
}
/* ============================================================
TROIS PIÈCES · UNE MAISON · STRUCTURE PIÈCES SIGNATURE
Style éditorial respirant · Dior / Aman / The Row
============================================================ */
.mfl-section-pieces {
padding-top: 9rem;
padding-bottom: 8rem;
background: var(--mfl-ivoire);
}
.mfl-pieces-header {
text-align: center;
max-width: 720px;
margin: 0 auto 6rem;
}
.mfl-pieces-header .mfl-eyebrow {
display: block;
margin-bottom: 2rem;
font-size: 0.78rem;
letter-spacing: 0.36em;
color: var(--mfl-or);
}
.mfl-pieces-title {
font-family: var(--mfl-font-titre);
font-size: clamp(2.4rem, 4.2vw, 3.6rem);
font-weight: 300;
color: var(--mfl-bordeaux);
line-height: 1.15;
letter-spacing: 0.005em;
margin-bottom: 1.8rem;
}
.mfl-pieces-title em {
font-style: italic;
color: var(--mfl-or);
font-family: var(--mfl-font-titre);
font-weight: 300;
}
.mfl-pieces-subtitle {
font-family: var(--mfl-font-corps);
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
color: var(--mfl-bordeaux);
opacity: 0.78;
line-height: 1.7;
max-width: 720px;
margin: 0 auto;
font-weight: 300;
}
.mfl-pieces-subtitle em {
font-style: italic;
color: var(--mfl-or);
}
/* Le
ne s'applique qu'en grand écran · sur mobile/tablette, le texte wrap naturellement */
.mfl-pieces-subtitle-br {
display: inline;
}
@media (max-width: 700px) {
.mfl-pieces-subtitle-br {
display: none;
}
}
/* La grille · 3 colonnes ÉGALES · architectural · ORIZON FINAL */
.mfl-pieces-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 3rem;
align-items: stretch;
max-width: 1320px;
margin: 0 auto;
}
/* Une pièce · base */
.mfl-piece {
position: relative;
background: transparent;
display: flex;
flex-direction: column;
text-align: center;
padding: 1.5rem 0.5rem;
transition: var(--mfl-transition);
}
.mfl-piece:hover {
transform: translateY(-6px);
}
/* Le visuel · format vertical packaging · contain · jamais coupé */
.mfl-piece-visuel {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
background: linear-gradient(180deg, #fdfaf3 0%, var(--mfl-ivoire) 100%);
border-radius: 4px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 2.4rem 1.8rem;
margin-bottom: 2.2rem;
box-shadow: 0 18px 48px rgba(74, 15, 26, 0.06);
}
.mfl-piece-visuel img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
transition: transform 0.7s cubic-bezier(0.25, 0.45, 0.45, 0.95);
}
.mfl-piece:hover .mfl-piece-visuel img {
transform: scale(1.03);
}
/* Visuel SLIMTH · plaque luxe en attendant le vrai packaging */
.mfl-piece-visuel-slimth {
background: linear-gradient(160deg, var(--mfl-bordeaux-fonce) 0%, var(--mfl-bordeaux) 100%);
position: relative;
overflow: hidden;
}
.mfl-piece-visuel-slimth::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 50% 40%, rgba(232, 196, 124, 0.22) 0%, transparent 60%),
linear-gradient(135deg, transparent 40%, rgba(232, 196, 124, 0.1) 50%, transparent 60%);
pointer-events: none;
}
.mfl-piece-visuel-inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: var(--mfl-or-clair);
}
.mfl-piece-marque {
font-family: var(--mfl-font-titre);
font-size: clamp(2.2rem, 4vw, 3.2rem);
font-weight: 300;
letter-spacing: 0.12em;
color: var(--mfl-or);
margin-bottom: 1.2rem;
}
.mfl-piece-marque sup {
font-size: 0.4em;
letter-spacing: 0.1em;
}
.mfl-piece-marque-detail {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.85rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mfl-or-clair);
opacity: 0.85;
}
/* Contenu de la pièce · texte épuré · flex column pour aligner les CTAs */
.mfl-piece-content {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 0.5rem;
flex: 1;
}
/* CTA pousse vers le bas pour aligner sur toutes les cartes */
.mfl-piece-content .mfl-piece-cta {
margin-top: auto;
}
.mfl-piece-eyebrow {
font-family: var(--mfl-font-mention);
font-size: 0.66rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--mfl-or);
margin-bottom: 1.4rem;
font-weight: 500;
}
.mfl-piece-nom {
font-family: var(--mfl-font-titre);
font-size: clamp(1.7rem, 2.4vw, 2.1rem);
font-weight: 300;
color: var(--mfl-bordeaux);
letter-spacing: 0.01em;
margin-bottom: 0.8rem;
line-height: 1.1;
}
.mfl-piece-nom sup {
font-size: 0.35em;
vertical-align: super;
letter-spacing: 0.1em;
color: var(--mfl-or);
}
.mfl-piece-baseline {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 1.05rem;
color: var(--mfl-or);
margin-bottom: 1.8rem;
font-weight: 400;
line-height: 1.4;
}
/* Triade · 3 lignes Maison empilées */
.mfl-piece-triade {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.45rem;
margin-bottom: 2rem;
font-family: var(--mfl-font-titre);
font-size: 1.05rem;
font-weight: 300;
color: var(--mfl-bordeaux);
line-height: 1.5;
}
.mfl-piece-triade span {
display: block;
}
.mfl-piece-micro {
font-family: var(--mfl-font-mention);
font-size: 0.62rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--mfl-or);
opacity: 0.78;
margin-bottom: 2rem;
font-weight: 500;
}
/* Système ACTIONS · montée en puissance Maison
SLIMTH "Action unique renforcée" · Renaissance "Actions complètes" · Métamorphose "Actions totales" */
.mfl-piece-action {
font-family: var(--mfl-font-mention);
font-size: 0.68rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--mfl-bordeaux);
margin-bottom: 1.2rem;
font-weight: 600;
position: relative;
padding: 0.4rem 0;
}
.mfl-piece-action::before,
.mfl-piece-action::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 36px;
height: 1px;
background: var(--mfl-or);
opacity: 0.6;
}
.mfl-piece-action::before { top: 0; }
.mfl-piece-action::after { bottom: 0; }
/* Métamorphose · ACTIONS TOTALES en or velours (le sommet de la gamme) */
.mfl-piece-sommet .mfl-piece-action {
color: var(--mfl-or);
font-weight: 700;
}
/* Maillage upsell · phrase discrète sous le CTA */
.mfl-piece-maillage {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.85rem;
line-height: 1.6;
color: var(--mfl-bordeaux);
opacity: 0.7;
margin-top: 1.8rem;
max-width: 340px;
text-align: center;
font-weight: 300;
}
.mfl-piece-maillage a {
color: var(--mfl-or);
text-decoration: none;
border-bottom: 1px solid rgba(201, 160, 80, 0.4);
transition: var(--mfl-transition);
font-style: italic;
white-space: nowrap;
display: inline-block;
}
/* Paire de produits sur une seule ligne · Renaissance + Métamorphose ensemble */
.mfl-piece-maillage-paire {
white-space: nowrap;
display: inline-block;
}
.mfl-piece-maillage a sup {
font-size: 0.55em;
vertical-align: super;
letter-spacing: 0.08em;
margin-left: 0.02em;
}
.mfl-piece-maillage a:hover {
color: var(--mfl-bordeaux);
border-bottom-color: var(--mfl-bordeaux);
}
/* SLIMTH · glow renforcé · posée comme un trophée premium */
.mfl-piece-visuel-glow {
position: relative;
background: linear-gradient(180deg, #fdfaf3 0%, var(--mfl-ivoire) 100%);
}
.mfl-piece-visuel-glow::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 130%;
height: 130%;
background:
radial-gradient(circle at 50% 50%, rgba(232, 196, 124, 0.25) 0%, transparent 55%),
radial-gradient(circle at 50% 60%, rgba(201, 160, 80, 0.18) 0%, transparent 65%);
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
border-radius: 50%;
animation: slimthGlowBreathe 7s ease-in-out infinite;
}
.mfl-piece-visuel-glow img {
position: relative;
z-index: 1;
filter: drop-shadow(0 18px 35px rgba(74, 15, 26, 0.18));
}
@keyframes slimthGlowBreathe {
0%, 100% {
opacity: 0.85;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.06);
}
}
/* SLIMTH · pièce fondatrice · ombre Maison plus prononcée + ombre dorée subtile */
.mfl-piece-fondatrice .mfl-piece-visuel {
box-shadow:
0 30px 70px rgba(74, 15, 26, 0.14),
0 12px 30px rgba(201, 160, 80, 0.18);
}
.mfl-piece-fondatrice .mfl-piece-eyebrow {
color: var(--mfl-bordeaux);
font-weight: 600;
letter-spacing: 0.42em;
}
/* ============================================================
ÉQUILIBRAGE ARCHITECTURAL · ORIZON FINAL
Les 3 visuels EXACTEMENT à la même taille, ratio, hauteur.
La distinction SLIMTH se fait par lumière, pas par dimension.
============================================================ */
/* Tous les visuels · padding identique pour alignement parfait */
.mfl-piece-equilibre .mfl-piece-visuel,
.mfl-piece-fondatrice .mfl-piece-visuel,
.mfl-piece-sommet .mfl-piece-visuel {
padding: 1.4rem 1.1rem;
aspect-ratio: 4 / 5;
height: auto;
}
/* Coffrets carrés (Renaissance + Métamorphose) · zoom doux pour
remplir la même surface qu'un flacon vertical 4:5 */
.mfl-piece-equilibre .mfl-piece-visuel img,
.mfl-piece-sommet .mfl-piece-visuel img {
transform: scale(1.15);
transform-origin: center center;
}
.mfl-piece-equilibre:hover .mfl-piece-visuel img,
.mfl-piece-sommet:hover .mfl-piece-visuel img {
transform: scale(1.20);
}
/* SLIMTH au centre · glow plus dramatique selon ORIZON */
.mfl-piece-fondatrice .mfl-piece-visuel-glow::before {
background:
radial-gradient(circle at 50% 50%, rgba(232, 196, 124, 0.38) 0%, transparent 55%),
radial-gradient(circle at 50% 60%, rgba(201, 160, 80, 0.26) 0%, transparent 65%);
}
.mfl-piece-fondatrice .mfl-piece-visuel-glow img {
filter: drop-shadow(0 22px 45px rgba(74, 15, 26, 0.22));
}
/* Eyebrow SLIMTH · L'ICONIQUE MAISON · plus dense */
.mfl-piece-fondatrice .mfl-piece-eyebrow {
color: var(--mfl-bordeaux);
font-weight: 700;
letter-spacing: 0.44em;
}
/* SEO invisible émotionnellement · présent pour Google */
.mfl-piece-seo {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* CTA pièce · DIMENSIONS UNIFORMES ORIZON FINAL
Tous les CTAs : même width minimale, même hauteur, une seule ligne */
.mfl-piece-cta {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--mfl-font-mention);
font-size: 0.72rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--mfl-bordeaux);
padding: 1.15rem 1.6rem;
border: 1px solid var(--mfl-or);
background: transparent;
text-decoration: none;
transition: var(--mfl-transition);
font-weight: 600;
min-width: 16.5rem;
min-height: 3.4rem;
white-space: nowrap;
box-sizing: border-box;
line-height: 1;
}
.mfl-piece-cta sup {
font-size: 0.55em;
vertical-align: super;
letter-spacing: 0.1em;
margin-left: 0.05em;
}
.mfl-piece-cta:hover {
background: var(--mfl-or);
color: var(--mfl-ivoire);
transform: translateY(-2px);
}
/* CTA héros · SLIMTH centre · plein bordeaux velours */
.mfl-piece-cta-heros {
background: var(--mfl-bordeaux);
color: var(--mfl-or-clair);
border-color: var(--mfl-bordeaux);
}
.mfl-piece-cta-heros:hover {
background: var(--mfl-bordeaux-fonce);
color: var(--mfl-or);
border-color: var(--mfl-bordeaux-fonce);
}
/* ===== PIÈCE FONDATRICE (SLIMTH centre) · ORIZON FINAL
PADDING EXACTEMENT identique aux autres cartes (1.5rem 0.5rem)
pour que le visuel ait la même largeur ET la même hauteur,
et que les titres s'alignent au pixel. Distinction par glow + badge.
===== */
.mfl-piece-fondatrice {
padding: 1.5rem 0.5rem;
background:
radial-gradient(ellipse at 50% 0%, rgba(232, 196, 124, 0.20) 0%, transparent 65%),
linear-gradient(180deg, #fdfaf3 0%, var(--mfl-ivoire) 100%);
border-radius: 6px;
box-shadow:
0 30px 80px rgba(74, 15, 26, 0.08),
0 10px 30px rgba(201, 160, 80, 0.14);
position: relative;
}
.mfl-piece-fondatrice:hover {
transform: translateY(-6px);
}
.mfl-piece-fondatrice .mfl-piece-visuel {
box-shadow: 0 22px 56px rgba(74, 15, 26, 0.10);
}
/* Tailles de typographie identiques pour les 3 pièces · ORIZON FINAL */
.mfl-piece-nom {
font-size: clamp(1.7rem, 2.4vw, 2.1rem);
}
.mfl-piece-baseline {
font-size: 1.05rem;
}
/* Badge héros · L'iconique Maison · flotte AU-DESSUS de la carte
pour ne pas pousser le visuel vers le bas (alignement parfait) */
.mfl-piece-badge-heros {
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
font-family: var(--mfl-font-mention);
font-size: 0.6rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--mfl-or);
background: var(--mfl-bordeaux);
padding: 0.55rem 1.4rem;
border-radius: 2px;
z-index: 3;
font-weight: 600;
box-shadow: 0 4px 14px rgba(74, 15, 26, 0.18);
white-space: nowrap;
}
/* ============================================================
INVITATION MAISON · 3 lignes premium silencieuses · ORIZON
============================================================ */
.mfl-pieces-invitation-bloc {
text-align: center;
margin: 5.5rem auto 0;
max-width: 620px;
padding: 2.5rem 2rem;
position: relative;
}
.mfl-pieces-invitation-bloc::before,
.mfl-pieces-invitation-bloc::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 1px;
background: linear-gradient(90deg,
transparent, var(--mfl-or), transparent);
opacity: 0.7;
}
.mfl-pieces-invitation-bloc::before { top: 0; }
.mfl-pieces-invitation-bloc::after { bottom: 0; }
.mfl-pieces-invitation-titre {
display: block;
font-family: var(--mfl-font-mention);
font-size: 0.82rem;
letter-spacing: 0.46em;
text-transform: uppercase;
color: var(--mfl-or);
font-weight: 600;
margin-bottom: 1.4rem;
}
.mfl-pieces-invitation-texte {
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: clamp(1rem, 1.2vw, 1.1rem);
color: var(--mfl-bordeaux);
font-weight: 300;
line-height: 1.6;
margin-bottom: 1.4rem;
opacity: 0.85;
}
.mfl-pieces-invitation-edition {
display: inline-block;
font-family: var(--mfl-font-mention);
font-size: 0.7rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--mfl-bordeaux);
font-weight: 600;
opacity: 0.78;
padding: 0.4rem 1.2rem;
border: 1px solid rgba(201, 160, 80, 0.35);
border-radius: 2px;
}
/* ============================================================
CHOIX GUIDÉ · TROUVER MON PROTOCOLE · entrée écosystème
============================================================ */
.mfl-pieces-choix-guide {
text-align: center;
margin: 4.5rem auto 0;
max-width: 600px;
}
.mfl-pieces-choix-guide-question {
font-family: var(--mfl-font-titre);
font-size: clamp(1.3rem, 2.1vw, 1.7rem);
font-weight: 300;
color: var(--mfl-bordeaux);
line-height: 1.3;
margin-bottom: 2rem;
font-style: italic;
}
.mfl-pieces-choix-guide-question em {
color: var(--mfl-or);
font-style: italic;
font-weight: 400;
}
.mfl-pieces-choix-guide-cta {
display: inline-block;
font-family: var(--mfl-font-mention);
font-size: 0.8rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--mfl-or-clair);
background: var(--mfl-bordeaux);
padding: 1.3rem 2.8rem;
border: 1px solid var(--mfl-bordeaux);
text-decoration: none;
transition: var(--mfl-transition);
font-weight: 600;
box-shadow: 0 8px 28px rgba(74, 15, 26, 0.20);
margin-bottom: 1.2rem;
}
.mfl-pieces-choix-guide-cta:hover {
background: var(--mfl-bordeaux-fonce);
color: var(--mfl-or);
transform: translateY(-2px);
box-shadow: 0 12px 36px rgba(74, 15, 26, 0.28);
}
.mfl-pieces-choix-guide-soustexte {
display: block;
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.85rem;
color: var(--mfl-bordeaux);
opacity: 0.65;
margin-top: 0.5rem;
font-weight: 300;
letter-spacing: 0.04em;
}
/* ============================================================
MICRO-PREUVES PREMIUM · signatures Maison silencieuses
============================================================ */
.mfl-pieces-preuves {
list-style: none;
padding: 0;
margin: 4.5rem auto 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem 2.4rem;
max-width: 900px;
}
.mfl-pieces-preuves li {
font-family: var(--mfl-font-mention);
font-size: 0.66rem;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--mfl-or);
font-weight: 500;
position: relative;
opacity: 0.78;
}
.mfl-pieces-preuves li:not(:last-child)::after {
content: '·';
position: absolute;
right: -1.4rem;
color: var(--mfl-or);
opacity: 0.5;
}
/* ============================================================
LE PARCOURS MAISON · TRAJECTOIRE CONTINUE
============================================================ */
.mfl-section-parcours-maison {
padding-top: 7rem;
padding-bottom: 8rem;
background:
radial-gradient(ellipse at 50% 0%, rgba(232, 196, 124, 0.08) 0%, transparent 70%),
var(--mfl-ivoire);
border-top: 1px solid rgba(201, 160, 80, 0.16);
}
.mfl-parcours-maison-inner {
text-align: center;
max-width: 880px;
margin: 0 auto;
padding: 0 2rem;
}
.mfl-parcours-maison-inner .mfl-eyebrow {
display: block;
margin-bottom: 1.8rem;
font-size: 0.74rem;
letter-spacing: 0.4em;
color: var(--mfl-or);
}
.mfl-parcours-maison-title {
font-family: var(--mfl-font-titre);
font-size: clamp(1.9rem, 3.4vw, 2.8rem);
font-weight: 300;
color: var(--mfl-bordeaux);
line-height: 1.2;
margin-bottom: 3.5rem;
}
.mfl-parcours-maison-title em {
font-style: italic;
color: var(--mfl-or);
}
/* Le fil · 5 étapes reliées par filet or · système Maison */
.mfl-parcours-maison-fil {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 3rem;
flex-wrap: wrap;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
.mfl-parcours-maison-fil .mfl-parcours-maison-etape {
font-size: clamp(0.95rem, 1.45vw, 1.2rem);
}
.mfl-parcours-maison-etape {
font-family: var(--mfl-font-titre);
font-size: clamp(1.1rem, 1.7vw, 1.4rem);
font-weight: 300;
color: var(--mfl-bordeaux);
letter-spacing: 0.02em;
white-space: nowrap;
}
.mfl-parcours-maison-etape sup {
font-size: 0.4em;
color: var(--mfl-or);
letter-spacing: 0.1em;
vertical-align: super;
}
/* Étape héros · Métamorphose en or velours */
.mfl-parcours-maison-etape-heros {
color: var(--mfl-or);
font-weight: 400;
}
/* Le trait or qui relie · fin et lumineux */
.mfl-parcours-maison-trait {
flex: 1;
max-width: 80px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(201, 160, 80, 0.5) 30%,
var(--mfl-or) 50%,
rgba(201, 160, 80, 0.5) 70%,
transparent 100%);
position: relative;
}
.mfl-parcours-maison-trait::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--mfl-or);
transform: translate(-50%, -50%);
box-shadow: 0 0 8px rgba(232, 196, 124, 0.6);
}
.mfl-parcours-maison-texte {
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: clamp(1.1rem, 1.6vw, 1.3rem);
color: var(--mfl-bordeaux);
line-height: 1.6;
font-weight: 300;
margin: 0 auto 3rem;
max-width: 620px;
opacity: 0.88;
}
.mfl-parcours-maison-texte em {
color: var(--mfl-or);
font-style: italic;
}
.mfl-parcours-maison-cta {
display: inline-block;
font-family: var(--mfl-font-mention);
font-size: 0.78rem;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--mfl-or);
background: var(--mfl-bordeaux);
padding: 1.3rem 2.8rem;
border: 1px solid var(--mfl-bordeaux);
text-decoration: none;
transition: var(--mfl-transition);
font-weight: 600;
box-shadow: 0 6px 24px rgba(74, 15, 26, 0.18);
}
.mfl-parcours-maison-cta:hover {
background: var(--mfl-bordeaux-fonce);
color: var(--mfl-or-clair);
transform: translateY(-2px);
box-shadow: 0 10px 32px rgba(74, 15, 26, 0.25);
}
/* ============================================================
LE SYSTÈME MAISON v2 · ORIZON · 4 PRODUITS + LE CERCLE
Inspiration : Dior Beauty · Aman Resorts · The Row
============================================================ */
.mfl-systeme-v2 {
background: var(--mfl-ivoire);
padding: 8rem 2rem 7rem;
position: relative;
overflow: hidden;
}
.mfl-systeme-v2::before {
content: '';
position: absolute;
top: 6rem;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 400px;
background: radial-gradient(ellipse, rgba(232, 196, 124, 0.08) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
animation: systemeHaloBreathe 14s ease-in-out infinite;
}
@keyframes systemeHaloBreathe {
0%, 100% { opacity: 0.6; transform: translate(-50%, 0) scale(1); }
50% { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
}
/* HEADER */
.mfl-systeme-header {
text-align: center;
position: relative;
z-index: 1;
margin-bottom: 5rem;
}
.mfl-systeme-eyebrow {
display: block;
margin-bottom: 2rem;
font-size: 0.82rem;
letter-spacing: 0.46em;
color: var(--mfl-or);
font-weight: 600;
}
.mfl-systeme-title {
font-family: var(--mfl-font-titre);
font-size: clamp(2.3rem, 4.4vw, 3.8rem);
font-weight: 300;
color: var(--mfl-bordeaux);
line-height: 1.15;
letter-spacing: 0.005em;
margin: 0;
}
.mfl-systeme-title-em {
font-style: italic;
color: var(--mfl-or);
font-family: var(--mfl-font-titre);
font-weight: 300;
animation: systemeTitleGlow 7s ease-in-out infinite;
}
@keyframes systemeTitleGlow {
0%, 100% { text-shadow: none; }
50% { text-shadow: 0 0 16px rgba(232, 196, 124, 0.35); }
}
/* GRID 4 PRODUITS · architectural premium · 4 cartes rigoureusement identiques */
.mfl-systeme-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2.5rem;
max-width: 1320px;
margin: 0 auto 6rem;
align-items: stretch;
position: relative;
z-index: 1;
}
/* Une carte produit du système · TOUTES IDENTIQUES · INTENSITÉ COUTURE */
.mfl-systeme-produit {
position: relative;
display: flex;
flex-direction: column;
text-align: center;
padding: 2.5rem 1rem 1.5rem;
background:
linear-gradient(180deg, #fdfaf3 0%, var(--mfl-ivoire) 100%);
border: 1px solid rgba(201, 160, 80, 0.36);
border-radius: 4px;
box-shadow:
0 24px 60px rgba(74, 15, 26, 0.10),
0 10px 24px rgba(74, 15, 26, 0.06),
inset 0 0 0 4px rgba(201, 160, 80, 0.04);
transition: var(--mfl-transition);
}
.mfl-systeme-produit:hover {
transform: translateY(-6px);
box-shadow:
0 32px 80px rgba(74, 15, 26, 0.16),
0 14px 32px rgba(74, 15, 26, 0.08),
inset 0 0 0 4px rgba(201, 160, 80, 0.08);
border-color: rgba(201, 160, 80, 0.55);
}
/* Ornements or aux 4 coins · marquage couture */
.mfl-systeme-produit::before,
.mfl-systeme-produit::after {
content: '';
position: absolute;
width: 14px;
height: 14px;
border: 1px solid var(--mfl-or);
opacity: 0.42;
pointer-events: none;
transition: var(--mfl-transition);
}
.mfl-systeme-produit::before {
top: 8px;
left: 8px;
border-right: none;
border-bottom: none;
}
.mfl-systeme-produit::after {
bottom: 8px;
right: 8px;
border-left: none;
border-top: none;
}
.mfl-systeme-produit:hover::before,
.mfl-systeme-produit:hover::after {
opacity: 0.78;
width: 18px;
height: 18px;
}
/* Numérotation couture luxe magazine · 01 02 03 04 */
.mfl-systeme-produit-numero {
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: 1.2rem;
font-weight: 300;
color: var(--mfl-or);
margin-bottom: 1.2rem;
letter-spacing: 0.08em;
opacity: 0.78;
}
/* HEADER · nom + émotion au-dessus du visuel */
.mfl-systeme-produit-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
margin-bottom: 1.8rem;
}
.mfl-systeme-produit-nom {
font-family: var(--mfl-font-titre);
font-size: clamp(1.3rem, 1.8vw, 1.65rem);
font-weight: 300;
color: var(--mfl-bordeaux);
letter-spacing: 0.015em;
line-height: 1.1;
margin: 0;
}
.mfl-systeme-produit-nom sup {
font-size: 0.4em;
vertical-align: super;
color: var(--mfl-or);
letter-spacing: 0.08em;
margin-left: 0.05em;
}
.mfl-systeme-produit-emotion {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: clamp(0.88rem, 1.05vw, 1rem);
color: var(--mfl-or);
font-weight: 300;
letter-spacing: 0.015em;
margin: 0;
line-height: 1.4;
}
/* Span nowrap utility · empêche les noms produits de se casser */
.mfl-systeme-nowrap {
white-space: nowrap;
display: inline-block;
}
/* SLIMTH iconique · UNIQUEMENT distinction par badge + glow intérieur (pas de cadre différent) */
.mfl-systeme-produit-iconique {
background:
radial-gradient(ellipse at 50% 30%, rgba(232, 196, 124, 0.18) 0%, transparent 65%),
linear-gradient(180deg, #fdfaf3 0%, var(--mfl-ivoire) 100%);
border-color: rgba(201, 160, 80, 0.32);
box-shadow:
0 18px 48px rgba(74, 15, 26, 0.08),
0 6px 18px rgba(201, 160, 80, 0.10);
}
.mfl-systeme-produit-iconique:hover {
box-shadow:
0 26px 64px rgba(74, 15, 26, 0.14),
0 10px 24px rgba(201, 160, 80, 0.16);
}
.mfl-systeme-produit-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
font-family: var(--mfl-font-mention);
font-size: 0.58rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--mfl-or);
background: var(--mfl-bordeaux);
padding: 0.5rem 1.2rem;
border-radius: 2px;
z-index: 3;
font-weight: 600;
box-shadow: 0 4px 12px rgba(74, 15, 26, 0.18);
white-space: nowrap;
}
/* Lien sur le visuel · pour cliquer dessus */
.mfl-systeme-produit-lien {
display: block;
text-decoration: none;
}
/* Visuel produit · aspect ratio harmonisé */
.mfl-systeme-produit-visuel {
width: 100%;
aspect-ratio: 4 / 5;
background: linear-gradient(180deg, #fdfaf3 0%, var(--mfl-ivoire) 100%);
border-radius: 4px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 1.4rem 1rem;
margin-bottom: 1.8rem;
box-shadow: 0 14px 40px rgba(74, 15, 26, 0.06);
transition: var(--mfl-transition);
}
.mfl-systeme-produit:hover .mfl-systeme-produit-visuel {
box-shadow: 0 22px 56px rgba(74, 15, 26, 0.12);
}
.mfl-systeme-produit-visuel img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
transition: transform 0.7s cubic-bezier(0.25, 0.45, 0.45, 0.95);
}
/* Zoom doux sur Renaissance et Métamorphose pour équilibrer SLIMTH */
.mfl-systeme-produit:not(.mfl-systeme-produit-iconique):not(.mfl-systeme-produit-cercle) .mfl-systeme-produit-visuel img {
transform: scale(1.12);
}
.mfl-systeme-produit:not(.mfl-systeme-produit-iconique):not(.mfl-systeme-produit-cercle):hover .mfl-systeme-produit-visuel img {
transform: scale(1.17);
}
/* MAILLAGE émotionnel sous chaque produit */
.mfl-systeme-produit-maillage {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.86rem;
line-height: 1.55;
color: var(--mfl-bordeaux);
opacity: 0.78;
font-weight: 300;
margin: 0 auto;
max-width: 250px;
margin-top: auto;
padding-top: 0.5rem;
}
.mfl-systeme-produit-maillage a {
color: var(--mfl-or);
text-decoration: none;
border-bottom: 1px solid rgba(201, 160, 80, 0.4);
transition: var(--mfl-transition);
font-style: italic;
white-space: nowrap;
display: inline-block;
}
.mfl-systeme-produit-maillage a sup {
font-size: 0.55em;
vertical-align: super;
letter-spacing: 0.08em;
margin-left: 0.02em;
}
.mfl-systeme-produit-maillage a:hover {
color: var(--mfl-bordeaux);
border-bottom-color: var(--mfl-bordeaux);
}
/* ===== LE CERCLE MAISON · contenu rigoureusement compact (tient dans le 4/5) ===== */
.mfl-systeme-cercle-carte {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.2rem 0.9rem !important;
text-align: center;
background:
radial-gradient(ellipse at 50% 0%, rgba(232, 196, 124, 0.08) 0%, transparent 65%),
linear-gradient(180deg, var(--mfl-ivoire) 0%, #fdfaf3 100%) !important;
position: relative;
gap: 0.6rem;
}
.mfl-systeme-cercle-ornement {
font-size: 1.1rem;
color: var(--mfl-or);
display: block;
line-height: 1;
}
.mfl-systeme-cercle-titre {
font-family: var(--mfl-font-mention);
font-size: 0.62rem;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--mfl-bordeaux);
font-weight: 600;
margin: 0;
line-height: 1.4;
}
.mfl-systeme-cercle-lignes {
font-family: var(--mfl-font-titre);
font-size: 0.82rem;
font-weight: 300;
color: var(--mfl-bordeaux);
line-height: 1.5;
margin: 0;
}
.mfl-systeme-cercle-engagement {
font-family: var(--mfl-font-corps);
font-size: 0.74rem;
color: var(--mfl-or);
margin: 0;
font-weight: 300;
line-height: 1.4;
}
.mfl-systeme-cercle-engagement em {
font-style: italic;
}
.mfl-systeme-cercle-cta-text {
font-family: var(--mfl-font-mention);
font-size: 0.6rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--mfl-or);
font-weight: 600;
padding-top: 0.5rem;
border-top: 1px solid rgba(201, 160, 80, 0.3);
width: 75%;
text-align: center;
transition: var(--mfl-transition);
white-space: nowrap;
display: block;
margin-top: 0.3rem;
}
.mfl-systeme-produit-cercle:hover .mfl-systeme-cercle-cta-text {
color: var(--mfl-bordeaux);
border-top-color: var(--mfl-bordeaux);
}
/* ===== TEXTE ÉMOTIONNEL CENTRAL ===== */
.mfl-systeme-emotion-central {
font-family: var(--mfl-font-mention);
font-size: clamp(0.95rem, 1.4vw, 1.15rem);
letter-spacing: 0.46em;
text-transform: uppercase;
color: var(--mfl-or);
text-align: center;
font-weight: 500;
margin: 0 auto 2.8rem;
position: relative;
z-index: 1;
padding: 1.5rem 0;
}
.mfl-systeme-emotion-central em {
font-style: normal;
color: var(--mfl-bordeaux);
font-weight: 600;
}
.mfl-systeme-emotion-central::before,
.mfl-systeme-emotion-central::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--mfl-or), transparent);
opacity: 0.55;
}
.mfl-systeme-emotion-central::before { top: 0; }
.mfl-systeme-emotion-central::after { bottom: 0; }
/* ===== DÉCLENCHEUR PSYCHOLOGIQUE ===== */
.mfl-systeme-declencheur {
font-family: var(--mfl-font-titre);
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
color: var(--mfl-bordeaux);
text-align: center;
font-weight: 300;
line-height: 1.55;
margin: 0 auto 3.5rem;
max-width: 580px;
position: relative;
z-index: 1;
opacity: 0.88;
}
.mfl-systeme-declencheur em {
font-style: italic;
color: var(--mfl-or);
}
/* ===== CTA PRINCIPAL ENTRER DANS LA MÉTHODE ===== */
.mfl-systeme-cta-principal {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--mfl-font-mention);
font-size: 0.84rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--mfl-or-clair);
background: var(--mfl-bordeaux);
padding: 1.5rem 3.2rem;
border: 1px solid var(--mfl-bordeaux);
text-decoration: none;
transition: var(--mfl-transition);
font-weight: 600;
margin: 0 auto;
position: relative;
z-index: 1;
box-shadow: 0 12px 40px rgba(74, 15, 26, 0.22);
white-space: nowrap;
}
.mfl-systeme-v2 .mfl-systeme-cta-principal {
display: flex;
width: max-content;
}
.mfl-systeme-cta-principal:hover {
background: var(--mfl-bordeaux-fonce);
color: var(--mfl-or);
transform: translateY(-3px);
box-shadow: 0 16px 48px rgba(74, 15, 26, 0.32);
}
/* ===== RARETÉ SOUS LE CTA ===== */
.mfl-systeme-rarete {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.86rem;
color: var(--mfl-or);
text-align: center;
margin: 1.4rem auto 5.5rem;
letter-spacing: 0.03em;
font-weight: 300;
opacity: 0.85;
position: relative;
z-index: 1;
}
/* ===== COCON SÉMANTIQUE · liens piliers SEO ===== */
.mfl-systeme-cocon {
text-align: center;
margin: 4rem auto 3rem;
max-width: 980px;
position: relative;
z-index: 1;
}
.mfl-systeme-cocon-titre {
display: block;
font-family: var(--mfl-font-mention);
font-size: 0.66rem;
letter-spacing: 0.46em;
text-transform: uppercase;
color: var(--mfl-or);
font-weight: 600;
opacity: 0.82;
margin-bottom: 1.6rem;
}
.mfl-systeme-cocon-liste {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem 2.2rem;
}
.mfl-systeme-cocon-liste a {
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: 1rem;
color: var(--mfl-bordeaux);
text-decoration: none;
border-bottom: 1px solid rgba(201, 160, 80, 0.4);
padding-bottom: 0.18rem;
transition: var(--mfl-transition);
opacity: 0.92;
}
.mfl-systeme-cocon-liste a:hover {
color: var(--mfl-or);
border-bottom-color: var(--mfl-or);
}
/* ===== MICRO-PREUVES MAISON · barre finale ===== */
.mfl-systeme-preuves {
list-style: none;
padding: 3rem 0 0;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2rem;
max-width: 1180px;
border-top: 1px solid rgba(201, 160, 80, 0.18);
position: relative;
z-index: 1;
}
.mfl-systeme-preuves li {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.4rem;
}
.mfl-systeme-preuve-titre {
font-family: var(--mfl-font-mention);
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--mfl-or);
font-weight: 600;
}
.mfl-systeme-preuve-sub {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.82rem;
color: var(--mfl-bordeaux);
opacity: 0.68;
font-weight: 300;
}
/* ===== RESPONSIVE SYSTÈME MAISON ===== */
@media (max-width: 1100px) {
.mfl-systeme-grid {
grid-template-columns: repeat(2, 1fr);
gap: 3rem 2rem;
max-width: 800px;
}
.mfl-systeme-mots {
grid-template-columns: 1fr;
gap: 1.2rem;
}
.mfl-systeme-sep {
display: none;
}
.mfl-systeme-preuves {
grid-template-columns: repeat(3, 1fr);
gap: 2rem 1.4rem;
}
}
@media (max-width: 700px) {
.mfl-systeme-v2 {
padding: 5rem 1.5rem 4rem;
}
.mfl-systeme-grid {
grid-template-columns: 1fr;
max-width: 360px;
}
.mfl-systeme-preuves {
grid-template-columns: repeat(2, 1fr);
gap: 1.6rem 1rem;
}
}
/* ===== RESPONSIVE PIÈCES ===== */
@media (max-width: 968px) {
.mfl-pieces-grid {
grid-template-columns: 1fr;
gap: 4rem;
max-width: 480px;
}
.mfl-piece-heros {
transform: scale(1);
order: -1;
}
.mfl-piece-heros:hover {
transform: translateY(-6px);
}
.mfl-parcours-maison-fil {
flex-direction: column;
gap: 1.2rem;
}
.mfl-parcours-maison-trait {
width: 60px;
height: 40px;
background: linear-gradient(180deg,
transparent 0%,
rgba(201, 160, 80, 0.5) 30%,
var(--mfl-or) 50%,
rgba(201, 160, 80, 0.5) 70%,
transparent 100%);
flex: none;
max-width: 1px;
}
}
@media (max-width: 600px) {
.mfl-section-pieces {
padding-top: 6rem;
padding-bottom: 5rem;
}
.mfl-pieces-header {
margin-bottom: 4rem;
}
.mfl-piece-visuel {
padding: 2rem 1.4rem;
}
}
/* ====== PREUVES SCIENTIFIQUES (signature crédibilité) ====== */
.mfl-preuves-section {
background: var(--mfl-ivoire);
padding: 5rem 0;
border-top: 1px solid rgba(201, 160, 80, 0.2);
border-bottom: 1px solid rgba(201, 160, 80, 0.2);
}
.mfl-preuves-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.mfl-preuve-card {
background: white;
padding: 2rem;
border-radius: var(--mfl-radius);
border-left: 3px solid var(--mfl-or);
}
.mfl-preuve-label {
font-family: var(--mfl-font-mention);
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--mfl-or);
margin-bottom: 1rem;
font-weight: 500;
}
.mfl-preuve-titre {
font-family: var(--mfl-font-titre);
font-size: 1.2rem;
color: var(--mfl-bordeaux);
margin-bottom: 0.8rem;
font-weight: 400;
}
.mfl-preuve-texte {
font-family: var(--mfl-font-corps);
font-size: 0.95rem;
line-height: 1.7;
color: var(--mfl-noir-doux);
}
.mfl-preuve-source {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.85rem;
color: var(--mfl-gris-pierre);
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #eaeaea;
}
/* ====== ACTIFS DÉTAIL ====== */
.mfl-actifs-liste {
list-style: none;
margin: 2rem 0;
}
.mfl-actifs-liste li {
padding: 1.5rem 0;
border-bottom: 1px solid rgba(201, 160, 80, 0.2);
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.mfl-actif-symbole {
color: var(--mfl-or);
font-size: 1.5rem;
font-family: var(--mfl-font-titre);
flex-shrink: 0;
line-height: 1;
}
.mfl-actif-info {
flex: 1;
}
.mfl-actif-nom {
font-family: var(--mfl-font-titre);
font-size: 1.2rem;
color: var(--mfl-bordeaux);
margin-bottom: 0.5rem;
font-weight: 400;
}
.mfl-actif-dose {
font-family: var(--mfl-font-mention);
font-size: 0.78rem;
letter-spacing: 0.2em;
color: var(--mfl-or);
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.mfl-actif-effet {
font-family: var(--mfl-font-corps);
font-size: 1rem;
line-height: 1.6;
}
/* ====== FORMULAIRE NEWSLETTER ====== */
.mfl-newsletter-form {
display: flex;
gap: 0.8rem;
max-width: 500px;
margin: 2rem auto;
}
.mfl-input {
flex: 1;
padding: 1rem 1.5rem;
border: 1px solid var(--mfl-or);
background: white;
font-family: var(--mfl-font-corps);
font-size: 1rem;
border-radius: var(--mfl-radius);
color: var(--mfl-bordeaux);
}
.mfl-mention-rgpd {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.85rem;
color: var(--mfl-gris-pierre);
text-align: center;
margin-top: 1rem;
}
/* ====== FOOTER ====== */
.mfl-footer {
background: var(--mfl-bordeaux-fonce);
color: var(--mfl-champagne);
padding: 5rem 0 0;
}
.mfl-footer-container {
max-width: 1300px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 3rem;
}
.mfl-footer h4 {
font-family: var(--mfl-font-titre);
color: var(--mfl-or);
font-size: 1.1rem;
letter-spacing: 0.12em;
margin-bottom: 1.5rem;
font-weight: 400;
}
.mfl-footer ul {
list-style: none;
}
.mfl-footer li { margin-bottom: 0.6rem; }
.mfl-footer a {
color: var(--mfl-champagne);
font-family: var(--mfl-font-corps);
font-size: 0.95rem;
transition: var(--mfl-transition);
}
.mfl-footer a:hover { color: var(--mfl-or); }
.mfl-footer-baseline,
.mfl-footer-signature {
font-family: var(--mfl-font-corps);
font-size: 0.95rem;
line-height: 1.7;
}
.mfl-footer-signature {
font-style: italic;
color: var(--mfl-or-clair);
margin-top: 2.5rem;
line-height: 1.4;
letter-spacing: 0.03em;
}
/* Bandeau légal du bas · hiérarchisé, lisible mais discret */
.mfl-footer-bottom {
margin-top: 5rem;
padding: 2.5rem 0 3rem;
/* Fond moins agressif, légèrement plus clair que #170307 pour soutenir lisibilité */
background: #261015;
text-align: center;
font-family: var(--mfl-font-corps);
color: rgba(228, 208, 168, 0.78);
}
.mfl-footer-bottom p {
margin: 0.5rem 0;
line-height: 1.75;
}
/* Mention principale · copyright + SIRET · lisible */
.mfl-footer-legal-main {
font-size: 0.82rem;
font-style: italic;
letter-spacing: 0.04em;
color: rgba(228, 208, 168, 0.82);
}
/* Mention secondaire · siège · légèrement plus discrète */
.mfl-footer-legal-sub {
font-size: 0.78rem;
font-style: italic;
color: rgba(228, 208, 168, 0.72);
}
/* Mentions BoD + engagement · discrètes mais lisibles */
.mfl-footer-bod,
.mfl-footer-engagement {
font-size: 0.72rem;
font-style: italic;
letter-spacing: 0.03em;
color: rgba(228, 208, 168, 0.58);
max-width: 950px;
margin: 0.55rem auto;
line-height: 1.75;
}
.mfl-footer-engagement {
margin-top: 1rem;
}
/* ====================================================================
PAGES ÉDITIONS · CARNET · GUIDE · PROTOCOLE
Squelette éditorial Maison · 30 mai 2026
==================================================================== */
/* HERO ÉDITION · cover + texte côte à côte */
.mfl-edition-hero {
background: var(--mfl-ivoire-chaud, #F6F1E8);
padding: 8rem 1.5rem 6rem;
}
.mfl-edition-hero-rare {
background: var(--mfl-bordeaux, #4A1F24);
color: var(--mfl-ivoire-chaud, #F6F1E8);
}
.mfl-edition-hero-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 5rem;
align-items: center;
}
.mfl-edition-hero-cover {
position: relative;
}
.mfl-edition-hero-cover img {
width: 100%;
max-width: 420px;
height: auto;
display: block;
margin: 0 auto;
box-shadow:
0 30px 80px rgba(30, 23, 21, 0.25),
0 10px 30px rgba(30, 23, 21, 0.15);
border-radius: 2px;
}
.mfl-edition-hero-eyebrow {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--mfl-or-vieilli, #B89A68);
margin-bottom: 2rem;
}
.mfl-edition-hero-eyebrow-rare {
color: var(--mfl-or-vieilli, #B89A68);
opacity: 0.95;
}
.mfl-edition-hero-titre {
font-family: 'Cormorant Garamond', 'Didot', serif;
font-weight: 300;
font-size: clamp(3rem, 6vw, 5rem);
line-height: 1.05;
color: var(--mfl-bordeaux, #4A1F24);
margin: 0 0 1.5rem;
letter-spacing: 0.01em;
}
.mfl-edition-hero-rare .mfl-edition-hero-titre {
color: var(--mfl-or-vieilli, #B89A68);
}
.mfl-edition-hero-soustitre {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(1.2rem, 1.8vw, 1.5rem);
color: var(--mfl-bronze-chaud, #8A6A4A);
margin: 0 0 2rem;
line-height: 1.4;
}
.mfl-edition-hero-rare .mfl-edition-hero-soustitre {
color: rgba(246, 241, 232, 0.8);
}
.mfl-edition-hero-baseline {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1rem, 1.2vw, 1.15rem);
line-height: 1.75;
color: var(--mfl-noir-brun, #1E1715);
margin: 0 0 2.5rem;
max-width: 560px;
}
.mfl-edition-hero-rare .mfl-edition-hero-baseline {
color: rgba(246, 241, 232, 0.85);
}
.mfl-edition-hero-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mfl-bronze-chaud, #8A6A4A);
}
.mfl-edition-hero-rare .mfl-edition-hero-meta {
color: rgba(184, 154, 104, 0.75);
}
.mfl-edition-meta-item em {
font-style: italic;
text-transform: none;
letter-spacing: 0.04em;
color: var(--mfl-bordeaux, #4A1F24);
}
.mfl-edition-hero-rare .mfl-edition-meta-item em {
color: var(--mfl-or-vieilli, #B89A68);
}
.mfl-edition-meta-sep {
opacity: 0.5;
}
/* SECTIONS GÉNÉRIQUES ÉDITION */
.mfl-edition-manifeste,
.mfl-edition-sommaire,
.mfl-edition-pour-qui,
.mfl-edition-acquisition,
.mfl-edition-maillage {
padding: 6rem 1.5rem;
background: var(--mfl-ivoire-chaud, #F6F1E8);
}
.mfl-edition-sommaire {
background: #FBF8F2;
}
.mfl-edition-acquisition {
background: var(--mfl-bordeaux, #4A1F24);
text-align: center;
}
.mfl-edition-acquisition-rare {
background: #3A1518;
}
.mfl-edition-maillage {
background: #FBF8F2;
}
.mfl-edition-eyebrow {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--mfl-or-vieilli, #B89A68);
margin-bottom: 1.5rem;
text-align: center;
}
.mfl-edition-h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-style: italic;
font-size: clamp(2rem, 3.5vw, 2.8rem);
line-height: 1.2;
color: var(--mfl-bordeaux, #4A1F24);
margin: 0 0 3rem;
text-align: center;
letter-spacing: 0.005em;
}
.mfl-edition-acquisition .mfl-edition-h2 {
color: var(--mfl-or-vieilli, #B89A68);
font-style: normal;
font-size: clamp(2.5rem, 4vw, 3.5rem);
margin-bottom: 2rem;
}
.mfl-edition-acquisition .mfl-edition-eyebrow {
color: var(--mfl-or-vieilli, #B89A68);
opacity: 0.85;
}
/* MANIFESTE · paragraphes éditoriaux */
.mfl-edition-paragraphe {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1.05rem, 1.3vw, 1.18rem);
line-height: 1.85;
color: var(--mfl-noir-brun, #1E1715);
margin: 0 0 1.8rem;
text-align: left;
}
/* SOMMAIRE · liste des chapitres */
.mfl-edition-chapitres {
list-style: none;
padding: 0;
margin: 0;
max-width: 720px;
margin: 0 auto;
}
.mfl-edition-chapitres li {
display: grid;
grid-template-columns: 60px 1fr;
gap: 2rem;
padding: 2rem 0;
border-bottom: 1px solid rgba(184, 154, 104, 0.2);
align-items: start;
}
.mfl-edition-chapitres li:last-child {
border-bottom: none;
}
.mfl-edition-num {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-style: italic;
font-size: 1.8rem;
color: var(--mfl-or-vieilli, #B89A68);
line-height: 1;
letter-spacing: 0.02em;
}
.mfl-edition-chapitre-titre {
display: block;
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1.4rem;
color: var(--mfl-bordeaux, #4A1F24);
line-height: 1.3;
margin-bottom: 0.5rem;
}
.mfl-edition-chapitre-sous {
display: block;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: 1rem;
color: var(--mfl-bronze-chaud, #8A6A4A);
line-height: 1.6;
}
/* POUR QUI · profils éditoriaux */
.mfl-edition-profils {
list-style: none;
padding: 0;
max-width: 720px;
margin: 0 auto;
}
.mfl-edition-profils li {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1.05rem, 1.3vw, 1.18rem);
line-height: 1.8;
color: var(--mfl-noir-brun, #1E1715);
padding: 1.2rem 0 1.2rem 2.5rem;
border-bottom: 1px solid rgba(184, 154, 104, 0.2);
position: relative;
}
.mfl-edition-profils li::before {
content: '·';
position: absolute;
left: 1rem;
color: var(--mfl-or-vieilli, #B89A68);
font-size: 1.5rem;
line-height: 1;
}
.mfl-edition-profils li:last-child {
border-bottom: none;
}
/* ACQUISITION · bloc CTA */
.mfl-edition-acquisition-bloc {
text-align: center;
position: relative;
}
.mfl-edition-acquisition-mention {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1rem;
line-height: 1.7;
color: rgba(246, 241, 232, 0.7);
max-width: 480px;
margin: 0 auto 2.5rem;
}
.mfl-edition-cta {
display: inline-block;
background: transparent;
color: var(--mfl-or-vieilli, #B89A68);
border: 1px solid rgba(184, 154, 104, 0.5);
padding: 1.4rem 3rem;
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0.35em;
text-transform: uppercase;
text-decoration: none;
transition: all 0.7s ease;
}
.mfl-edition-cta:hover {
background: rgba(184, 154, 104, 0.1);
border-color: var(--mfl-or-vieilli, #B89A68);
}
.mfl-edition-acquisition-disponibilite {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.9rem;
color: rgba(184, 154, 104, 0.6);
letter-spacing: 0.03em;
margin: 2rem 0 0;
}
/* MAILLAGE · 3 autres éditions */
.mfl-edition-maillage-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 900px;
margin: 0 auto;
}
.mfl-edition-maillage-item {
background: var(--mfl-ivoire-chaud, #F6F1E8);
padding: 3rem 2rem;
text-align: center;
text-decoration: none;
border-top: 1px solid rgba(184, 154, 104, 0.3);
transition: all 0.6s ease;
}
.mfl-edition-maillage-item:hover {
background: white;
border-top-color: var(--mfl-or-vieilli, #B89A68);
transform: translateY(-3px);
}
.mfl-edition-maillage-num {
display: block;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: 2rem;
color: var(--mfl-or-vieilli, #B89A68);
margin-bottom: 1rem;
letter-spacing: 0.05em;
}
.mfl-edition-maillage-titre {
display: block;
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1.5rem;
color: var(--mfl-bordeaux, #4A1F24);
margin-bottom: 0.8rem;
}
.mfl-edition-maillage-sous {
display: block;
font-family: 'Cormorant Garamond', serif;
font-size: 0.95rem;
line-height: 1.6;
color: var(--mfl-bronze-chaud, #8A6A4A);
}
/* ====================================================================
RECHERCHE MAISON · Demande curatoriale particulière
Niveau Maison sélection · pas de SAV ecommerce · 30 mai 2026
==================================================================== */
.mfl-recherche-section {
background: var(--mfl-bordeaux, #4A1F24);
padding: 8rem 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
/* Voile or quasi invisible */
.mfl-recherche-section::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 80%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center,
rgba(184, 154, 104, 0.04) 0%,
transparent 65%);
pointer-events: none;
z-index: 0;
}
.mfl-recherche-container {
position: relative;
z-index: 1;
max-width: 720px;
margin: 0 auto;
}
.mfl-recherche-eyebrow {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.45em;
text-transform: uppercase;
color: var(--mfl-or-vieilli, #B89A68);
opacity: 0.85;
margin-bottom: 2.5rem;
}
.mfl-recherche-titre {
font-family: 'Cormorant Garamond', 'Didot', serif;
font-weight: 300;
font-style: italic;
font-size: clamp(2rem, 3.8vw, 3.2rem);
line-height: 1.15;
color: var(--mfl-or-vieilli, #B89A68);
margin: 0 0 2.5rem;
letter-spacing: 0.01em;
}
.mfl-recherche-phrase {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1.05rem, 1.35vw, 1.2rem);
line-height: 1.75;
color: rgba(246, 241, 232, 0.78);
margin: 0 auto 3rem;
max-width: 560px;
}
/* Formulaire · 2 champs + CTA · alignés vertical comme l'invitation */
.mfl-recherche-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
max-width: 480px;
margin: 0 auto 2rem;
}
.mfl-recherche-input {
background: rgba(246, 241, 232, 0.96);
border: none;
border-bottom: 1px solid rgba(184, 154, 104, 0.4);
border-radius: 0;
padding: 1.4rem 1.5rem;
font-family: 'Cormorant Garamond', serif;
font-size: 1.05rem;
font-style: italic;
color: var(--mfl-noir-brun, #1E1715);
letter-spacing: 0.02em;
text-align: center;
transition: border-color 0.6s ease, background 0.6s ease;
outline: none;
-webkit-appearance: none;
appearance: none;
}
.mfl-recherche-input::placeholder {
color: rgba(74, 31, 36, 0.45);
font-style: italic;
letter-spacing: 0.02em;
}
.mfl-recherche-input:focus {
border-bottom-color: var(--mfl-or-vieilli, #B89A68);
background: rgba(246, 241, 232, 1);
}
.mfl-recherche-cta {
background: transparent;
color: var(--mfl-or-vieilli, #B89A68);
border: 1px solid rgba(184, 154, 104, 0.5);
border-radius: 0;
padding: 1.4rem 2.5rem;
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0.35em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.7s ease;
box-shadow: none;
}
.mfl-recherche-cta:hover {
background: rgba(184, 154, 104, 0.08);
border-color: rgba(184, 154, 104, 0.75);
}
.mfl-recherche-mention {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.85rem;
letter-spacing: 0.04em;
color: rgba(246, 241, 232, 0.4);
margin: 0;
}
@media (max-width: 640px) {
.mfl-recherche-section {
padding: 5rem 1.25rem;
}
.mfl-recherche-titre {
font-size: 1.85rem;
margin-bottom: 2rem;
}
.mfl-recherche-input,
.mfl-recherche-cta {
padding: 1.2rem 1.25rem;
}
}
/* ====================================================================
PAGE RÉVÉLATION · Une journée Maison · niveau Aman
==================================================================== */
.mfl-revelation-hero {
background: var(--mfl-bordeaux, #4A1F24);
padding: 11rem 1.5rem 9rem;
text-align: center;
position: relative;
overflow: hidden;
}
.mfl-revelation-hero::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 70%;
height: 80%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center,
rgba(184, 154, 104, 0.07) 0%,
rgba(184, 154, 104, 0.02) 50%,
transparent 75%);
pointer-events: none;
z-index: 0;
}
.mfl-revelation-hero-inner {
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
}
.mfl-revelation-eyebrow {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.45em;
text-transform: uppercase;
color: var(--mfl-or-vieilli, #B89A68);
opacity: 0.85;
margin-bottom: 3rem;
}
.mfl-revelation-titre {
font-family: 'Cormorant Garamond', 'Didot', serif;
font-weight: 300;
font-style: italic;
font-size: clamp(4rem, 9vw, 7rem);
line-height: 1;
color: var(--mfl-or-vieilli, #B89A68);
margin: 0 0 3rem;
letter-spacing: 0.02em;
}
.mfl-revelation-baseline {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1.1rem, 1.5vw, 1.3rem);
line-height: 1.8;
color: rgba(246, 241, 232, 0.78);
margin: 0;
}
.mfl-revelation-baseline em {
font-style: italic;
color: var(--mfl-or-vieilli, #B89A68);
opacity: 0.95;
}
.mfl-revelation-section {
background: var(--mfl-ivoire-chaud, #F6F1E8);
padding: 7rem 1.5rem;
}
.mfl-revelation-temps {
background: #FBF8F2;
padding: 7rem 1.5rem;
}
.mfl-revelation-temps-item {
margin-bottom: 4rem;
padding-bottom: 4rem;
border-bottom: 1px solid rgba(184, 154, 104, 0.2);
}
.mfl-revelation-temps-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.mfl-revelation-temps-eyebrow {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.68rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--mfl-or-vieilli, #B89A68);
margin-bottom: 1.25rem;
}
.mfl-revelation-temps-titre {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-style: italic;
font-size: clamp(1.7rem, 2.5vw, 2.2rem);
line-height: 1.25;
color: var(--mfl-bordeaux, #4A1F24);
margin: 0 0 1.5rem;
}
.mfl-revelation-temps-texte {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1.05rem, 1.3vw, 1.18rem);
line-height: 1.85;
color: var(--mfl-noir-brun, #1E1715);
margin: 0;
max-width: 720px;
}
.mfl-revelation-invitation {
background: var(--mfl-ivoire-chaud, #F6F1E8);
padding: 7rem 1.5rem;
}
@media (max-width: 640px) {
.mfl-revelation-hero {
padding: 7rem 1.25rem 5rem;
}
.mfl-revelation-titre {
font-size: 3.5rem;
}
.mfl-revelation-section,
.mfl-revelation-temps,
.mfl-revelation-invitation {
padding: 4rem 1.25rem;
}
.mfl-revelation-temps-item {
margin-bottom: 3rem;
padding-bottom: 3rem;
}
}
/* ====================================================================
NOTRE MAISON · MISE EN SCÈNE CINÉMA ÉDITORIAL SILENCIEUX
Niveau Apple × Aesop × Dior × Diptyque × Augustinus Bader
30 mai 2026 · 12h00
==================================================================== */
/* ===== 1 · HERO COURT · respiration d'ouverture ===== */
.mfl-nm-hero {
background: var(--mfl-ivoire-chaud, #F6F1E8);
padding: 9rem 1.5rem 6rem;
text-align: center;
position: relative;
overflow: hidden;
}
.mfl-nm-hero::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 60%;
height: 80%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center,
rgba(184, 154, 104, 0.08) 0%,
rgba(184, 154, 104, 0.03) 40%,
transparent 70%);
pointer-events: none;
z-index: 0;
animation: nmHaloRespire 12s ease-in-out infinite;
}
@keyframes nmHaloRespire {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
.mfl-nm-hero-inner {
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
}
.mfl-nm-eyebrow {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.45em;
text-transform: uppercase;
color: var(--mfl-or-vieilli, #B89A68);
opacity: 0.85;
margin-bottom: 3rem;
}
.mfl-nm-titre {
font-family: 'Cormorant Garamond', 'Didot', serif;
font-weight: 300;
font-style: italic;
font-size: clamp(4rem, 8.5vw, 7rem);
line-height: 1;
color: var(--mfl-bordeaux, #4A1F24);
margin: 0 0 2rem;
letter-spacing: 0.015em;
}
.mfl-nm-baseline {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1.1rem, 1.5vw, 1.3rem);
line-height: 1.7;
color: var(--mfl-bronze-chaud, #8A6A4A);
margin: 0 0 3.5rem;
}
.mfl-nm-baseline em {
font-style: italic;
}
.mfl-nm-ornement {
display: inline-block;
width: 80px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--mfl-or-vieilli, #B89A68), transparent);
opacity: 0.6;
animation: nmOrnementGlow 6s ease-in-out infinite;
}
@keyframes nmOrnementGlow {
0%, 100% { opacity: 0.4; width: 60px; }
50% { opacity: 0.85; width: 100px; }
}
/* ===== 2 · MANIFESTE · LA SECONDE TRANSFORMATION ===== */
.mfl-nm-manifeste {
/* Même matière velours que la section direction */
background:
radial-gradient(ellipse at 50% 35%, rgba(184, 154, 104, 0.09) 0%, transparent 55%),
linear-gradient(180deg, #4A1F24 0%, #441C21 40%, #3F1A1E 80%, #4A1F24 100%);
padding: 9rem 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.mfl-nm-manifeste::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(rgba(255, 245, 225, 0.022) 1px, transparent 1px);
background-size: 3px 3px;
pointer-events: none;
z-index: 0;
opacity: 0.6;
}
.mfl-nm-manifeste-voile {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 85%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center,
rgba(212, 178, 124, 0.12) 0%,
rgba(184, 154, 104, 0.05) 40%,
rgba(184, 154, 104, 0.015) 65%,
transparent 80%);
pointer-events: none;
z-index: 0;
animation: nmHaloRespire 14s ease-in-out infinite;
}
.mfl-nm-manifeste-inner {
position: relative;
z-index: 1;
}
.mfl-nm-manifeste-quote {
font-family: 'Cormorant Garamond', 'Didot', serif;
font-weight: 300;
font-size: clamp(2.2rem, 4.5vw, 3.6rem);
line-height: 1.3;
color: var(--mfl-or-vieilli, #B89A68);
margin: 0 0 3rem;
letter-spacing: 0.01em;
}
.mfl-nm-manifeste-quote em {
font-style: italic;
color: var(--mfl-or-vieilli, #B89A68);
}
.mfl-nm-manifeste-texte {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1.1rem, 1.4vw, 1.25rem);
line-height: 1.85;
color: rgba(246, 241, 232, 0.82);
margin: 0 auto 1.5rem;
max-width: 620px;
}
.mfl-nm-manifeste-texte em {
font-style: italic;
color: var(--mfl-or-vieilli, #B89A68);
}
/* ===== 3 · VISUEL RESPIRATION ===== */
.mfl-nm-vision {
position: relative;
width: 100%;
background: var(--mfl-ivoire-chaud, #F6F1E8);
overflow: hidden;
padding: 6rem 0;
}
/* Voiles haut + bas · transitions atmosphériques avec sections adjacentes */
.mfl-nm-vision-voile-haut,
.mfl-nm-vision-voile-bas {
position: absolute;
left: 0;
width: 100%;
height: 6rem;
z-index: 2;
pointer-events: none;
}
.mfl-nm-vision-voile-haut {
top: 0;
background: linear-gradient(to bottom, var(--mfl-ivoire-chaud, #F6F1E8) 0%, transparent 100%);
}
.mfl-nm-vision-voile-bas {
bottom: 0;
background: linear-gradient(to top, var(--mfl-ivoire-chaud, #F6F1E8) 0%, transparent 100%);
}
.mfl-nm-vision-frame {
width: 92%;
max-width: 1640px;
height: 90vh;
min-height: 580px;
max-height: 1000px;
margin: 0 auto;
overflow: hidden;
position: relative;
border-radius: 2px;
}
.mfl-nm-vision-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
/* Ken Burns ultra-lent · invisible mais ressenti · 30s pour rythme contemplatif */
animation: nmKenBurns 30s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes nmKenBurns {
0% { transform: scale(1) translateY(0); }
100% { transform: scale(1.035) translateY(-0.8%); }
}
/* Halo lumineux atmosphérique · respiration imperceptible */
.mfl-nm-vision-halo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background: radial-gradient(ellipse at 50% 40%,
rgba(255, 220, 140, 0.08) 0%,
rgba(255, 220, 140, 0.03) 35%,
transparent 65%);
mix-blend-mode: screen;
animation: nmVisionPulse 16s ease-in-out infinite;
}
@keyframes nmVisionPulse {
0%, 100% { opacity: 0.45; }
50% { opacity: 0.85; }
}
/* ===== 4 · ANGLE MORT · allégé ===== */
.mfl-nm-angle {
background: #FBF8F2;
padding: 8rem 1.5rem;
}
.mfl-nm-citation {
margin: 4rem auto 0;
max-width: 540px;
text-align: center;
padding: 2.5rem 0;
border-top: 1px solid rgba(184, 154, 104, 0.25);
border-bottom: 1px solid rgba(184, 154, 104, 0.25);
}
.mfl-nm-citation p {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: clamp(1.4rem, 2vw, 1.7rem);
line-height: 1.5;
color: var(--mfl-bordeaux, #4A1F24);
margin: 0;
}
/* Mots typographiquement valorisés · italique + micro halo or */
.mfl-mot-or {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
color: var(--mfl-or-vieilli, #B89A68);
text-shadow: 0 0 12px rgba(184, 154, 104, 0.15);
letter-spacing: 0.01em;
font-weight: 400;
}
/* ===== 5 · LES SEPT PILIERS · minimal ===== */
.mfl-nm-piliers {
background: var(--mfl-ivoire-chaud, #F6F1E8);
padding: 8rem 1.5rem;
}
.mfl-nm-piliers-header {
text-align: center;
margin-bottom: 5rem;
}
.mfl-nm-piliers-grille {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 1080px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
border-top: 1px solid rgba(184, 154, 104, 0.2);
border-left: 1px solid rgba(184, 154, 104, 0.2);
}
.mfl-nm-pilier {
padding: 3rem 2.5rem;
border-right: 1px solid rgba(184, 154, 104, 0.2);
border-bottom: 1px solid rgba(184, 154, 104, 0.2);
position: relative;
transition: background 0.7s ease;
}
.mfl-nm-pilier:hover {
background: rgba(184, 154, 104, 0.04);
}
.mfl-nm-pilier-num {
display: block;
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-style: italic;
font-size: 1.5rem;
color: var(--mfl-or-vieilli, #B89A68);
margin-bottom: 1.25rem;
letter-spacing: 0.05em;
}
.mfl-nm-pilier-titre {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1.35rem;
line-height: 1.25;
color: var(--mfl-bordeaux, #4A1F24);
margin: 0 0 0.75rem;
}
.mfl-nm-pilier-texte {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1.05rem;
line-height: 1.7;
color: var(--mfl-noir-brun, #1E1715);
margin: 0;
}
.mfl-nm-piliers-cta {
text-align: center;
margin-top: 4rem;
}
/* ===== 6 · L'ÉCRITURE MAISON · bordeaux velours matière ===== */
.mfl-nm-direction {
/* Bordeaux avec matière · dégradé vertical subtil pour casser l'aplat */
background:
radial-gradient(ellipse at 50% 30%, rgba(184, 154, 104, 0.10) 0%, transparent 55%),
linear-gradient(180deg, #5A2A2F 0%, #4A1F24 35%, #3D1A1F 70%, #2E1418 100%);
padding: 9rem 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
/* Texture velours subtile · grain visible que de très près */
.mfl-nm-direction::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(rgba(255, 245, 225, 0.025) 1px, transparent 1px);
background-size: 3px 3px;
pointer-events: none;
z-index: 0;
opacity: 0.7;
}
.mfl-nm-direction-voile {
position: absolute;
top: 38%;
left: 50%;
width: 80%;
height: 80%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center,
rgba(212, 178, 124, 0.14) 0%,
rgba(184, 154, 104, 0.06) 35%,
rgba(184, 154, 104, 0.015) 60%,
transparent 80%);
pointer-events: none;
z-index: 0;
animation: nmHaloRespire 14s ease-in-out infinite;
}
.mfl-nm-direction-inner {
position: relative;
z-index: 1;
}
.mfl-nm-direction-eyebrow {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.45em;
text-transform: uppercase;
color: var(--mfl-or-vieilli, #B89A68);
opacity: 0.85;
margin-bottom: 2.5rem;
}
.mfl-nm-direction-titre {
font-family: 'Cormorant Garamond', 'Didot', serif;
font-weight: 300;
font-size: clamp(2.2rem, 4.5vw, 3.5rem);
line-height: 1.2;
color: var(--mfl-or-vieilli, #B89A68);
margin: 0 0 3rem;
letter-spacing: 0.01em;
}
.mfl-nm-direction-titre em {
font-style: italic;
}
.mfl-nm-direction-texte {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1.05rem, 1.3vw, 1.18rem);
line-height: 1.85;
color: rgba(246, 241, 232, 0.85);
margin: 0 auto 1.5rem;
max-width: 540px;
}
.mfl-nm-direction-signature {
font-family: 'Great Vibes', cursive;
font-size: clamp(2.5rem, 4vw, 3.5rem);
color: var(--mfl-or-vieilli, #B89A68);
margin: 3rem 0 2.5rem;
line-height: 1;
}
/* ===== 7 · MAILLAGE DISCRET ===== */
.mfl-nm-maillage {
background: var(--mfl-ivoire-chaud, #F6F1E8);
padding: 8rem 1.5rem;
}
.mfl-nm-maillage-header {
text-align: center;
margin-bottom: 4rem;
}
/* ===== ANIMATIONS UNIVERSELLES NOTRE MAISON ===== */
.mfl-fade-in-scroll {
opacity: 0;
transform: translateY(20px);
transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.mfl-fade-in-scroll.visible,
.mfl-fade-in-scroll.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ===== RESPONSIVE NOTRE MAISON ===== */
@media (max-width: 900px) {
.mfl-nm-piliers-grille {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.mfl-nm-hero {
padding: 6rem 1.25rem 4rem;
}
.mfl-nm-titre {
font-size: 3.5rem;
}
.mfl-nm-vision-frame {
height: 75vh;
min-height: 450px;
}
.mfl-nm-echo {
padding: 6rem 1.25rem;
}
.mfl-nm-echo-phrase {
font-size: 1.85rem;
}
.mfl-nm-angle,
.mfl-nm-piliers,
.mfl-nm-maillage {
padding: 5rem 1.25rem;
}
.mfl-nm-direction {
padding: 6rem 1.25rem;
}
.mfl-nm-pilier {
padding: 2.25rem 1.5rem;
}
}
/* ===== PRÉFÉRENCE RÉDUCTION MOUVEMENT ===== */
@media (prefers-reduced-motion: reduce) {
.mfl-nm-vision-image,
.mfl-nm-hero::before,
.mfl-nm-direction-voile,
.mfl-nm-ornement,
.mfl-nm-vision-onde {
animation: none;
}
.mfl-fade-in-scroll {
opacity: 1;
transform: none;
transition: none;
}
.mfl-nm-vision-image {
filter: none !important;
}
}
/* ====================================================================
NOTRE MAISON · NIVEAU IDENTITÉ HAUTE COUTURE · 30 mai 2026
Ornements bordeaux velours · monogramme · filets or · vague visuel
Footer Maison centré et net
==================================================================== */
/* ===== ORNEMENT DÉCORATIF AU-DESSUS DE L'EYEBROW ===== */
.mfl-nm-couture-ornement {
display: block;
width: 64px;
height: 64px;
margin: 0 auto 2.5rem;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.85;
animation: mflCoutureFloat 8s ease-in-out infinite;
}
@keyframes mflCoutureFloat {
0%, 100% { opacity: 0.7; transform: translateY(0); }
50% { opacity: 1; transform: translateY(-2px); }
}
/* ===== FILET OR DÉCORATIF SOUS LA QUOTE ===== */
.mfl-nm-couture-filet {
display: block;
width: 180px;
height: 1px;
margin: 0 auto 3rem;
background: linear-gradient(90deg, transparent, var(--mfl-or-vieilli, #B89A68) 30%, var(--mfl-or-vieilli, #B89A68) 70%, transparent);
position: relative;
opacity: 0.7;
}
.mfl-nm-couture-filet::before,
.mfl-nm-couture-filet::after {
content: '';
position: absolute;
top: 50%;
width: 4px;
height: 4px;
background: var(--mfl-or-vieilli, #B89A68);
transform: translateY(-50%) rotate(45deg);
}
.mfl-nm-couture-filet::before { left: calc(50% - 12px); }
.mfl-nm-couture-filet::after { left: calc(50% + 8px); }
/* ===== MONOGRAMME MFL EN FIN DE SECTION ===== */
.mfl-nm-couture-monogramme {
display: block;
margin: 4rem auto 0;
width: 86px;
padding: 1rem 0;
text-align: center;
font-family: 'Cormorant Garamond', 'Didot', serif;
font-style: italic;
font-weight: 400;
font-size: 1.05rem;
letter-spacing: 0.45em;
color: var(--mfl-or-vieilli, #B89A68);
opacity: 0.55;
border-top: 1px solid rgba(184, 154, 104, 0.3);
border-bottom: 1px solid rgba(184, 154, 104, 0.3);
text-indent: 0.45em;
}
/* ===== RENFORCEMENT BORDEAUX HAUTE COUTURE ===== */
/* Plus de profondeur, plus de matière, deux niveaux de halo or */
.mfl-nm-manifeste,
.mfl-nm-direction {
background:
radial-gradient(ellipse at 50% 22%, rgba(220, 188, 134, 0.13) 0%, transparent 45%),
radial-gradient(ellipse at 50% 80%, rgba(184, 154, 104, 0.06) 0%, transparent 50%),
linear-gradient(180deg, #5C2B30 0%, #4A1F24 30%, #3D1A1F 65%, #2A1216 100%);
padding: 11rem 1.5rem;
}
/* Encadrement subtil intérieur · trait or vieilli ultra-fin */
.mfl-nm-manifeste-inner,
.mfl-nm-direction-inner {
position: relative;
z-index: 2;
}
.mfl-nm-manifeste-inner::before,
.mfl-nm-direction-inner::before {
content: '';
position: absolute;
top: -3rem;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 2rem;
background: linear-gradient(to bottom, transparent, var(--mfl-or-vieilli, #B89A68));
opacity: 0.5;
}
/* Titres plus généreux, plus typographés */
.mfl-nm-manifeste-quote {
font-size: clamp(2.4rem, 5vw, 4rem);
letter-spacing: 0.012em;
line-height: 1.35;
}
.mfl-nm-direction-titre {
font-size: clamp(2.4rem, 5vw, 3.8rem);
letter-spacing: 0.012em;
}
/* Eyebrow plus aérée */
.mfl-nm-direction-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.5em;
opacity: 0.9;
}
/* ===== EFFET VAGUE SUR LE VISUEL · ondulation imperceptible ===== */
.mfl-nm-vision-image {
/* Le filter SVG est appliqué sur l'image · animation interne via SVG */
filter: url(#mflVagueFilter);
}
/* Surcouche onde lumineuse · gradient qui se déplace horizontalement sur l'image */
.mfl-nm-vision-onde {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
105deg,
transparent 0%,
transparent 40%,
rgba(255, 230, 170, 0.04) 50%,
transparent 60%,
transparent 100%
);
background-size: 200% 100%;
mix-blend-mode: screen;
animation: mflOndeLuminale 18s ease-in-out infinite;
}
@keyframes mflOndeLuminale {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ===== FOOTER MAISON NET ET CENTRÉ ===== */
.mfl-footer {
background:
linear-gradient(180deg, #3A1418 0%, #2D0F12 60%, #240B0E 100%);
}
.mfl-footer-container {
max-width: 1240px;
padding: 0 2.5rem;
gap: 4rem 3rem;
grid-template-columns: 1.2fr 1fr 1fr 1fr;
}
/* Titres colonnes plus généreux, lettres mieux espacées */
.mfl-footer h4 {
font-size: 1rem;
letter-spacing: 0.15em;
margin-bottom: 1.75rem;
font-weight: 400;
color: var(--mfl-or-vieilli, #B89A68);
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(184, 154, 104, 0.18);
}
.mfl-footer li {
margin-bottom: 0.7rem;
}
.mfl-footer a {
font-size: 0.92rem;
letter-spacing: 0.02em;
opacity: 0.88;
transition: opacity 0.4s ease, color 0.4s ease;
}
.mfl-footer a:hover {
opacity: 1;
color: var(--mfl-or-vieilli, #B89A68);
}
.mfl-footer-baseline {
font-size: 0.95rem;
line-height: 1.85;
opacity: 0.85;
}
.mfl-footer-signature {
margin-top: 2.5rem;
line-height: 1.5;
letter-spacing: 0.05em;
opacity: 0.7;
}
/* Bandeau bas · CENTRÉ, ESPACÉ, RESPIRANT */
.mfl-footer-bottom {
margin-top: 6rem;
padding: 3rem 0 4rem;
background: #1F090C;
border-top: 1px solid rgba(184, 154, 104, 0.12);
position: relative;
}
.mfl-footer-bottom::before {
content: '';
position: absolute;
top: -0.5px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 1px;
background: var(--mfl-or-vieilli, #B89A68);
opacity: 0.5;
}
.mfl-footer-bottom .mfl-footer-container {
display: block !important;
text-align: center;
max-width: 1000px;
padding: 0 2rem;
}
.mfl-footer-bottom p {
margin: 0.7rem auto;
line-height: 1.8;
max-width: 100%;
}
.mfl-footer-legal-main {
font-size: 0.82rem;
font-style: italic;
letter-spacing: 0.06em;
color: rgba(228, 208, 168, 0.82);
margin-bottom: 1rem !important;
}
.mfl-footer-legal-sub {
font-size: 0.78rem;
font-style: italic;
letter-spacing: 0.04em;
color: rgba(228, 208, 168, 0.7);
margin-bottom: 1.75rem !important;
}
.mfl-footer-bod,
.mfl-footer-engagement {
font-size: 0.72rem;
font-style: italic;
letter-spacing: 0.035em;
color: rgba(228, 208, 168, 0.55);
max-width: 820px;
line-height: 1.85;
margin: 0.6rem auto !important;
}
.mfl-footer-engagement {
margin-top: 1.25rem !important;
}
/* Responsive footer */
@media (max-width: 900px) {
.mfl-footer-container {
grid-template-columns: repeat(2, 1fr);
gap: 3rem 2rem;
}
.mfl-footer-bottom .mfl-footer-container {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.mfl-footer-container {
grid-template-columns: 1fr;
padding: 0 1.5rem;
gap: 2.5rem;
}
.mfl-nm-manifeste,
.mfl-nm-direction {
padding: 7rem 1.25rem;
}
.mfl-nm-couture-ornement {
width: 48px;
height: 48px;
margin-bottom: 2rem;
}
.mfl-nm-couture-monogramme {
font-size: 0.95rem;
width: 76px;
margin-top: 3rem;
}
.mfl-footer-bottom {
padding: 2.5rem 0 3rem;
}
}
/* RESPONSIVE ÉDITIONS */
@media (max-width: 900px) {
.mfl-edition-hero {
padding: 5rem 1.25rem 4rem;
}
.mfl-edition-hero-container {
grid-template-columns: 1fr;
gap: 3rem;
text-align: center;
}
.mfl-edition-hero-cover img {
max-width: 280px;
}
.mfl-edition-hero-baseline {
margin-left: auto;
margin-right: auto;
}
.mfl-edition-hero-meta {
justify-content: center;
}
.mfl-edition-manifeste,
.mfl-edition-sommaire,
.mfl-edition-pour-qui,
.mfl-edition-acquisition,
.mfl-edition-maillage {
padding: 4rem 1.25rem;
}
.mfl-edition-chapitres li {
grid-template-columns: 40px 1fr;
gap: 1rem;
padding: 1.5rem 0;
}
.mfl-edition-num {
font-size: 1.4rem;
}
.mfl-edition-maillage-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
}
/* ====== ANIMATIONS ====== */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.mfl-fade-in {
animation: fadeInUp 0.8s ease forwards;
}
/* ====== RESPONSIVE ====== */
@media (max-width: 900px) {
.mfl-nav { display: none; }
.mfl-nav-open {
display: flex !important;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--mfl-ivoire);
border-bottom: 1px solid var(--mfl-or);
padding: 1.5rem 2rem;
}
.mfl-burger { display: block; }
.mfl-hero { padding: 5rem 0 4rem; }
.mfl-section { padding: 4rem 0; }
.mfl-newsletter-form { flex-direction: column; }
}
@media (max-width: 600px) {
.mfl-container, .mfl-container-narrow { padding: 0 1.5rem; }
.mfl-btn-group { flex-direction: column; }
.mfl-cta-or, .mfl-cta-outline { width: 100%; text-align: center; }
}
/* ====== HERO SLIDER · NIVEAU APPLE / DIOR ====== */
.mfl-hero-slider {
position: relative;
min-height: 100vh;
overflow: hidden;
background: #0a0204;
}
.mfl-hero-slide {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
opacity: 0;
/* Transitions fluides synchronisées · fade 2.5s + zoom Ken Burns 12s */
transition:
opacity 2.5s cubic-bezier(0.4, 0, 0.2, 1),
transform 12s linear;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
transform: scale(1.08);
pointer-events: none;
will-change: opacity, transform;
}
.mfl-hero-slide.active {
opacity: 1;
z-index: 2;
transform: scale(1.15);
pointer-events: auto;
}
/* Contenu interne · fade-in décalé pour entrée plus naturelle */
.mfl-hero-slide-content {
opacity: 0;
transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
}
.mfl-hero-slide.active .mfl-hero-slide-content {
opacity: 1;
}
/* Vignette dramatique · sombre sur les bords, clair au centre */
.mfl-hero-slide::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background:
radial-gradient(ellipse at 50% 45%, rgba(74, 15, 26, 0.35) 0%, rgba(44, 8, 16, 0.65) 40%, rgba(10, 2, 4, 0.92) 100%);
z-index: 1;
}
/* Halo doré central · effet projecteur Dior */
.mfl-hero-slide::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(201, 160, 80, 0.18) 0%, rgba(201, 160, 80, 0.08) 25%, transparent 60%);
z-index: 1;
pointer-events: none;
animation: heroHaloShimmer 8s ease-in-out infinite;
}
@keyframes heroHaloShimmer {
0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
/* Particules dorées flottantes */
.mfl-hero-slider .mfl-hero-particles {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 2;
pointer-events: none;
background-image:
radial-gradient(2px 2px at 20% 30%, rgba(227, 196, 126, 0.6), transparent),
radial-gradient(1px 1px at 60% 70%, rgba(201, 160, 80, 0.4), transparent),
radial-gradient(1.5px 1.5px at 80% 20%, rgba(227, 196, 126, 0.5), transparent),
radial-gradient(1px 1px at 30% 80%, rgba(201, 160, 80, 0.3), transparent),
radial-gradient(2px 2px at 70% 40%, rgba(227, 196, 126, 0.4), transparent),
radial-gradient(1px 1px at 10% 60%, rgba(201, 160, 80, 0.5), transparent),
radial-gradient(1.5px 1.5px at 90% 80%, rgba(227, 196, 126, 0.3), transparent);
background-size: 100% 100%;
animation: particlesFloat 20s ease-in-out infinite;
}
@keyframes particlesFloat {
0%, 100% { transform: translateY(0); opacity: 0.6; }
50% { transform: translateY(-20px); opacity: 1; }
}
.mfl-hero-slide-content {
position: relative;
z-index: 3;
text-align: center;
color: var(--mfl-or);
max-width: 900px;
padding: 3rem 0;
}
/* Filet or animé sous l'eyebrow */
.mfl-hero-slide-content::before {
content: '';
display: block;
width: 60px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--mfl-or), transparent);
margin: 0 auto 2rem;
animation: filetGlow 4s ease-in-out infinite;
}
@keyframes filetGlow {
0%, 100% { opacity: 0.6; width: 60px; }
50% { opacity: 1; width: 120px; box-shadow: 0 0 20px rgba(201, 160, 80, 0.6); }
}
.mfl-hero-slide-content {
position: relative;
z-index: 2;
text-align: center;
color: var(--mfl-or);
max-width: 900px;
}
.mfl-hero-slide-eyebrow {
font-family: var(--mfl-font-mention);
font-size: 0.78rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--mfl-or-clair);
margin-bottom: 1.5rem;
display: inline-block;
}
.mfl-hero-slide h1,
.mfl-hero-slide-titre {
font-family: var(--mfl-font-titre);
font-size: clamp(3rem, 7.5vw, 6rem);
font-weight: 300;
color: var(--mfl-or);
background: linear-gradient(135deg, var(--mfl-or-clair) 0%, var(--mfl-or) 30%, #fff5e1 50%, var(--mfl-or) 70%, var(--mfl-or-clair) 100%);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow:
0 0 60px rgba(201, 160, 80, 0.4),
0 0 100px rgba(201, 160, 80, 0.2);
line-height: 1.05;
margin: 1.5rem 0;
letter-spacing: 0.02em;
animation: heroTitleShimmer 8s ease-in-out infinite;
}
@keyframes heroTitleShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.mfl-hero-slide h1 em,
.mfl-hero-slide-titre em {
font-family: var(--mfl-font-corps);
font-style: italic;
font-weight: 400;
}
.mfl-hero-slide p {
font-family: var(--mfl-font-corps);
font-size: clamp(1.1rem, 1.5vw, 1.35rem);
color: var(--mfl-champagne);
line-height: 1.8;
margin: 2rem auto;
max-width: 650px;
font-weight: 300;
letter-spacing: 0.01em;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
.mfl-hero-slide-eyebrow {
font-family: var(--mfl-font-mention);
font-size: 0.8rem;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--mfl-or-clair);
margin-bottom: 1.5rem;
display: inline-block;
text-shadow: 0 0 30px rgba(227, 196, 126, 0.5);
}
.mfl-hero-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(201, 160, 80, 0.15);
border: 1px solid var(--mfl-or);
color: var(--mfl-or);
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: var(--mfl-transition);
backdrop-filter: blur(10px);
}
.mfl-hero-arrow:hover { background: var(--mfl-or); color: var(--mfl-bordeaux); }
.mfl-hero-arrow.prev { left: 2rem; }
.mfl-hero-arrow.next { right: 2rem; }
.mfl-hero-nav {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.8rem;
z-index: 10;
}
.mfl-hero-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(201, 160, 80, 0.4);
border: 1px solid var(--mfl-or);
cursor: pointer;
transition: var(--mfl-transition);
}
.mfl-hero-dot.active { background: var(--mfl-or); transform: scale(1.3); }
/* ====== PROCESS 4 ÉTAPES ====== */
.mfl-process {
background: var(--mfl-ivoire);
padding: 6rem 0;
}
.mfl-process-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2rem;
margin-top: 4rem;
position: relative;
}
.mfl-process-step {
text-align: center;
position: relative;
padding: 2.5rem 1.5rem;
background: linear-gradient(180deg, #ffffff 0%, #fdf9f0 100%);
border: 2px solid #8b1538;
border-radius: 8px;
transition: var(--mfl-transition);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.8) inset,
0 -2px 0 rgba(139, 21, 56, 0.15) inset,
0 6px 0 -2px #6b0f28,
0 10px 30px rgba(139, 21, 56, 0.2),
0 2px 8px rgba(139, 21, 56, 0.1);
}
.mfl-process-step:hover {
transform: translateY(-6px);
border-color: var(--mfl-or);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 -2px 0 rgba(201, 160, 80, 0.2) inset,
0 8px 0 -2px var(--mfl-or-vif),
0 16px 40px rgba(139, 21, 56, 0.25),
0 4px 12px rgba(201, 160, 80, 0.15);
}
.mfl-process-num {
font-family: var(--mfl-font-titre);
font-size: 5rem;
font-weight: 300;
color: var(--mfl-or);
line-height: 1;
background: linear-gradient(135deg, var(--mfl-or) 0%, var(--mfl-or-clair) 50%, var(--mfl-or) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 1rem;
}
.mfl-process-step h3 {
font-family: var(--mfl-font-titre);
color: var(--mfl-bordeaux);
font-size: 1.4rem;
margin-bottom: 1rem;
font-weight: 400;
}
.mfl-process-step p {
font-family: var(--mfl-font-corps);
color: var(--mfl-noir-doux);
font-size: 1rem;
line-height: 1.7;
}
/* ====== FAQ ACCORDÉON ====== */
.mfl-faq {
background: var(--mfl-ivoire);
padding: 6rem 0;
}
.mfl-faq-list {
max-width: 800px;
margin: 3rem auto 0;
}
.mfl-faq-item {
background: white;
border: 1px solid rgba(201, 160, 80, 0.3);
border-radius: 4px;
margin-bottom: 1rem;
overflow: hidden;
transition: var(--mfl-transition);
}
.mfl-faq-item.open { border-color: var(--mfl-or); box-shadow: 0 4px 20px rgba(201, 160, 80, 0.15); }
.mfl-faq-question {
width: 100%;
background: none;
border: none;
padding: 1.5rem 2rem;
font-family: var(--mfl-font-titre);
color: var(--mfl-bordeaux);
font-size: 1.15rem;
font-weight: 400;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: var(--mfl-transition);
}
.mfl-faq-question::after {
content: '+';
color: var(--mfl-or);
font-size: 1.5rem;
transition: transform 0.3s ease;
}
.mfl-faq-item.open .mfl-faq-question::after { transform: rotate(45deg); }
.mfl-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
padding: 0 2rem;
}
.mfl-faq-item.open .mfl-faq-answer { max-height: 600px; padding: 0 2rem 1.5rem; }
.mfl-faq-answer p {
font-family: var(--mfl-font-corps);
color: var(--mfl-noir-doux);
line-height: 1.8;
margin-bottom: 1rem;
}
/* ============================================================
ENGAGEMENT SCIENTIFIQUE · ORIZON · hiérarchie 1+2 + transparence
============================================================ */
.mfl-engagement-section {
background: var(--mfl-ivoire);
padding: 8rem 2rem 5rem;
position: relative;
overflow: hidden;
}
.mfl-engagement-section::before {
content: '';
position: absolute;
top: 5rem;
left: 50%;
transform: translateX(-50%);
width: 700px;
height: 350px;
background: radial-gradient(ellipse, rgba(232, 196, 124, 0.07) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
animation: section2HaloBreathe 16s ease-in-out infinite;
}
.mfl-engagement-header {
text-align: center;
max-width: 720px;
margin: 0 auto 5rem;
position: relative;
z-index: 1;
}
.mfl-engagement-eyebrow {
display: block;
font-size: 0.78rem;
letter-spacing: 0.46em;
color: var(--mfl-or);
font-weight: 600;
margin-bottom: 1.8rem;
}
.mfl-engagement-title {
font-family: var(--mfl-font-titre);
font-size: clamp(2.2rem, 4.2vw, 3.4rem);
font-weight: 300;
color: var(--mfl-bordeaux);
line-height: 1.2;
margin: 0 0 1.5rem;
}
.mfl-engagement-title em {
font-style: italic;
color: var(--mfl-or);
font-family: var(--mfl-font-titre);
}
.mfl-engagement-sous-titre {
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: clamp(1.1rem, 1.5vw, 1.3rem);
color: var(--mfl-bordeaux);
opacity: 0.85;
font-weight: 300;
margin: 0 0 1.4rem;
}
.mfl-engagement-intro {
font-family: var(--mfl-font-corps);
font-size: clamp(1rem, 1.2vw, 1.1rem);
color: var(--mfl-bordeaux);
opacity: 0.78;
line-height: 1.75;
max-width: 580px;
margin: 0 auto;
font-weight: 300;
}
.mfl-engagement-intro em {
color: var(--mfl-or);
font-style: italic;
}
/* Grid hiérarchique · 1 carte majeure + 2 secondaires */
.mfl-engagement-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 2.5rem;
max-width: 1280px;
margin: 0 auto 5rem;
align-items: stretch;
position: relative;
z-index: 1;
}
.mfl-engagement-carte {
background: linear-gradient(180deg, #fdfaf3 0%, var(--mfl-ivoire) 100%);
border: 1px solid rgba(201, 160, 80, 0.42);
border-radius: 4px;
padding: 2.5rem 2rem;
display: flex;
flex-direction: column;
position: relative;
transition: var(--mfl-transition);
box-shadow:
0 24px 60px rgba(74, 15, 26, 0.10),
0 10px 24px rgba(74, 15, 26, 0.06),
inset 0 0 0 4px rgba(201, 160, 80, 0.04);
}
.mfl-engagement-carte:hover {
transform: translateY(-6px);
box-shadow:
0 32px 80px rgba(74, 15, 26, 0.16),
0 14px 32px rgba(74, 15, 26, 0.08),
inset 0 0 0 4px rgba(201, 160, 80, 0.08);
border-color: rgba(201, 160, 80, 0.62);
}
/* Ornements or aux 2 coins (haut-gauche + bas-droit) · marquage couture signature */
.mfl-engagement-carte::before,
.mfl-engagement-carte::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
border: 1px solid var(--mfl-or);
opacity: 0.5;
pointer-events: none;
transition: var(--mfl-transition);
}
.mfl-engagement-carte::before {
top: 10px;
left: 10px;
border-right: none;
border-bottom: none;
}
.mfl-engagement-carte::after {
bottom: 10px;
right: 10px;
border-left: none;
border-top: none;
}
.mfl-engagement-carte:hover::before,
.mfl-engagement-carte:hover::after {
opacity: 0.85;
width: 20px;
height: 20px;
}
/* Carte majeure SLIMTH · ornements plus marqués + halo or interne renforcé */
.mfl-engagement-carte-majeure::before,
.mfl-engagement-carte-majeure::after {
width: 20px;
height: 20px;
opacity: 0.65;
}
.mfl-engagement-carte-majeure:hover::before,
.mfl-engagement-carte-majeure:hover::after {
opacity: 1;
width: 24px;
height: 24px;
}
/* Carte majeure · SLIMTH · plus lumineuse */
.mfl-engagement-carte-majeure {
background:
radial-gradient(ellipse at 50% 0%, rgba(232, 196, 124, 0.16) 0%, transparent 60%),
linear-gradient(180deg, #fdfaf3 0%, var(--mfl-ivoire) 100%);
border-color: rgba(201, 160, 80, 0.42);
box-shadow:
0 24px 60px rgba(74, 15, 26, 0.10),
0 8px 24px rgba(201, 160, 80, 0.12);
padding: 3rem 2.2rem;
}
.mfl-engagement-categorie {
font-family: var(--mfl-font-mention);
font-size: 0.65rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--mfl-or);
font-weight: 600;
margin-bottom: 1.5rem;
display: block;
}
.mfl-engagement-carte-titre {
font-family: var(--mfl-font-titre);
font-size: clamp(1.3rem, 1.9vw, 1.65rem);
font-weight: 300;
color: var(--mfl-bordeaux);
line-height: 1.3;
margin: 0 0 1.4rem;
}
.mfl-engagement-carte-majeure .mfl-engagement-carte-titre {
font-size: clamp(1.5rem, 2.2vw, 1.9rem);
}
.mfl-engagement-carte-titre em {
font-style: italic;
color: var(--mfl-or);
}
.mfl-engagement-carte-texte {
font-family: var(--mfl-font-corps);
font-size: 0.98rem;
line-height: 1.7;
color: var(--mfl-bordeaux);
opacity: 0.82;
font-weight: 300;
margin: 0 0 1.8rem;
flex: 1;
}
/* ===== GOUTTES MAISON · visualisation puissance/synergie · contour couture ===== */
.mfl-gouttes {
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 2rem;
padding: 1rem 1.2rem;
min-height: 78px;
box-sizing: border-box;
background:
linear-gradient(135deg, rgba(252, 246, 234, 0.5) 0%, rgba(232, 196, 124, 0.06) 100%);
border: 1.5px solid rgba(111, 26, 45, 0.55);
border-radius: 2px;
position: relative;
box-shadow:
inset 0 0 0 1px rgba(232, 196, 124, 0.25),
0 3px 10px rgba(74, 15, 26, 0.08);
}
/* Ornements coins or sur les gouttes · marquage signature */
.mfl-gouttes::before,
.mfl-gouttes::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
border: 1px solid var(--mfl-or);
opacity: 0.7;
pointer-events: none;
}
.mfl-gouttes::before {
top: 4px;
left: 4px;
border-right: none;
border-bottom: none;
}
.mfl-gouttes::after {
bottom: 4px;
right: 4px;
border-left: none;
border-top: none;
}
.mfl-goutte {
width: 18px;
height: 22px;
position: relative;
display: inline-block;
margin-right: 0.2rem;
}
/* Vraie forme de goutte d'eau · POINTE EN HAUT, ronde en bas
Technique : border-radius 50% sur 3 coins + 0 sur le coin haut-droit + rotation -45° */
.mfl-goutte::before {
content: '';
position: absolute;
width: 13px;
height: 13px;
background: var(--mfl-or);
border-radius: 50% 0 50% 50%;
transform: rotate(-45deg);
top: 4px;
left: 2px;
box-shadow: inset 1px -1px 2px rgba(255, 245, 225, 0.4);
}
/* Goutte contour · vide (puissance restante) */
.mfl-goutte-contour::before {
background: transparent;
border: 1.5px solid var(--mfl-or);
opacity: 0.42;
box-shadow: none;
}
/* Goutte demie · moitié pleine (verticalement coupée car la goutte est tournée) */
.mfl-goutte-demie::before {
background: linear-gradient(45deg, var(--mfl-or) 50%, transparent 50%);
}
.mfl-gouttes-legende {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.78rem;
color: var(--mfl-or);
margin-left: 0.6rem;
letter-spacing: 0.02em;
opacity: 0.88;
}
/* Maillage SEO sous chaque carte · encart unifié bordeaux lumineux */
.mfl-engagement-maillage {
list-style: none;
padding: 1.1rem 1.2rem;
margin: auto 0 0;
background:
linear-gradient(135deg, rgba(252, 246, 234, 0.5) 0%, rgba(232, 196, 124, 0.06) 100%);
border: 1.5px solid rgba(111, 26, 45, 0.55);
border-radius: 2px;
position: relative;
box-shadow:
inset 0 0 0 1px rgba(232, 196, 124, 0.25),
0 3px 10px rgba(74, 15, 26, 0.08);
}
/* Ornements coins or sur le maillage */
.mfl-engagement-maillage::before,
.mfl-engagement-maillage::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
border: 1px solid var(--mfl-or);
opacity: 0.7;
pointer-events: none;
}
.mfl-engagement-maillage::before {
top: 4px;
left: 4px;
border-right: none;
border-bottom: none;
}
.mfl-engagement-maillage::after {
bottom: 4px;
right: 4px;
border-left: none;
border-top: none;
}
.mfl-engagement-maillage li {
margin: 0.4rem 0;
}
.mfl-engagement-maillage a {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.92rem;
color: var(--mfl-bordeaux);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: var(--mfl-transition);
opacity: 0.88;
}
.mfl-engagement-maillage a:hover {
color: var(--mfl-or);
border-bottom-color: var(--mfl-or);
}
.mfl-engagement-maillage li:first-child a {
color: var(--mfl-or);
font-weight: 500;
}
/* ===== BLOC TRANSPARENCE MAISON · contour couture bordeaux lumineux ===== */
.mfl-engagement-transparence {
text-align: center;
max-width: 760px;
margin: 4rem auto;
padding: 3.2rem 2.4rem;
background:
linear-gradient(135deg, rgba(252, 246, 234, 0.6) 0%, rgba(232, 196, 124, 0.08) 100%);
border: 1.5px solid rgba(111, 26, 45, 0.6);
border-radius: 3px;
position: relative;
z-index: 1;
box-shadow:
inset 0 0 0 1px rgba(232, 196, 124, 0.3),
0 14px 36px rgba(74, 15, 26, 0.10);
}
/* Ornements coins or sur Notre Position · plus marqués (statement block) */
.mfl-engagement-transparence::before,
.mfl-engagement-transparence::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
border: 1px solid var(--mfl-or);
opacity: 0.75;
pointer-events: none;
}
.mfl-engagement-transparence::before {
top: 10px;
left: 10px;
border-right: none;
border-bottom: none;
}
.mfl-engagement-transparence::after {
bottom: 10px;
right: 10px;
border-left: none;
border-top: none;
}
.mfl-engagement-transparence-titre {
display: block;
font-family: var(--mfl-font-mention);
font-size: 0.74rem;
letter-spacing: 0.46em;
text-transform: uppercase;
color: var(--mfl-or);
font-weight: 600;
margin-bottom: 1.5rem;
}
.mfl-engagement-transparence-texte {
font-family: var(--mfl-font-titre);
font-size: clamp(1.3rem, 2vw, 1.6rem);
font-weight: 300;
color: var(--mfl-bordeaux);
line-height: 1.4;
margin: 0 0 1.4rem;
font-style: italic;
}
.mfl-engagement-transparence-texte em {
color: var(--mfl-or);
font-style: italic;
}
.mfl-engagement-transparence-sub {
font-family: var(--mfl-font-corps);
font-size: 0.95rem;
color: var(--mfl-bordeaux);
opacity: 0.72;
line-height: 1.7;
margin: 0;
font-weight: 300;
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
/* ===== CTA BIBLIOTHÈQUE SCIENTIFIQUE ===== */
.mfl-engagement-cta-bloc {
text-align: center;
position: relative;
z-index: 1;
}
.mfl-engagement-cta {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--mfl-font-mention);
font-size: 0.82rem;
letter-spacing: 0.38em;
text-transform: uppercase;
color: var(--mfl-bordeaux);
background: transparent;
padding: 1.3rem 2.6rem;
border: 1px solid var(--mfl-or);
text-decoration: none;
transition: var(--mfl-transition);
font-weight: 600;
}
.mfl-engagement-cta:hover {
background: var(--mfl-or);
color: var(--mfl-ivoire);
transform: translateY(-2px);
}
.mfl-engagement-cta-sub {
display: block;
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.82rem;
color: var(--mfl-or);
opacity: 0.75;
margin-top: 1.2rem;
letter-spacing: 0.02em;
}
/* ===== NOTE DE SILLEA · présence éditoriale Maison · BORDEAUX VELOURS ===== */
.mfl-note-sillea-section {
background:
radial-gradient(ellipse at 30% 50%, rgba(201, 160, 80, 0.08) 0%, transparent 60%),
linear-gradient(135deg, var(--mfl-bordeaux-fonce) 0%, var(--mfl-bordeaux) 100%);
padding: 6rem 2rem 7rem;
position: relative;
color: var(--mfl-champagne);
overflow: hidden;
}
.mfl-note-sillea-section::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 700px;
height: 400px;
background: radial-gradient(ellipse, rgba(232, 196, 124, 0.10) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
animation: section2HaloBreathe 16s ease-in-out infinite;
}
.mfl-note-sillea-bloc {
display: grid;
grid-template-columns: 220px 1fr;
gap: 4rem;
align-items: center;
max-width: 920px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 1;
}
.mfl-note-sillea-portrait {
width: 220px;
height: 220px;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(135deg, var(--mfl-bordeaux-fonce), var(--mfl-bordeaux));
position: relative;
box-shadow:
0 30px 70px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(201, 160, 80, 0.5),
0 0 0 6px rgba(232, 196, 124, 0.08);
}
.mfl-note-sillea-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Placeholder élégant si l'image n'est pas encore là */
.mfl-note-sillea-placeholder::after {
content: '✦';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--mfl-or);
font-size: 2.4rem;
opacity: 0.7;
}
.mfl-note-sillea-texte {
position: relative;
}
.mfl-note-sillea-label {
font-family: var(--mfl-font-mention);
font-size: 0.74rem;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--mfl-or);
font-weight: 600;
display: block;
margin-bottom: 1.8rem;
}
.mfl-note-sillea-citation {
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: clamp(1.4rem, 2.4vw, 1.95rem);
font-weight: 300;
color: var(--mfl-or-clair);
line-height: 1.5;
margin: 0 0 1.8rem;
padding-left: 1.4rem;
border-left: 2px solid rgba(232, 196, 124, 0.55);
}
.mfl-note-sillea-citation em {
font-style: italic;
color: var(--mfl-or);
font-weight: 400;
}
.mfl-note-sillea-signature {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.95rem;
color: var(--mfl-or);
letter-spacing: 0.06em;
display: block;
padding-left: 1.4rem;
opacity: 0.92;
}
/* ===== FAQ ENGAGEMENT ===== */
.mfl-engagement-faq-section {
background: var(--mfl-ivoire);
padding: 5rem 2rem 7rem;
}
.mfl-engagement-faq-header {
text-align: center;
margin-bottom: 4rem;
}
.mfl-engagement-faq-titre {
font-family: var(--mfl-font-titre);
font-size: clamp(1.8rem, 3.4vw, 2.5rem);
font-weight: 300;
color: var(--mfl-bordeaux);
line-height: 1.25;
margin: 1.4rem 0 0;
}
.mfl-engagement-faq-titre em {
font-style: italic;
color: var(--mfl-or);
}
/* ===== RESPONSIVE ENGAGEMENT ===== */
@media (max-width: 1100px) {
.mfl-engagement-grid {
grid-template-columns: 1fr;
max-width: 580px;
gap: 2.5rem;
}
.mfl-engagement-carte-majeure {
order: -1;
}
.mfl-note-sillea-bloc {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
}
.mfl-note-sillea-portrait {
margin: 0 auto;
}
.mfl-note-sillea-citation {
border-left: none;
border-top: 2px solid rgba(201, 160, 80, 0.4);
padding-left: 0;
padding-top: 1.4rem;
}
.mfl-note-sillea-signature {
padding-left: 0;
}
}
@media (max-width: 600px) {
.mfl-engagement-section {
padding: 5rem 1.5rem 4rem;
}
.mfl-engagement-carte {
padding: 2rem 1.5rem;
}
}
/* ============================================================
PAGE PILIER · LA MÉTHODE MAISON
============================================================ */
.mfl-methode-hero {
position: relative;
overflow: hidden;
}
.mfl-methode-hero::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 500px;
background: radial-gradient(ellipse, rgba(232, 196, 124, 0.10) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
animation: section2HaloBreathe 14s ease-in-out infinite;
}
.mfl-methode-hero > * { position: relative; z-index: 1; }
.mfl-methode-section {
position: relative;
}
.mfl-methode-section-bordeaux {
background: linear-gradient(135deg, var(--mfl-bordeaux-fonce) 0%, var(--mfl-bordeaux) 100%);
color: var(--mfl-champagne);
position: relative;
}
.mfl-methode-bloc {
margin-bottom: 2.5rem;
}
.mfl-methode-h2 {
font-family: var(--mfl-font-titre);
font-size: clamp(1.8rem, 3.4vw, 2.6rem);
font-weight: 300;
color: var(--mfl-bordeaux);
line-height: 1.25;
margin: 1.4rem 0 2rem;
letter-spacing: 0.005em;
}
.mfl-methode-h2 em {
font-style: italic;
color: var(--mfl-or);
font-family: var(--mfl-font-titre);
}
.mfl-methode-paragraphe {
font-family: var(--mfl-font-corps);
font-size: 1.08rem;
line-height: 1.85;
color: var(--mfl-bordeaux);
margin-bottom: 1.6rem;
font-weight: 300;
opacity: 0.92;
}
.mfl-methode-paragraphe strong {
color: var(--mfl-bordeaux);
font-weight: 600;
}
.mfl-methode-paragraphe a {
color: var(--mfl-or);
text-decoration: none;
border-bottom: 1px solid rgba(201, 160, 80, 0.4);
transition: var(--mfl-transition);
font-weight: 500;
}
.mfl-methode-paragraphe a:hover {
color: var(--mfl-bordeaux);
border-bottom-color: var(--mfl-bordeaux);
}
/* 4 raisons · grille 2x2 */
.mfl-methode-raisons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
margin-top: 4rem;
}
.mfl-methode-raison {
background: linear-gradient(180deg, #fdfaf3 0%, var(--mfl-ivoire) 100%);
border: 1px solid rgba(201, 160, 80, 0.22);
border-radius: 4px;
padding: 2.5rem 2rem;
position: relative;
transition: var(--mfl-transition);
}
.mfl-methode-raison:hover {
transform: translateY(-4px);
box-shadow: 0 18px 48px rgba(74, 15, 26, 0.08);
border-color: rgba(201, 160, 80, 0.42);
}
.mfl-methode-raison-num {
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: 1.4rem;
font-weight: 300;
color: var(--mfl-or);
opacity: 0.7;
letter-spacing: 0.08em;
display: block;
margin-bottom: 1rem;
}
.mfl-methode-raison-titre {
font-family: var(--mfl-font-titre);
font-size: 1.3rem;
font-weight: 400;
color: var(--mfl-bordeaux);
margin: 0 0 1rem;
line-height: 1.3;
}
.mfl-methode-raison-texte {
font-family: var(--mfl-font-corps);
font-size: 0.98rem;
line-height: 1.65;
color: var(--mfl-bordeaux);
opacity: 0.85;
font-weight: 300;
margin: 0;
}
/* 4 piliers de la méthode */
.mfl-methode-piliers {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
text-align: center;
margin-top: 3rem;
}
.mfl-methode-pilier {
padding: 1.5rem 1rem;
position: relative;
}
.mfl-methode-pilier:not(:last-child)::after {
content: '';
position: absolute;
right: -1rem;
top: 20%;
height: 60%;
width: 1px;
background: linear-gradient(180deg,
transparent, rgba(201, 160, 80, 0.35), transparent);
}
.mfl-methode-pilier-num {
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: 1.6rem;
color: var(--mfl-or);
opacity: 0.7;
display: block;
margin-bottom: 1rem;
letter-spacing: 0.08em;
}
.mfl-methode-pilier-titre {
font-family: var(--mfl-font-titre);
font-size: 1.2rem;
font-weight: 400;
color: var(--mfl-bordeaux);
margin: 0 0 1rem;
}
.mfl-methode-pilier-texte {
font-family: var(--mfl-font-corps);
font-size: 0.92rem;
line-height: 1.6;
color: var(--mfl-bordeaux);
opacity: 0.85;
font-weight: 300;
margin: 0;
}
.mfl-methode-pilier-texte a {
color: var(--mfl-or);
text-decoration: none;
border-bottom: 1px solid rgba(201, 160, 80, 0.4);
transition: var(--mfl-transition);
}
.mfl-methode-pilier-texte a:hover {
color: var(--mfl-bordeaux);
border-bottom-color: var(--mfl-bordeaux);
}
@media (max-width: 968px) {
.mfl-methode-raisons {
grid-template-columns: 1fr;
}
.mfl-methode-piliers {
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem 1.5rem;
}
.mfl-methode-pilier:not(:last-child)::after {
display: none;
}
}
@media (max-width: 600px) {
.mfl-methode-piliers {
grid-template-columns: 1fr;
}
}
/* ====== QUIZ DIAGNOSTIC · ORIZON OPTIMAL ====== */
.mfl-quiz-section {
background: linear-gradient(135deg, var(--mfl-bordeaux-fonce) 0%, var(--mfl-bordeaux) 100%);
padding: 6rem 0;
color: var(--mfl-champagne);
position: relative;
}
/* Titre émotionnel du quiz · Où commence votre transformation ? */
.mfl-quiz-titre-grand {
font-size: clamp(2.2rem, 4.2vw, 3.4rem) !important;
margin: 1.2rem 0 1.5rem;
line-height: 1.2;
}
.mfl-quiz-titre-grand em {
font-style: italic;
color: var(--mfl-or);
font-family: var(--mfl-font-titre);
}
/* Baseline émotionnelle */
.mfl-quiz-baseline {
font-style: italic;
font-size: clamp(1rem, 1.25vw, 1.15rem);
line-height: 1.7;
margin-bottom: 1.4rem;
font-weight: 300;
}
.mfl-quiz-baseline em {
font-style: italic;
color: var(--mfl-or);
}
/* Mention privilège · Réservé aux futurs membres Maison */
.mfl-quiz-privilege {
display: inline-block;
font-family: var(--mfl-font-mention);
font-size: 0.66rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--mfl-or);
opacity: 0.85;
font-weight: 600;
padding: 0.5rem 1.2rem;
border-top: 1px solid rgba(201, 160, 80, 0.4);
border-bottom: 1px solid rgba(201, 160, 80, 0.4);
margin-top: 0.5rem;
}
/* ===== TRAJECTOIRE SOUS LE QUIZ · projection émotionnelle ===== */
.mfl-quiz-trajectoire {
max-width: 720px;
margin: 4rem auto 0;
text-align: center;
padding-top: 3rem;
border-top: 1px solid rgba(201, 160, 80, 0.25);
}
.mfl-quiz-trajectoire-intro {
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: clamp(1rem, 1.3vw, 1.2rem);
color: var(--mfl-champagne);
font-weight: 300;
line-height: 1.6;
margin: 0 0 2.5rem;
opacity: 0.92;
}
.mfl-quiz-trajectoire-intro em {
color: var(--mfl-or);
font-style: italic;
}
.mfl-quiz-trajectoire-liste {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
}
.mfl-quiz-trajectoire-liste li {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1.4rem;
max-width: 540px;
width: 100%;
}
.mfl-quiz-trajectoire-nom {
font-family: var(--mfl-font-titre);
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
color: var(--mfl-or-clair);
font-weight: 300;
letter-spacing: 0.02em;
text-align: right;
}
.mfl-quiz-trajectoire-nom sup {
font-size: 0.4em;
vertical-align: super;
color: var(--mfl-or);
letter-spacing: 0.08em;
margin-left: 0.05em;
}
.mfl-quiz-trajectoire-fleche {
color: var(--mfl-or);
font-size: 1.1rem;
opacity: 0.7;
}
.mfl-quiz-trajectoire-emotion {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: clamp(0.92rem, 1.15vw, 1.05rem);
color: var(--mfl-champagne);
opacity: 0.9;
text-align: left;
font-weight: 300;
}
.mfl-quiz {
background: var(--mfl-ivoire);
padding: 3rem;
border-radius: 4px;
max-width: 700px;
margin: 3rem auto 0;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.mfl-quiz-progress {
text-align: center;
margin-bottom: 2rem;
}
.mfl-quiz-progress span {
font-family: var(--mfl-font-mention);
font-size: 0.78rem;
letter-spacing: 0.3em;
color: var(--mfl-or);
text-transform: uppercase;
margin-bottom: 1rem;
display: block;
}
.mfl-quiz-progress-bar {
height: 4px;
background: rgba(201, 160, 80, 0.2);
border-radius: 2px;
overflow: hidden;
}
.mfl-quiz-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--mfl-or), var(--mfl-or-clair));
transition: width 0.5s ease;
}
.mfl-quiz-question {
font-family: var(--mfl-font-titre);
color: var(--mfl-bordeaux);
font-size: 1.6rem;
font-weight: 400;
text-align: center;
margin: 2rem 0;
line-height: 1.4;
}
.mfl-quiz-options {
display: flex;
flex-direction: column;
gap: 1rem;
}
.mfl-quiz-option {
background: white;
border: 1px solid rgba(201, 160, 80, 0.4);
padding: 1.2rem 1.5rem;
font-family: var(--mfl-font-corps);
font-size: 1rem;
color: var(--mfl-bordeaux);
text-align: left;
cursor: pointer;
transition: var(--mfl-transition);
border-radius: 4px;
}
.mfl-quiz-option:hover {
background: var(--mfl-champagne);
border-color: var(--mfl-or);
transform: translateX(4px);
}
.mfl-quiz-result {
text-align: center;
}
.mfl-quiz-result-title {
font-family: var(--mfl-font-titre);
color: var(--mfl-bordeaux);
font-size: 1.3rem;
margin: 1rem 0;
font-weight: 400;
}
.mfl-quiz-result-product {
font-family: var(--mfl-font-titre);
color: var(--mfl-or);
font-size: 1.8rem;
font-weight: 400;
margin: 1.5rem 0;
font-style: italic;
}
.mfl-quiz-result-text {
font-family: var(--mfl-font-corps);
line-height: 1.7;
margin-bottom: 2rem;
}
/* ============================================================
FAQ TEASER · ÉLÉVATION ORIZON · halo + éditorial + accordéon couture
============================================================ */
/* Halo champagne très subtil derrière le titre · vivant */
.mfl-faq-teaser-halo {
position: absolute;
top: 4rem;
left: 50%;
transform: translateX(-50%);
width: 720px;
height: 360px;
background:
radial-gradient(ellipse at center, rgba(232, 196, 124, 0.18) 0%, rgba(232, 196, 124, 0.06) 35%, transparent 70%);
pointer-events: none;
z-index: 0;
animation: faqTeaserHalo 12s ease-in-out infinite;
border-radius: 50%;
}
@keyframes faqTeaserHalo {
0%, 100% {
opacity: 0.65;
transform: translateX(-50%) scale(1);
}
50% {
opacity: 1;
transform: translateX(-50%) scale(1.08);
}
}
/* Filet or fin animé sous le titre · signature éditoriale */
.mfl-faq-teaser-titre {
position: relative;
}
.mfl-faq-teaser-titre::after {
content: '';
position: absolute;
bottom: -1rem;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--mfl-or) 50%, transparent 100%);
opacity: 0.75;
animation: faqFiletPulse 6s ease-in-out infinite;
}
@keyframes faqFiletPulse {
0%, 100% { opacity: 0.45; width: 80px; }
50% { opacity: 0.95; width: 140px; }
}
.mfl-faq-teaser-titre em {
font-style: italic;
color: var(--mfl-or);
}
.mfl-faq-teaser-soustitre em {
color: var(--mfl-or);
font-style: italic;
}
/* Phrase émotionnelle connecteur · entre les questions et le CTA */
.mfl-faq-teaser-emotionnel {
text-align: center;
margin: 4rem auto 2.5rem;
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: clamp(1.15rem, 1.7vw, 1.45rem);
color: var(--mfl-bordeaux);
font-weight: 300;
line-height: 1.5;
max-width: 620px;
opacity: 0.88;
position: relative;
z-index: 1;
}
.mfl-faq-teaser-emotionnel em {
color: var(--mfl-or);
font-style: italic;
font-weight: 400;
}
/* CTA éditorial · plus fin, plus silencieux */
.mfl-faq-teaser-cta-bloc {
margin-top: 1rem;
padding-top: 0;
border-top: none;
}
.mfl-faq-teaser-cta {
font-size: 0.75rem;
letter-spacing: 0.46em;
padding: 1.15rem 2.4rem;
border-width: 1px;
background: transparent;
color: var(--mfl-bordeaux);
font-weight: 500;
}
.mfl-faq-teaser-cta:hover {
background: var(--mfl-bordeaux);
color: var(--mfl-or-clair);
border-color: var(--mfl-bordeaux);
transform: translateY(-2px);
}
.mfl-faq-teaser-cta-sub {
font-size: 0.78rem;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--mfl-or);
opacity: 0.7;
font-family: var(--mfl-font-mention);
font-style: normal;
font-weight: 500;
margin-top: 1.6rem;
}
/* ===== ACCORDÉON COUTURE · filet or qui s'ouvre doucement ===== */
.mfl-faq-list-teaser .mfl-faq-item {
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(201, 160, 80, 0.28);
box-shadow: 0 4px 18px rgba(74, 15, 26, 0.04);
transition: border-color 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
}
.mfl-faq-list-teaser .mfl-faq-item:hover {
border-color: rgba(201, 160, 80, 0.5);
box-shadow: 0 8px 28px rgba(74, 15, 26, 0.08);
}
.mfl-faq-list-teaser .mfl-faq-item.open {
background: rgba(252, 246, 234, 0.92);
border-color: var(--mfl-or);
box-shadow: 0 10px 32px rgba(201, 160, 80, 0.18);
}
.mfl-faq-list-teaser .mfl-faq-question {
font-family: var(--mfl-font-titre);
font-weight: 400;
font-size: 1.1rem;
letter-spacing: 0.005em;
padding: 1.6rem 2rem;
}
/* Remplacer le + par un ornement filet or fin animé */
.mfl-faq-list-teaser .mfl-faq-question::after {
content: '';
width: 16px;
height: 16px;
background:
linear-gradient(var(--mfl-or), var(--mfl-or)) center/16px 1px no-repeat,
linear-gradient(var(--mfl-or), var(--mfl-or)) center/1px 16px no-repeat;
transition: transform 0.6s cubic-bezier(0.25, 0.45, 0.45, 0.95), background-size 0.6s ease;
color: var(--mfl-or);
}
.mfl-faq-list-teaser .mfl-faq-item.open .mfl-faq-question::after {
transform: rotate(180deg);
background:
linear-gradient(var(--mfl-or), var(--mfl-or)) center/16px 1px no-repeat,
linear-gradient(var(--mfl-or), var(--mfl-or)) center/0px 16px no-repeat;
}
/* Maillage des liens dans les réponses · or fin éditorial */
.mfl-faq-list-teaser .mfl-faq-answer a {
color: var(--mfl-or);
text-decoration: none;
border-bottom: 1px solid rgba(201, 160, 80, 0.4);
transition: var(--mfl-transition);
font-weight: 500;
}
.mfl-faq-list-teaser .mfl-faq-answer a:hover {
color: var(--mfl-bordeaux);
border-bottom-color: var(--mfl-bordeaux);
}
.mfl-faq-list-teaser .mfl-faq-answer em {
font-style: italic;
color: var(--mfl-or);
}
/* ============================================================
MAISON FOREVER LAB · ÉDITIONS · galerie éditoriale silencieuse
Inspiration · Dior éditions, Aman publications, parfumerie collection
Règle absolue · pas de cards, pas d'ombres UI, pas de boutons
============================================================ */
.mfl-editions-section {
background:
radial-gradient(ellipse at 50% 0%, rgba(232, 196, 124, 0.04) 0%, transparent 50%),
radial-gradient(circle at 18% 28%, rgba(184, 154, 104, 0.025) 1px, transparent 2px),
radial-gradient(circle at 78% 62%, rgba(138, 106, 74, 0.02) 1px, transparent 2px),
linear-gradient(180deg, #F6F1E8 0%, #EDE5D6 100%);
background-size: auto, 80px 80px, 110px 110px, auto;
padding: 10rem 2rem 9rem;
position: relative;
border-top: 1px solid rgba(184, 154, 104, 0.16);
}
.mfl-editions-container {
max-width: 1320px;
margin: 0 auto;
}
/* HEADER · institution éditoriale calme */
.mfl-editions-header {
text-align: center;
margin: 0 auto 7rem;
max-width: 760px;
}
.mfl-editions-eyebrow {
display: block;
font-family: var(--mfl-font-mention);
font-size: 0.68rem;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--mfl-bronze-chaud);
font-weight: 500;
margin-bottom: 1.6rem;
opacity: 0.8;
}
.mfl-editions-titre {
font-family: var(--mfl-font-titre);
font-size: clamp(1.7rem, 3vw, 2.4rem);
font-weight: 300;
color: var(--mfl-bordeaux);
line-height: 1.3;
margin: 0;
letter-spacing: 0.02em;
}
.mfl-editions-titre em {
font-style: italic;
color: var(--mfl-or-vieilli);
font-family: var(--mfl-font-titre);
font-weight: 300;
}
.mfl-editions-titre-sep {
color: var(--mfl-or-vieilli);
margin: 0 0.4rem;
opacity: 0.7;
}
/* Indication très discrète · faire glisser pour explorer */
.mfl-editions-glisser {
text-align: center;
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.75rem;
color: var(--mfl-bronze-chaud);
letter-spacing: 0.18em;
opacity: 0.55;
font-weight: 300;
margin: 0 auto 2.5rem;
text-transform: uppercase;
}
.mfl-editions-glisser span {
font-style: normal;
margin: 0 0.5rem;
font-size: 1rem;
color: var(--mfl-or-vieilli);
display: inline-block;
animation: glisserPulse 3s ease-in-out infinite;
}
.mfl-editions-glisser span:last-child {
animation-delay: -1.5s;
}
@keyframes glisserPulse {
0%, 100% { transform: translateX(0); opacity: 0.55; }
50% { transform: translateX(4px); opacity: 0.85; }
}
.mfl-editions-glisser span:first-child {
animation-name: glisserPulseGauche;
}
@keyframes glisserPulseGauche {
0%, 100% { transform: translateX(0); opacity: 0.55; }
50% { transform: translateX(-4px); opacity: 0.85; }
}
/* GALERIE · CAROUSSEL scroll-snap luxe · galerie d'exposition silencieuse */
/* ===== VIEWPORT · masque overflow horizontal · slide centrée + peek voisines ===== */
.mfl-editions-viewport {
overflow: hidden;
width: 100%;
position: relative;
padding: 2rem 0 3rem;
}
/* ===== TRACK · ce qui se déplace via translateX ===== */
.mfl-editions-track {
display: flex;
gap: 4rem;
/* Centrage initial · place la première carte au milieu du viewport */
padding-left: calc(50% - 220px);
padding-right: calc(50% - 220px);
transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
/* ===== ÉDITION · taille fixe couverture éditoriale ===== */
.mfl-edition {
flex: 0 0 440px;
width: 440px;
display: flex;
flex-direction: column;
align-items: center;
padding: 0;
box-sizing: border-box;
transition: opacity 0.8s ease, transform 0.8s ease;
opacity: 0.35;
transform: scale(0.92);
}
/* Slide active · pleine lumière */
.mfl-edition.is-active {
opacity: 1;
transform: scale(1);
}
/* Mobile · cover plus petite, slides plus serrées */
@media (max-width: 640px) {
.mfl-editions-track {
gap: 2rem;
padding-left: calc(50% - 140px);
padding-right: calc(50% - 140px);
}
.mfl-edition {
flex: 0 0 280px;
width: 280px;
}
}
/* ===== DOTS · navigation discrète or vieilli ===== */
.mfl-editions-dots {
display: flex;
justify-content: center;
gap: 1.25rem;
margin-top: 2.5rem;
}
.mfl-editions-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: rgba(184, 154, 104, 0.25);
padding: 0;
cursor: pointer;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
outline: none;
}
.mfl-editions-dot:hover {
background: rgba(184, 154, 104, 0.5);
}
.mfl-editions-dot.is-active {
background: var(--mfl-or-vieilli, #B89A68);
width: 32px;
border-radius: 4px;
}
/* Pause indicator (réservé pour usage futur) */
.mfl-editions-dot:focus-visible {
outline: 1px solid var(--mfl-or-vieilli, #B89A68);
outline-offset: 4px;
}
/* Indicateurs de navigation · dots dorés discrets sous le carousel */
.mfl-editions-section::after {
content: '';
display: block;
margin: 0 auto;
width: 60px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--mfl-or-vieilli), transparent);
opacity: 0.4;
margin-top: 2rem;
}
/* Une édition · pas de carte, pas de bord, pas d'ombre UI · vide */
.mfl-edition {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: none;
border: none;
padding: 0;
margin: 0;
position: relative;
}
/* Numéro éditorial très discret au-dessus de la couverture */
.mfl-edition-numero {
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: 0.95rem;
font-weight: 300;
color: var(--mfl-or-vieilli);
opacity: 0.65;
letter-spacing: 0.12em;
margin-bottom: 2rem;
display: block;
}
/* Lien sur la couverture · subtle hover */
.mfl-edition-couverture-lien {
display: block;
text-decoration: none;
transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mfl-edition:hover .mfl-edition-couverture-lien {
transform: translateY(-3px);
}
/* COUVERTURE · l'objet principal · grande, respirante, ombre naturelle livre */
.mfl-edition-couverture {
aspect-ratio: 2 / 3;
overflow: hidden;
position: relative;
background: transparent;
/* Pas de box d'UI · juste l'ombre douce d'un livre posé */
filter:
drop-shadow(0 18px 22px rgba(74, 15, 26, 0.10))
drop-shadow(0 6px 8px rgba(74, 15, 26, 0.06));
transition: filter 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mfl-edition:hover .mfl-edition-couverture {
filter:
drop-shadow(0 28px 32px rgba(74, 15, 26, 0.16))
drop-shadow(0 10px 14px rgba(74, 15, 26, 0.09));
}
.mfl-edition-couverture img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* NOTE éditoriale · curatoriale, discrète, jamais bold */
.mfl-edition-note {
margin-top: 2.6rem;
max-width: 280px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.9rem;
}
.mfl-edition-moment {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--mfl-bronze-chaud);
opacity: 0.78;
font-weight: 300;
text-transform: none;
}
.mfl-edition-phrase {
font-family: var(--mfl-font-titre);
font-size: 0.98rem;
line-height: 1.6;
color: var(--mfl-bordeaux);
opacity: 0.78;
font-weight: 300;
letter-spacing: 0.005em;
margin: 0;
font-style: normal;
}
/* "Voir l'édition" · lien texte fin, jamais un bouton */
.mfl-edition-voir {
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: 0.88rem;
color: var(--mfl-or-vieilli);
text-decoration: none;
letter-spacing: 0.02em;
font-weight: 400;
position: relative;
padding-bottom: 2px;
transition: color 0.6s ease, opacity 0.6s ease;
margin-top: 0.4rem;
border-bottom: 1px solid rgba(184, 154, 104, 0.35);
}
.mfl-edition-voir:hover {
color: var(--mfl-bordeaux);
border-bottom-color: var(--mfl-bordeaux);
}
.mfl-edition-voir span {
margin-left: 0.3em;
display: inline-block;
transition: transform 0.5s ease;
}
.mfl-edition-voir:hover span {
transform: translateX(3px);
}
/* MENTION CURATORIALE finale · très petite, très discrète */
.mfl-editions-curatoriale {
text-align: center;
margin: 7rem auto 0;
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.78rem;
color: var(--mfl-bronze-chaud);
letter-spacing: 0.04em;
opacity: 0.72;
font-weight: 300;
max-width: 720px;
}
.mfl-editions-curatoriale a {
color: var(--mfl-or-vieilli);
text-decoration: none;
border-bottom: 1px solid rgba(184, 154, 104, 0.35);
transition: color 0.5s ease;
}
.mfl-editions-curatoriale a:hover {
color: var(--mfl-bordeaux);
}
/* ===== RESPONSIVE · le carousel s'adapte aux écrans ===== */
@media (max-width: 968px) {
.mfl-editions-section {
padding: 6rem 0 6rem;
}
.mfl-editions-header {
padding: 0 1.5rem;
margin-bottom: 4rem;
}
.mfl-editions-galerie {
gap: 3rem;
padding: 1rem calc(50vw - 150px) 2rem;
scroll-padding: 0 calc(50vw - 150px);
}
.mfl-edition {
flex: 0 0 300px;
width: 300px;
}
.mfl-edition-note {
max-width: 260px;
}
.mfl-editions-curatoriale {
padding: 0 1.5rem;
margin-top: 4rem;
}
}
@media (max-width: 600px) {
.mfl-editions-galerie {
gap: 2rem;
padding: 1rem calc(50vw - 130px) 2rem;
scroll-padding: 0 calc(50vw - 130px);
}
.mfl-edition {
flex: 0 0 260px;
width: 260px;
}
}
/* ============================================================
ÉDITORIAUX DIGITAUX (ancienne version · conservée pour compatibilité)
============================================================ */
.mfl-editoriaux-section {
background:
radial-gradient(ellipse at 50% 0%, rgba(232, 196, 124, 0.10) 0%, transparent 55%),
linear-gradient(180deg, var(--mfl-ivoire) 0%, #fdfaf3 100%);
padding: 8rem 2rem 7rem;
position: relative;
overflow: hidden;
border-top: 1px solid rgba(201, 160, 80, 0.18);
}
.mfl-editoriaux-halo {
position: absolute;
top: 4rem;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 400px;
background: radial-gradient(ellipse, rgba(232, 196, 124, 0.10) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
animation: section2HaloBreathe 14s ease-in-out infinite;
}
.mfl-editoriaux-header {
text-align: center;
max-width: 720px;
margin: 0 auto 5rem;
}
.mfl-editoriaux-eyebrow {
display: block;
font-size: 0.78rem;
letter-spacing: 0.46em;
color: var(--mfl-or);
font-weight: 600;
margin-bottom: 1.8rem;
}
.mfl-editoriaux-titre {
font-family: var(--mfl-font-titre);
font-size: clamp(2.2rem, 4.2vw, 3.4rem);
font-weight: 300;
color: var(--mfl-bordeaux);
line-height: 1.2;
margin: 0 0 1.5rem;
}
.mfl-editoriaux-titre em {
font-style: italic;
color: var(--mfl-or);
font-family: var(--mfl-font-titre);
}
.mfl-editoriaux-soustitre {
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
color: var(--mfl-bordeaux);
opacity: 0.78;
font-weight: 300;
line-height: 1.6;
margin: 0;
}
.mfl-editoriaux-soustitre em {
color: var(--mfl-or);
}
/* GRID 3 éditoriaux */
.mfl-editoriaux-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
max-width: 1280px;
margin: 0 auto 4.5rem;
align-items: stretch;
}
/* Carte éditoriale */
.mfl-editorial {
position: relative;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #fdfaf3 0%, var(--mfl-ivoire) 100%);
border: 1px solid rgba(201, 160, 80, 0.42);
border-radius: 4px;
padding: 2.2rem 1.6rem 1.8rem;
box-shadow:
0 24px 60px rgba(74, 15, 26, 0.10),
inset 0 0 0 4px rgba(201, 160, 80, 0.04);
transition: var(--mfl-transition);
}
.mfl-editorial:hover {
transform: translateY(-8px);
box-shadow:
0 34px 80px rgba(74, 15, 26, 0.16),
inset 0 0 0 4px rgba(201, 160, 80, 0.10);
border-color: rgba(201, 160, 80, 0.62);
}
/* Ornements coins or sur chaque éditorial */
.mfl-editorial::before,
.mfl-editorial::after {
content: '';
position: absolute;
width: 14px;
height: 14px;
border: 1px solid var(--mfl-or);
opacity: 0.55;
pointer-events: none;
transition: opacity 0.4s ease, width 0.4s ease;
}
.mfl-editorial::before {
top: 8px;
left: 8px;
border-right: none;
border-bottom: none;
}
.mfl-editorial::after {
bottom: 8px;
right: 8px;
border-left: none;
border-top: none;
}
.mfl-editorial:hover::before,
.mfl-editorial:hover::after {
opacity: 0.9;
width: 18px;
height: 18px;
}
/* Badge À venir · or fin discret */
.mfl-editorial-badge {
position: absolute;
top: 1rem;
right: 1rem;
font-family: var(--mfl-font-mention);
font-size: 0.6rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--mfl-or);
background: rgba(252, 246, 234, 0.85);
border: 1px solid rgba(201, 160, 80, 0.38);
padding: 0.32rem 0.7rem;
border-radius: 1px;
font-weight: 600;
z-index: 3;
white-space: nowrap;
}
/* Badge Signature Maison · pour Le Protocole */
.mfl-editorial-badge-signature {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
font-family: var(--mfl-font-mention);
font-size: 0.6rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--mfl-or);
background: var(--mfl-bordeaux);
padding: 0.5rem 1.2rem;
border-radius: 2px;
z-index: 4;
font-weight: 600;
box-shadow: 0 4px 14px rgba(74, 15, 26, 0.20);
white-space: nowrap;
}
/* Numéro éditorial italique or */
.mfl-editorial-numero {
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: 1.2rem;
font-weight: 300;
color: var(--mfl-or);
opacity: 0.78;
letter-spacing: 0.08em;
text-align: center;
margin-bottom: 1.2rem;
position: relative;
z-index: 1;
}
/* Lien sur la couverture */
.mfl-editorial-lien {
display: block;
text-decoration: none;
transition: transform 0.6s cubic-bezier(0.25, 0.45, 0.45, 0.95);
}
.mfl-editorial:hover .mfl-editorial-lien {
transform: scale(1.02);
}
/* COUVERTURE éditoriale · vraie image ORIZON */
.mfl-editorial-couverture {
aspect-ratio: 2 / 3;
border-radius: 3px;
overflow: hidden;
margin-bottom: 1.8rem;
box-shadow:
0 20px 50px rgba(74, 15, 26, 0.18),
inset 0 0 0 1px rgba(201, 160, 80, 0.18);
position: relative;
background: var(--mfl-bordeaux-fonce);
}
.mfl-editorial-couverture img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.7s cubic-bezier(0.25, 0.45, 0.45, 0.95);
}
.mfl-editorial:hover .mfl-editorial-couverture img {
transform: scale(1.03);
}
/* INFO éditorial · sous la couverture */
.mfl-editorial-info {
flex: 1;
display: flex;
flex-direction: column;
text-align: center;
}
.mfl-editorial-categorie {
font-family: var(--mfl-font-mention);
font-size: 0.62rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--mfl-or);
font-weight: 600;
margin-bottom: 0.8rem;
display: block;
}
.mfl-editorial-titre {
font-family: var(--mfl-font-titre);
font-size: clamp(1.3rem, 1.85vw, 1.6rem);
font-weight: 300;
color: var(--mfl-bordeaux);
margin: 0 0 0.5rem;
line-height: 1.15;
letter-spacing: 0.01em;
}
.mfl-editorial-mention {
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: 1rem;
color: var(--mfl-or);
margin: 0 0 1.2rem;
font-weight: 300;
line-height: 1.4;
}
.mfl-editorial-mention em {
font-style: italic;
}
.mfl-editorial-resume {
font-family: var(--mfl-font-corps);
font-size: 0.88rem;
line-height: 1.65;
color: var(--mfl-bordeaux);
opacity: 0.82;
font-weight: 300;
margin: 0 0 1.4rem;
}
/* Les "plus" qui accompagnent · petites listes premium */
.mfl-editorial-plus {
list-style: none;
padding: 1rem 0.6rem;
margin: 0 0 1.5rem;
background: rgba(252, 246, 234, 0.55);
border: 1px solid rgba(201, 160, 80, 0.28);
border-radius: 2px;
position: relative;
}
.mfl-editorial-plus::before,
.mfl-editorial-plus::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
border: 1px solid var(--mfl-or);
opacity: 0.62;
}
.mfl-editorial-plus::before {
top: 4px;
left: 4px;
border-right: none;
border-bottom: none;
}
.mfl-editorial-plus::after {
bottom: 4px;
right: 4px;
border-left: none;
border-top: none;
}
.mfl-editorial-plus li {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.82rem;
color: var(--mfl-bordeaux);
opacity: 0.85;
line-height: 1.6;
font-weight: 300;
padding: 0.2rem 0;
position: relative;
}
.mfl-editorial-plus li::before {
content: '✦';
color: var(--mfl-or);
margin-right: 0.5rem;
font-size: 0.78em;
}
/* Bas · prix + format */
.mfl-editorial-bas {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-top: 1.2rem;
border-top: 1px solid rgba(201, 160, 80, 0.25);
margin-top: auto;
}
.mfl-editorial-prix {
font-family: var(--mfl-font-titre);
font-size: 1.5rem;
font-weight: 400;
color: var(--mfl-bordeaux);
letter-spacing: 0.02em;
}
.mfl-editorial-format {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.75rem;
color: var(--mfl-or);
opacity: 0.78;
letter-spacing: 0.02em;
text-align: right;
}
/* Le Protocole · signature · halo doré renforcé */
.mfl-editorial-signature {
background:
radial-gradient(ellipse at 50% 0%, rgba(232, 196, 124, 0.20) 0%, transparent 65%),
linear-gradient(180deg, #fdfaf3 0%, var(--mfl-ivoire) 100%);
border-color: rgba(201, 160, 80, 0.62);
box-shadow:
0 32px 76px rgba(74, 15, 26, 0.14),
0 10px 28px rgba(201, 160, 80, 0.16),
inset 0 0 0 4px rgba(201, 160, 80, 0.08);
}
/* Phrase émotionnelle connecteur */
.mfl-editoriaux-emotionnel {
text-align: center;
margin: 1rem auto 2.8rem;
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: clamp(1.15rem, 1.7vw, 1.45rem);
color: var(--mfl-bordeaux);
font-weight: 300;
line-height: 1.5;
max-width: 620px;
opacity: 0.88;
}
.mfl-editoriaux-emotionnel em {
color: var(--mfl-or);
font-style: italic;
font-weight: 400;
}
/* CTA Bibliothèque · éditorial fin */
.mfl-editoriaux-cta-bloc {
text-align: center;
}
.mfl-editoriaux-cta {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--mfl-font-mention);
font-size: 0.78rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--mfl-bordeaux);
background: transparent;
padding: 1.2rem 2.5rem;
border: 1px solid var(--mfl-or);
text-decoration: none;
transition: var(--mfl-transition);
font-weight: 600;
}
.mfl-editoriaux-cta:hover {
background: var(--mfl-bordeaux);
color: var(--mfl-or-clair);
border-color: var(--mfl-bordeaux);
transform: translateY(-2px);
}
.mfl-editoriaux-cta-sub {
display: block;
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.82rem;
color: var(--mfl-or);
margin-top: 1.4rem;
letter-spacing: 0.03em;
opacity: 0.82;
}
/* Responsive éditoriaux */
@media (max-width: 1000px) {
.mfl-editoriaux-grid {
grid-template-columns: 1fr;
max-width: 400px;
gap: 4rem;
}
.mfl-editorial-signature {
order: -1;
}
}
/* ============================================================
TRILOGIE ÉDITORIALE · ORIZON · 3 livres signature Maison
Niveau Dior Édition / Hermès Beaux Livres
============================================================ */
.mfl-trilogie-section {
background:
radial-gradient(ellipse at 50% 0%, rgba(232, 196, 124, 0.08) 0%, transparent 60%),
var(--mfl-ivoire);
padding: 8rem 2rem 7rem;
position: relative;
overflow: hidden;
}
.mfl-trilogie-header {
text-align: center;
max-width: 720px;
margin: 0 auto 5rem;
position: relative;
z-index: 1;
}
.mfl-trilogie-eyebrow {
display: block;
font-size: 0.78rem;
letter-spacing: 0.46em;
color: var(--mfl-or);
font-weight: 600;
margin-bottom: 1.8rem;
}
.mfl-trilogie-titre {
font-family: var(--mfl-font-titre);
font-size: clamp(2.2rem, 4.2vw, 3.4rem);
font-weight: 300;
color: var(--mfl-bordeaux);
line-height: 1.2;
margin: 0 0 1.5rem;
}
.mfl-trilogie-titre em {
font-style: italic;
color: var(--mfl-or);
font-family: var(--mfl-font-titre);
}
.mfl-trilogie-soustitre {
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
color: var(--mfl-bordeaux);
opacity: 0.78;
font-weight: 300;
line-height: 1.6;
margin: 0;
}
.mfl-trilogie-soustitre em {
color: var(--mfl-or);
}
/* GRID 3 livres */
.mfl-trilogie-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
max-width: 1200px;
margin: 0 auto 5rem;
align-items: stretch;
}
/* Une carte livre */
.mfl-trilogie-livre {
position: relative;
display: flex;
flex-direction: column;
background: #fdfaf3;
border: 1px solid rgba(201, 160, 80, 0.32);
border-radius: 4px;
padding: 2rem 1.6rem 1.8rem;
box-shadow:
0 22px 56px rgba(74, 15, 26, 0.10),
inset 0 0 0 4px rgba(201, 160, 80, 0.04);
transition: var(--mfl-transition);
}
.mfl-trilogie-livre:hover {
transform: translateY(-8px);
box-shadow:
0 32px 80px rgba(74, 15, 26, 0.16),
inset 0 0 0 4px rgba(201, 160, 80, 0.10);
border-color: rgba(201, 160, 80, 0.55);
}
/* Ornements coins or */
.mfl-trilogie-livre::before,
.mfl-trilogie-livre::after {
content: '';
position: absolute;
width: 14px;
height: 14px;
border: 1px solid var(--mfl-or);
opacity: 0.55;
pointer-events: none;
transition: opacity 0.4s ease, width 0.4s ease;
}
.mfl-trilogie-livre::before {
top: 8px;
left: 8px;
border-right: none;
border-bottom: none;
}
.mfl-trilogie-livre::after {
bottom: 8px;
right: 8px;
border-left: none;
border-top: none;
}
.mfl-trilogie-livre:hover::before,
.mfl-trilogie-livre:hover::after {
opacity: 0.9;
width: 18px;
height: 18px;
}
/* Numéro éditorial */
.mfl-trilogie-numero {
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: 1.2rem;
font-weight: 300;
color: var(--mfl-or);
opacity: 0.78;
letter-spacing: 0.08em;
text-align: center;
margin-bottom: 1.4rem;
}
/* COUVERTURE LIVRE · format vertical 3:4 · Dior Édition */
.mfl-trilogie-couverture {
aspect-ratio: 3 / 4;
border-radius: 2px;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 2.5rem 2rem;
margin-bottom: 1.8rem;
box-shadow:
inset 0 0 0 4px rgba(255, 245, 225, 0.18),
0 18px 48px rgba(74, 15, 26, 0.14);
transition: transform 0.7s cubic-bezier(0.25, 0.45, 0.45, 0.95);
}
.mfl-trilogie-livre:hover .mfl-trilogie-couverture {
transform: scale(1.02);
}
/* Couverture BORDEAUX · livre 01 */
.mfl-trilogie-livre-bordeaux .mfl-trilogie-couverture {
background:
radial-gradient(ellipse at 50% 30%, rgba(232, 196, 124, 0.12) 0%, transparent 70%),
linear-gradient(135deg, var(--mfl-bordeaux-fonce) 0%, var(--mfl-bordeaux) 100%);
color: var(--mfl-or-clair);
}
/* Couverture OR · livre 02 (héros) */
.mfl-trilogie-livre-or .mfl-trilogie-couverture {
background:
radial-gradient(ellipse at 50% 30%, rgba(255, 245, 225, 0.4) 0%, transparent 70%),
linear-gradient(135deg, var(--mfl-or) 0%, var(--mfl-or-clair) 100%);
color: var(--mfl-bordeaux);
}
/* Couverture LILAS · livre 03 */
.mfl-trilogie-livre-lilas .mfl-trilogie-couverture {
background:
radial-gradient(ellipse at 50% 30%, rgba(232, 196, 124, 0.10) 0%, transparent 70%),
linear-gradient(135deg, #C9B8D4 0%, #B59DC4 100%);
color: var(--mfl-bordeaux);
}
.mfl-trilogie-couverture-contenu {
text-align: center;
position: relative;
z-index: 1;
}
.mfl-trilogie-marque {
display: block;
font-family: var(--mfl-font-mention);
font-size: 0.58rem;
letter-spacing: 0.42em;
text-transform: uppercase;
opacity: 0.85;
margin-bottom: 1rem;
color: var(--mfl-or-clair);
}
.mfl-trilogie-marque-bordeaux {
color: var(--mfl-bordeaux);
}
.mfl-trilogie-emblem-line {
display: block;
width: 36px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--mfl-or-clair), transparent);
margin: 0 auto 1.4rem;
opacity: 0.7;
}
.mfl-trilogie-emblem-line-bordeaux {
background: linear-gradient(90deg, transparent, var(--mfl-bordeaux), transparent);
}
.mfl-trilogie-livre-titre {
font-family: var(--mfl-font-titre);
font-size: clamp(1.5rem, 2.4vw, 1.95rem);
font-weight: 300;
line-height: 1.15;
letter-spacing: 0.005em;
margin: 0 0 1.5rem;
color: var(--mfl-or-clair);
}
.mfl-trilogie-livre-titre-bordeaux {
color: var(--mfl-bordeaux);
}
.mfl-trilogie-livre-mention {
display: inline-block;
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.85rem;
letter-spacing: 0.1em;
opacity: 0.85;
padding-top: 0.6rem;
border-top: 1px solid rgba(232, 196, 124, 0.45);
color: var(--mfl-or-clair);
min-width: 100px;
}
.mfl-trilogie-livre-mention-bordeaux {
color: var(--mfl-bordeaux);
border-top-color: rgba(74, 15, 26, 0.45);
}
/* INFO LIVRE · sous la couverture */
.mfl-trilogie-livre-info {
flex: 1;
display: flex;
flex-direction: column;
}
.mfl-trilogie-livre-categorie {
font-family: var(--mfl-font-mention);
font-size: 0.65rem;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--mfl-or);
font-weight: 600;
margin-bottom: 0.8rem;
text-align: center;
display: block;
}
.mfl-trilogie-livre-texte {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.9rem;
line-height: 1.65;
color: var(--mfl-bordeaux);
opacity: 0.82;
font-weight: 300;
margin: 0 0 1.5rem;
text-align: center;
flex: 1;
}
.mfl-trilogie-livre-bas {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1.2rem;
border-top: 1px solid rgba(201, 160, 80, 0.25);
margin-top: auto;
}
.mfl-trilogie-livre-prix {
font-family: var(--mfl-font-titre);
font-size: 1.3rem;
font-weight: 300;
color: var(--mfl-bordeaux);
letter-spacing: 0.02em;
}
.mfl-trilogie-livre-date {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.78rem;
color: var(--mfl-or);
opacity: 0.78;
letter-spacing: 0.04em;
}
/* Livre héros (02) · badge Signature Maison + glow */
.mfl-trilogie-livre-heros {
background:
radial-gradient(ellipse at 50% 0%, rgba(232, 196, 124, 0.18) 0%, transparent 65%),
linear-gradient(180deg, #fdfaf3 0%, var(--mfl-ivoire) 100%);
box-shadow:
0 30px 70px rgba(74, 15, 26, 0.14),
0 10px 24px rgba(201, 160, 80, 0.16),
inset 0 0 0 4px rgba(201, 160, 80, 0.08);
}
.mfl-trilogie-livre-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
font-family: var(--mfl-font-mention);
font-size: 0.58rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--mfl-or);
background: var(--mfl-bordeaux);
padding: 0.5rem 1.2rem;
border-radius: 2px;
z-index: 3;
font-weight: 600;
box-shadow: 0 4px 14px rgba(74, 15, 26, 0.20);
white-space: nowrap;
}
/* CTA Bibliothèque */
.mfl-trilogie-cta-bloc {
text-align: center;
position: relative;
z-index: 1;
}
.mfl-trilogie-cta {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--mfl-font-mention);
font-size: 0.82rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--mfl-bordeaux);
background: transparent;
padding: 1.3rem 2.6rem;
border: 1px solid var(--mfl-or);
text-decoration: none;
transition: var(--mfl-transition);
font-weight: 600;
}
.mfl-trilogie-cta:hover {
background: var(--mfl-or);
color: var(--mfl-ivoire);
transform: translateY(-2px);
}
.mfl-trilogie-cta-sub {
display: block;
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.86rem;
color: var(--mfl-or);
margin-top: 1.4rem;
letter-spacing: 0.03em;
opacity: 0.82;
}
/* Responsive trilogie */
@media (max-width: 968px) {
.mfl-trilogie-grid {
grid-template-columns: 1fr;
max-width: 380px;
gap: 4rem;
}
.mfl-trilogie-livre-heros {
order: -1;
}
}
/* ============================================================
FAQ HOME · TEASER ÉDITORIAL ORIZON
3 questions essentielles + CTA vers FAQ complète
============================================================ */
.mfl-faq-teaser {
background: var(--mfl-ivoire);
padding: 8rem 2rem;
position: relative;
overflow: hidden;
}
.mfl-faq-teaser::before {
content: '';
position: absolute;
top: 5rem;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 300px;
background: radial-gradient(ellipse, rgba(232, 196, 124, 0.08) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
animation: section2HaloBreathe 18s ease-in-out infinite;
}
.mfl-faq-teaser-header {
text-align: center;
max-width: 720px;
margin: 0 auto 5rem;
position: relative;
z-index: 1;
}
.mfl-faq-teaser-eyebrow {
display: block;
font-size: 0.78rem;
letter-spacing: 0.46em;
color: var(--mfl-or);
font-weight: 600;
margin-bottom: 1.8rem;
}
.mfl-faq-teaser-titre {
font-family: var(--mfl-font-titre);
font-size: clamp(2.2rem, 4.2vw, 3.4rem);
font-weight: 300;
color: var(--mfl-bordeaux);
line-height: 1.2;
margin: 0 0 1.5rem;
}
.mfl-faq-teaser-titre em {
font-style: italic;
color: var(--mfl-or);
font-family: var(--mfl-font-titre);
}
.mfl-faq-teaser-soustitre {
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
color: var(--mfl-bordeaux);
opacity: 0.78;
font-weight: 300;
line-height: 1.6;
margin: 0;
}
/* Liste teaser · plus compacte */
.mfl-faq-list-teaser {
max-width: 760px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* CTA vers FAQ complète */
.mfl-faq-teaser-cta-bloc {
text-align: center;
margin-top: 4rem;
padding-top: 3rem;
border-top: 1px solid rgba(201, 160, 80, 0.22);
position: relative;
z-index: 1;
}
.mfl-faq-teaser-cta {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--mfl-font-mention);
font-size: 0.8rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--mfl-bordeaux);
background: transparent;
padding: 1.3rem 2.6rem;
border: 1px solid var(--mfl-or);
text-decoration: none;
transition: var(--mfl-transition);
font-weight: 600;
}
.mfl-faq-teaser-cta:hover {
background: var(--mfl-or);
color: var(--mfl-ivoire);
transform: translateY(-2px);
}
.mfl-faq-teaser-cta-sub {
display: block;
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.85rem;
color: var(--mfl-or);
margin-top: 1.4rem;
letter-spacing: 0.03em;
opacity: 0.78;
}
/* ============================================================
CONSTELLATION MAISON · ORIZON · architecture en forme de Maison
Palette : ivoire chaud, champagne mat, bordeaux, or vieilli, bronze
============================================================ */
/* Variables ORIZON · palette enveloppante chaude */
:root {
--mfl-ivoire-chaud: #F6F1E8;
--mfl-champagne-mat: #E8DDCF;
--mfl-or-vieilli: #B89A68;
--mfl-bronze-chaud: #8A6A4A;
--mfl-noir-brun: #1E1715;
}
.mfl-constellation {
background:
radial-gradient(ellipse at 50% 30%, rgba(184, 154, 104, 0.10) 0%, transparent 60%),
radial-gradient(ellipse at 30% 70%, rgba(232, 221, 207, 0.5) 0%, transparent 55%),
linear-gradient(180deg, var(--mfl-ivoire-chaud) 0%, var(--mfl-champagne-mat) 100%);
padding: 8rem 2rem 8rem;
position: relative;
overflow: hidden;
}
/* Texture papier luxe très subtile */
.mfl-constellation::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 20%, rgba(184, 154, 104, 0.05) 1px, transparent 2px),
radial-gradient(circle at 80% 50%, rgba(138, 106, 74, 0.04) 1px, transparent 2px),
radial-gradient(circle at 40% 80%, rgba(184, 154, 104, 0.03) 1px, transparent 2px);
background-size: 100px 100px, 140px 140px, 80px 80px;
pointer-events: none;
opacity: 0.6;
}
/* HEADER */
.mfl-constellation-header {
text-align: center;
max-width: 760px;
margin: 0 auto 5rem;
position: relative;
z-index: 2;
}
.mfl-constellation-eyebrow {
display: block;
font-size: 0.78rem;
letter-spacing: 0.46em;
color: var(--mfl-bronze-chaud);
font-weight: 600;
margin-bottom: 1.8rem;
}
.mfl-constellation-title {
font-family: var(--mfl-font-titre);
font-size: clamp(2.2rem, 4.2vw, 3.4rem);
font-weight: 300;
color: var(--mfl-bordeaux);
line-height: 1.2;
margin: 0 0 1.5rem;
}
.mfl-constellation-title em {
font-style: italic;
color: var(--mfl-or-vieilli);
font-family: var(--mfl-font-titre);
}
.mfl-constellation-soustitre {
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
color: var(--mfl-bordeaux);
opacity: 0.78;
font-weight: 300;
line-height: 1.6;
margin: 0 auto;
max-width: 580px;
}
.mfl-constellation-soustitre em {
color: var(--mfl-or-vieilli);
font-style: italic;
}
/* ===== ARCHITECTURE MAISON · positionnement absolu en silhouette ===== */
.mfl-constellation-architecture {
position: relative;
max-width: 1200px;
height: 900px;
margin: 0 auto;
z-index: 1;
}
/* Fil d'or SVG · respiration lumineuse organique */
.mfl-constellation-fil {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0.95;
}
/* Fil principal · respire doucement (épaisseur) */
.mfl-constellation-fil-principal {
animation: filOrRespire 14s ease-in-out infinite;
}
@keyframes filOrRespire {
0%, 100% { opacity: 0.62; stroke-width: 1; }
50% { opacity: 1; stroke-width: 1.5; }
}
/* Lumière mobile · circule en continu sur le 8 */
.mfl-constellation-fil-lumiere {
stroke-dasharray: 120 1800;
stroke-dashoffset: 0;
animation: filOrMouvement 22s linear infinite;
}
@keyframes filOrMouvement {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -1920; }
}
/* Couronne autour du cœur · pulse léger */
.mfl-constellation-couronne {
animation: couronnePulse 10s ease-in-out infinite;
transform-origin: 600px 450px;
}
@keyframes couronnePulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.75; }
}
/* ===== TERRITOIRES · 6 satellites positionnés en Maison ===== */
.mfl-territoire {
position: absolute;
width: 200px;
text-decoration: none;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
padding: 1.4rem 1rem;
background:
radial-gradient(ellipse at 50% 0%, rgba(184, 154, 104, 0.08) 0%, transparent 70%),
linear-gradient(180deg, rgba(252, 246, 234, 0.6) 0%, rgba(246, 241, 232, 0.4) 100%);
border: 1px solid rgba(184, 154, 104, 0.28);
border-radius: 3px;
box-shadow:
0 12px 32px rgba(74, 15, 26, 0.08),
inset 0 0 0 1px rgba(232, 221, 207, 0.4);
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.6s ease,
border-color 0.6s ease;
z-index: 3;
}
.mfl-territoire:hover {
transform: translateY(-6px);
box-shadow:
0 22px 48px rgba(74, 15, 26, 0.14),
0 6px 16px rgba(184, 154, 104, 0.20),
inset 0 0 0 1px rgba(232, 221, 207, 0.7);
border-color: rgba(184, 154, 104, 0.55);
}
/* Ornements coins or sur chaque territoire */
.mfl-territoire::before,
.mfl-territoire::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
border: 1px solid var(--mfl-or-vieilli);
opacity: 0.5;
pointer-events: none;
transition: opacity 0.4s ease, width 0.4s ease, height 0.4s ease;
}
.mfl-territoire::before {
top: 6px;
left: 6px;
border-right: none;
border-bottom: none;
}
.mfl-territoire::after {
bottom: 6px;
right: 6px;
border-left: none;
border-top: none;
}
.mfl-territoire:hover::before,
.mfl-territoire:hover::after {
opacity: 0.9;
width: 14px;
height: 14px;
}
/* Icône line-art SVG · or vieilli */
.mfl-territoire-icone {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background:
radial-gradient(circle, rgba(184, 154, 104, 0.18) 0%, transparent 70%);
color: var(--mfl-or-vieilli);
margin-bottom: 1rem;
transition: transform 0.6s ease, background 0.6s ease;
}
.mfl-territoire:hover .mfl-territoire-icone {
background:
radial-gradient(circle, rgba(184, 154, 104, 0.32) 0%, transparent 70%);
transform: scale(1.08);
}
/* Portrait rond pour Sillea et Morgan · présence humaine */
.mfl-territoire-portrait {
display: block;
width: 64px;
height: 64px;
border-radius: 50%;
overflow: hidden;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--mfl-bordeaux-fonce), var(--mfl-bordeaux));
border: 1.5px solid var(--mfl-or-vieilli);
box-shadow: 0 6px 16px rgba(74, 15, 26, 0.16);
position: relative;
transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.mfl-territoire-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mfl-territoire:hover .mfl-territoire-portrait {
transform: scale(1.06);
box-shadow: 0 10px 24px rgba(74, 15, 26, 0.26);
}
.mfl-territoire-portrait-placeholder::after {
content: '✦';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--mfl-or-vieilli);
font-size: 1.4rem;
}
.mfl-territoire-categorie {
font-family: var(--mfl-font-mention);
font-size: 0.58rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--mfl-or-vieilli);
font-weight: 600;
margin-bottom: 0.5rem;
}
.mfl-territoire-titre {
font-family: var(--mfl-font-titre);
font-size: 1.1rem;
font-weight: 400;
color: var(--mfl-bordeaux);
margin: 0 0 0.6rem;
line-height: 1.2;
letter-spacing: 0.005em;
}
.mfl-territoire-texte {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.84rem;
line-height: 1.55;
color: var(--mfl-bordeaux);
opacity: 0.78;
font-weight: 300;
margin: 0 0 1rem;
}
.mfl-territoire-cta {
font-family: var(--mfl-font-mention);
font-size: 0.65rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--mfl-or-vieilli);
font-weight: 600;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease;
}
/* Badge "déjà disponible" · pour les territoires avec produits actifs */
.mfl-territoire-disponible {
display: inline-block;
font-family: var(--mfl-font-mention);
font-size: 0.58rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--mfl-bordeaux);
background: rgba(252, 246, 234, 0.6);
border: 1px solid rgba(184, 154, 104, 0.45);
padding: 0.3rem 0.7rem;
margin-bottom: 0.8rem;
font-weight: 600;
border-radius: 1px;
position: relative;
}
.mfl-territoire-disponible::before {
content: '✦';
color: var(--mfl-or-vieilli);
margin-right: 0.4rem;
font-size: 0.7em;
}
.mfl-territoire:hover .mfl-territoire-cta {
opacity: 1;
transform: translateY(0);
color: var(--mfl-bordeaux);
}
/* ===== POSITIONNEMENT EN FORME DE MAISON · sur tracé du 8 ===== */
/* TOIT · 2 territoires en haut sur la courbe supérieure du 8 */
.mfl-territoire-toit-gauche {
top: 4%;
left: 16%;
}
.mfl-territoire-toit-droit {
top: 4%;
right: 16%;
}
/* MURS · 2 territoires aux extrémités latérales du 8 */
.mfl-territoire-mur-gauche {
top: 42%;
left: 0;
}
.mfl-territoire-mur-droit {
top: 42%;
right: 0;
}
/* FONDATION · 2 territoires en bas · présence humaine (Sillea + Morgan) */
.mfl-territoire-fondation-gauche {
bottom: 4%;
left: 20%;
}
.mfl-territoire-fondation-droite {
bottom: 4%;
right: 20%;
}
/* Architecture · plus haute pour aérer */
.mfl-constellation-architecture {
height: 960px;
}
/* Territoires un peu plus compacts pour éviter chevauchements */
.mfl-territoire {
width: 190px;
}
/* ===== CŒUR CENTRAL · LOGO + RÉVÉLATION ===== */
.mfl-constellation-coeur {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
text-align: center;
z-index: 4;
}
/* Halo doré qui respire derrière le cœur */
.mfl-constellation-coeur-halo {
position: absolute;
top: 50%;
left: 50%;
width: 460px;
height: 460px;
transform: translate(-50%, -50%);
background:
radial-gradient(circle, rgba(184, 154, 104, 0.22) 0%, rgba(184, 154, 104, 0.08) 35%, transparent 70%);
border-radius: 50%;
pointer-events: none;
animation: coeurHaloRespire 8s ease-in-out infinite;
z-index: -1;
}
@keyframes coeurHaloRespire {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}
.mfl-constellation-coeur-inner {
background:
radial-gradient(ellipse at 50% 30%, rgba(184, 154, 104, 0.16) 0%, transparent 70%),
linear-gradient(180deg, #fdfaf3 0%, var(--mfl-ivoire-chaud) 100%);
border: 1.5px solid rgba(184, 154, 104, 0.55);
border-radius: 4px;
padding: 2.2rem 1.8rem 2rem;
position: relative;
box-shadow:
0 30px 80px rgba(74, 15, 26, 0.14),
inset 0 0 0 4px rgba(184, 154, 104, 0.08);
}
/* Ornements coins or sur le cœur · plus marqués */
.mfl-constellation-coeur-inner::before,
.mfl-constellation-coeur-inner::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
border: 1.5px solid var(--mfl-or-vieilli);
opacity: 0.85;
pointer-events: none;
}
.mfl-constellation-coeur-inner::before {
top: 10px;
left: 10px;
border-right: none;
border-bottom: none;
}
.mfl-constellation-coeur-inner::after {
bottom: 10px;
right: 10px;
border-left: none;
border-top: none;
}
.mfl-constellation-logo {
width: 72px;
height: 72px;
margin: 0 auto 1rem;
object-fit: contain;
display: block;
}
.mfl-constellation-emblem-line {
display: block;
width: 50px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--mfl-or-vieilli), transparent);
margin: 0.6rem auto 1.2rem;
opacity: 0.65;
}
.mfl-constellation-coeur-categorie {
display: block;
font-family: var(--mfl-font-mention);
font-size: 0.62rem;
letter-spacing: 0.46em;
text-transform: uppercase;
color: var(--mfl-or-vieilli);
font-weight: 600;
margin-bottom: 0.5rem;
}
.mfl-constellation-coeur-titre {
font-family: var(--mfl-font-titre);
font-size: clamp(1.6rem, 2.4vw, 2rem);
font-weight: 300;
color: var(--mfl-bordeaux);
margin: 0 0 1.2rem;
letter-spacing: 0.01em;
line-height: 1.1;
}
.mfl-constellation-coeur-titre sup {
font-size: 0.32em;
vertical-align: super;
color: var(--mfl-or-vieilli);
letter-spacing: 0.08em;
margin-left: 0.05em;
}
.mfl-constellation-coeur-texte {
font-family: var(--mfl-font-corps);
font-size: 0.88rem;
line-height: 1.65;
color: var(--mfl-bordeaux);
opacity: 0.82;
font-weight: 300;
margin: 0 0 1.4rem;
font-style: italic;
}
.mfl-constellation-coeur-cta {
display: inline-block;
font-family: var(--mfl-font-mention);
font-size: 0.68rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--mfl-or-vieilli);
text-decoration: none;
font-weight: 600;
padding: 0.7rem 1.4rem;
border: 1px solid var(--mfl-or-vieilli);
transition: var(--mfl-transition);
}
.mfl-constellation-coeur-cta sup {
font-size: 0.55em;
vertical-align: super;
}
.mfl-constellation-coeur-cta:hover {
background: var(--mfl-or-vieilli);
color: var(--mfl-ivoire-chaud);
transform: translateY(-2px);
}
/* ===== CTA FINAL ENTRER DANS LE CERCLE MAISON ===== */
.mfl-constellation-cta-bloc {
text-align: center;
margin-top: 5rem;
position: relative;
z-index: 2;
}
.mfl-constellation-cta-principal {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--mfl-font-mention);
font-size: 0.84rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--mfl-or-clair);
background: var(--mfl-bordeaux);
padding: 1.4rem 3rem;
border: 1px solid var(--mfl-bordeaux);
text-decoration: none;
transition: var(--mfl-transition);
font-weight: 600;
box-shadow: 0 14px 40px rgba(74, 15, 26, 0.22);
}
.mfl-constellation-cta-principal:hover {
background: var(--mfl-bordeaux-fonce);
color: var(--mfl-or);
transform: translateY(-3px);
box-shadow: 0 18px 50px rgba(74, 15, 26, 0.30);
}
.mfl-constellation-cta-sub {
display: block;
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.86rem;
color: var(--mfl-or-vieilli);
margin-top: 1.4rem;
letter-spacing: 0.03em;
opacity: 0.85;
}
/* ===== RESPONSIVE CONSTELLATION ===== */
@media (max-width: 1100px) {
.mfl-constellation-architecture {
height: auto;
min-height: 1400px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
padding: 3rem 1rem;
position: relative;
}
/* Le fil d'or reste visible · flourish signature en arrière-plan */
.mfl-constellation-fil {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.55;
z-index: 0;
}
.mfl-territoire {
position: relative;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: 100%;
max-width: 240px;
margin: 0 auto;
z-index: 3;
}
.mfl-constellation-coeur {
position: relative;
top: auto;
left: auto;
transform: none;
grid-column: span 2;
margin: 2rem auto;
z-index: 4;
}
.mfl-constellation-coeur-halo {
width: 320px;
height: 320px;
}
}
@media (max-width: 600px) {
.mfl-constellation {
padding: 5rem 1rem 5rem;
}
.mfl-constellation-architecture {
grid-template-columns: 1fr;
min-height: 2000px;
}
.mfl-constellation-fil {
opacity: 0.4;
}
.mfl-constellation-coeur {
grid-column: span 1;
width: auto;
max-width: 320px;
}
}
/* ====== FADE IN AU SCROLL ====== */
.mfl-fade-in-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.mfl-fade-in-scroll.visible {
opacity: 1;
transform: translateY(0);
}
/* ====== RESPONSIVE SLIDER ====== */
@media (max-width: 768px) {
.mfl-hero-arrow { width: 40px; height: 40px; font-size: 1.2rem; }
.mfl-hero-arrow.prev { left: 0.8rem; }
.mfl-hero-arrow.next { right: 0.8rem; }
}
/* ====== POPUP ALIZÉE FLOTTANT ====== */
/* ============================================================
AVATAR SILLEA · présence interactive Maison
Remplace l'ancien popup Alizée · photo libre de droit + voix Maison
============================================================ */
#mfl-sillea-popup {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 9999;
font-family: var(--mfl-font-corps);
}
/* La bulle photo flottante · Sillea */
.mfl-sillea-bubble {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--mfl-bordeaux);
border: 2px solid var(--mfl-or);
padding: 0;
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow:
0 12px 36px rgba(74, 15, 26, 0.32),
0 0 0 4px rgba(252, 246, 234, 0.8);
transition: transform 0.4s cubic-bezier(0.25, 0.45, 0.45, 0.95), box-shadow 0.4s ease;
}
.mfl-sillea-bubble img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
}
/* Anneau pulse · animation lente premium */
.mfl-sillea-bubble-pulse {
position: absolute;
inset: -10px;
border-radius: 50%;
border: 1.5px solid var(--mfl-or);
pointer-events: none;
animation: silleaPulse 3s ease-in-out infinite;
opacity: 0;
}
@keyframes silleaPulse {
0% { opacity: 0.55; transform: scale(0.96); }
60% { opacity: 0; transform: scale(1.15); }
100% { opacity: 0; transform: scale(1.2); }
}
.mfl-sillea-bubble:hover {
transform: scale(1.06);
box-shadow:
0 16px 44px rgba(74, 15, 26, 0.42),
0 0 0 6px rgba(252, 246, 234, 0.9);
}
/* Carte de conversation · Sillea */
.mfl-sillea-card {
background: var(--mfl-ivoire);
width: 360px;
max-width: calc(100vw - 3rem);
border-radius: 6px;
padding: 2.2rem 1.8rem 1.6rem;
box-shadow:
0 32px 80px rgba(74, 15, 26, 0.35),
inset 0 0 0 1px rgba(201, 160, 80, 0.18);
border: 1px solid var(--mfl-or);
position: relative;
text-align: center;
animation: silleaCardEnter 0.5s cubic-bezier(0.25, 0.45, 0.45, 0.95);
}
@keyframes silleaCardEnter {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.mfl-sillea-close {
position: absolute;
top: 0.6rem;
right: 0.9rem;
background: none;
border: none;
font-size: 1.6rem;
color: var(--mfl-bordeaux);
cursor: pointer;
line-height: 1;
opacity: 0.6;
transition: opacity 0.3s ease;
}
.mfl-sillea-close:hover { opacity: 1; }
/* Avatar dans la carte · photo plus grande */
.mfl-sillea-avatar {
width: 86px;
height: 86px;
border-radius: 50%;
margin: 0 auto 1rem;
overflow: hidden;
background: var(--mfl-bordeaux);
border: 2px solid var(--mfl-or);
box-shadow: 0 8px 22px rgba(74, 15, 26, 0.18);
}
.mfl-sillea-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mfl-sillea-eyebrow {
display: block;
font-family: var(--mfl-font-mention);
font-size: 0.62rem;
letter-spacing: 0.46em;
text-transform: uppercase;
color: var(--mfl-or);
font-weight: 600;
margin-bottom: 0.6rem;
}
.mfl-sillea-nom {
font-family: var(--mfl-font-titre);
color: var(--mfl-bordeaux);
font-size: 1.65rem;
font-weight: 300;
margin: 0 0 1rem;
letter-spacing: 0.02em;
}
.mfl-sillea-intro {
font-family: var(--mfl-font-corps);
color: var(--mfl-bordeaux);
font-size: 0.92rem;
line-height: 1.65;
margin: 0 0 1.6rem;
opacity: 0.85;
font-weight: 300;
}
.mfl-sillea-intro em {
font-style: italic;
color: var(--mfl-or);
}
.mfl-sillea-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.4rem;
}
.mfl-sillea-action {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 0.9rem;
background: rgba(252, 246, 234, 0.6);
border: 1px solid rgba(201, 160, 80, 0.32);
padding: 0.8rem 1rem;
text-decoration: none;
border-radius: 3px;
transition: var(--mfl-transition);
text-align: left;
}
.mfl-sillea-action:hover {
background: var(--mfl-bordeaux);
border-color: var(--mfl-bordeaux);
transform: translateX(3px);
}
.mfl-sillea-action:hover .mfl-sillea-action-num,
.mfl-sillea-action:hover .mfl-sillea-action-titre,
.mfl-sillea-action:hover .mfl-sillea-action-sub {
color: var(--mfl-or-clair);
}
.mfl-sillea-action-num {
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: 0.95rem;
color: var(--mfl-or);
letter-spacing: 0.06em;
font-weight: 300;
transition: color 0.3s ease;
}
.mfl-sillea-action-texte {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.mfl-sillea-action-titre {
font-family: var(--mfl-font-titre);
font-size: 0.95rem;
color: var(--mfl-bordeaux);
font-weight: 400;
letter-spacing: 0.005em;
transition: color 0.3s ease;
}
.mfl-sillea-action-sub {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.74rem;
color: var(--mfl-or);
opacity: 0.78;
letter-spacing: 0.01em;
transition: color 0.3s ease;
}
.mfl-sillea-mention {
font-family: var(--mfl-font-corps);
font-style: italic;
font-size: 0.7rem;
color: var(--mfl-bordeaux);
opacity: 0.55;
text-align: center;
line-height: 1.55;
margin: 0;
padding-top: 1rem;
border-top: 1px solid rgba(201, 160, 80, 0.2);
font-weight: 300;
}
/* Mobile · carte adaptée */
@media (max-width: 600px) {
#mfl-sillea-popup {
bottom: 1.2rem;
right: 1.2rem;
}
.mfl-sillea-bubble {
width: 62px;
height: 62px;
}
.mfl-sillea-card {
padding: 1.8rem 1.4rem 1.4rem;
}
}
/* ====== WIDGET "UN PRODUIT VOUS MANQUE" ====== */
.mfl-produit-manque {
background: var(--mfl-bordeaux-fonce);
border-top: 1px solid var(--mfl-or);
}
.mfl-produit-manque-form {
display: flex;
gap: 0.8rem;
flex-wrap: wrap;
max-width: 800px;
margin: 0 auto;
}
@media (max-width: 768px) {
#mfl-alizee-popup { bottom: 1rem; right: 1rem; }
.mfl-alizee-bubble { width: 60px; height: 60px; font-size: 1.6rem; }
.mfl-produit-manque-form { flex-direction: column; }
}
/* ====== TOGGLE LANGUE ====== */
#mfl-lang-toggle {
position: fixed;
top: 1.2rem;
right: 6rem;
z-index: 1001;
background: var(--mfl-ivoire);
padding: 0.4rem 0.8rem;
border-radius: 30px;
border: 1px solid var(--mfl-or);
display: flex;
align-items: center;
gap: 0.3rem;
box-shadow: 0 2px 10px rgba(74, 15, 26, 0.1);
}
.mfl-lang-btn {
background: none;
border: none;
font-family: var(--mfl-font-mention);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.15em;
color: var(--mfl-bordeaux);
cursor: pointer;
padding: 0.2rem 0.4rem;
transition: var(--mfl-transition);
}
.mfl-lang-btn.active {
color: var(--mfl-or);
}
.mfl-lang-btn:hover {
color: var(--mfl-or);
}
.mfl-lang-sep {
color: var(--mfl-or);
font-size: 0.9rem;
}
@media (max-width: 768px) {
#mfl-lang-toggle { display: none; }
}
/* ====== ACCESSIBILITÉ FOCUS ====== */
a:focus, button:focus, input:focus, textarea:focus, select:focus {
outline: 2px solid var(--mfl-or);
outline-offset: 2px;
}
/* Préférence réduire les animations */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
.mfl-hero-slide { transition: opacity 0.3s ease !important; }
}
/* Skip link accessibility */
.mfl-skip-link {
position: absolute;
top: -100px;
left: 1rem;
background: var(--mfl-bordeaux);
color: var(--mfl-or);
padding: 0.8rem 1.5rem;
font-family: var(--mfl-font-corps);
text-decoration: none;
z-index: 9999;
border-radius: 4px;
border: 2px solid var(--mfl-or);
}
.mfl-skip-link:focus {
top: 1rem;
}
/* ====== SECTION 1 · VISUEL CINÉMATOGRAPHIQUE LARGE ====== */
.mfl-section1-visuel {
width: 100%;
padding: 0 2rem;
max-width: 1600px;
margin: 0 auto;
}
.mfl-section1-visuel-wrapper {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 4px;
box-shadow:
0 30px 80px rgba(74, 15, 26, 0.18),
0 10px 30px rgba(74, 15, 26, 0.12),
0 0 0 1px rgba(201, 160, 80, 0.15);
background: var(--mfl-ivoire);
}
/* Image respecte son ratio natif · aucun crop · aucune coupure */
.mfl-section1-visuel-img {
width: 100%;
height: auto;
display: block;
filter: saturate(1.05) contrast(1.02);
}
/* Overlay crème chaud très léger · harmonisation palette Maison */
.mfl-section1-visuel-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background:
linear-gradient(135deg, rgba(245, 234, 214, 0.08) 0%, transparent 30%, transparent 70%, rgba(74, 15, 26, 0.10) 100%),
radial-gradient(ellipse at center, transparent 50%, rgba(74, 15, 26, 0.05) 100%);
pointer-events: none;
mix-blend-mode: overlay;
}
/* Grain photo subtil · casse l'effet IA, signature film */
.mfl-section1-visuel-grain {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
opacity: 0.12;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
}
/* ====== CAPSULES SECTION 1 · BORDURE BORDEAUX + RAYONS DE LUMIÈRE ====== */
.mfl-capsules-grid {
display: grid;
grid-template-columns: repeat(3, minmax(200px, 1fr));
gap: 1.5rem;
max-width: 1100px;
margin: 0 auto;
}
.mfl-capsule {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 1.2rem 2rem;
background:
radial-gradient(ellipse at center, rgba(255, 247, 220, 0.95) 0%, var(--mfl-champagne) 65%, rgba(245, 234, 214, 0.85) 100%);
border: 2px solid #8b1538;
border-radius: 40px;
font-family: var(--mfl-font-corps);
color: var(--mfl-bordeaux);
font-size: 1rem;
letter-spacing: 0.04em;
text-align: center;
text-decoration: none;
cursor: pointer;
overflow: hidden;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.8) inset,
0 -1px 0 rgba(139, 21, 56, 0.15) inset,
0 4px 0 -1px #6b0f28,
0 8px 24px rgba(139, 21, 56, 0.18),
0 2px 8px rgba(139, 21, 56, 0.1);
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.5s ease,
color 0.5s ease;
z-index: 1;
min-height: 60px;
}
/* RAYONS DE LUMIÈRE INTÉRIEURS · effet conic gradient or qui tourne */
.mfl-capsule::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background:
conic-gradient(
from 0deg,
transparent 0deg,
rgba(201, 160, 80, 0.15) 30deg,
transparent 60deg,
rgba(227, 196, 126, 0.18) 120deg,
transparent 150deg,
rgba(201, 160, 80, 0.12) 210deg,
transparent 240deg,
rgba(227, 196, 126, 0.15) 300deg,
transparent 330deg
);
pointer-events: none;
z-index: 0;
animation: capsuleRays 14s linear infinite;
animation-delay: var(--delay, 0s);
opacity: 0.7;
}
/* Centre lumineux doré · cœur de la capsule */
.mfl-capsule::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 200%;
transform: translate(-50%, -50%);
background:
radial-gradient(ellipse, rgba(255, 245, 225, 0.6) 0%, rgba(201, 160, 80, 0.15) 30%, transparent 70%);
pointer-events: none;
z-index: 0;
animation: capsuleCoeurPulse 7s ease-in-out infinite;
animation-delay: var(--delay, 0s);
}
/* Le texte de la capsule passe au-dessus des effets */
.mfl-capsule {
position: relative;
}
.mfl-capsule > * {
position: relative;
z-index: 2;
}
@keyframes capsuleRays {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes capsuleCoeurPulse {
0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.15); }
}
.mfl-capsule:hover {
transform: translateY(-5px) scale(1.04);
border-color: var(--mfl-or);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 -2px 0 rgba(201, 160, 80, 0.2) inset,
0 6px 0 -1px var(--mfl-or-vif),
0 14px 36px rgba(139, 21, 56, 0.25),
0 4px 16px rgba(201, 160, 80, 0.3);
}
.mfl-capsule:hover::before {
opacity: 1;
animation-duration: 6s;
}
.mfl-capsule:hover::after {
opacity: 1;
animation-duration: 2s;
}
@media (max-width: 900px) {
.mfl-capsules-grid {
grid-template-columns: repeat(2, minmax(180px, 1fr));
}
}
@media (max-width: 600px) {
.mfl-capsules-grid {
grid-template-columns: 1fr;
max-width: 350px;
}
}
@media (max-width: 900px) {
.mfl-capsules-grid {
grid-template-columns: repeat(2, minmax(180px, 1fr));
}
}
@media (max-width: 600px) {
.mfl-capsules-grid {
grid-template-columns: 1fr;
max-width: 350px;
}
}
/* ====== SECTION 2 · MIROIR GAUCHE + TEXTE DROITE · ROTATION TRÈS LENTE ====== */
.mfl-section2-miroir {
background: var(--mfl-ivoire);
padding: 2.5rem 2rem 7rem;
position: relative;
overflow: hidden;
}
/* Halo doré subtil derrière le miroir · profondeur cinématique */
.mfl-section2-miroir::before {
content: '';
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(201, 160, 80, 0.10) 0%, rgba(201, 160, 80, 0.03) 30%, transparent 60%);
pointer-events: none;
z-index: 0;
animation: section2HaloBreathe 12s ease-in-out infinite;
}
@keyframes section2HaloBreathe {
0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
/* Grille TROIS colonnes · miroir homme + texte centre + miroir femme */
.mfl-section2-grid {
position: relative;
z-index: 1;
max-width: 1300px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(220px, 300px) 1fr minmax(220px, 300px);
gap: 4rem;
align-items: center;
}
/* Synchronisation des miroirs · gérée par JS via Web Animations API (voir bas de l'index.html) */
/* Placeholder élégant pendant que les visuels femme arrivent */
.mfl-miroir-face.placeholder {
background: linear-gradient(135deg, var(--mfl-bordeaux-fonce), var(--mfl-bordeaux));
display: flex !important;
align-items: center;
justify-content: center;
color: var(--mfl-or-clair);
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: 1rem;
padding: 2rem;
text-align: center;
line-height: 1.6;
border: 2px solid var(--mfl-or);
}
.mfl-miroir-face.placeholder::before {
content: '🌸';
display: block;
font-size: 2rem;
margin-bottom: 1rem;
}
.mfl-miroir-face.placeholder::after {
content: 'Visuel femme noire à venir';
}
/* Scène 3D · perspective pour le miroir */
.mfl-miroir-scene {
perspective: 2200px;
perspective-origin: center center;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
/* Le miroir · forme ovale signature · tourne lentement */
.mfl-miroir {
position: relative;
width: 280px;
height: 420px;
transform-style: preserve-3d;
animation: miroirRotate 22s cubic-bezier(0.5, 0, 0.5, 1) infinite;
background: transparent;
}
@keyframes miroirRotate {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
/* Face 1 (vivante) en avant · Face 2 (fatigue) au dos · FORME OVALE MIROIR · fond ivoire derrière */
.mfl-miroir-face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
background: var(--mfl-ivoire);
border-radius: 50%;
overflow: hidden;
clip-path: ellipse(50% 50% at 50% 50%);
box-shadow:
0 25px 50px rgba(74, 15, 26, 0.25),
0 10px 20px rgba(0, 0, 0, 0.15),
inset 0 0 0 3px rgba(201, 160, 80, 0.6);
}
/* Images zoomées sur le visage à l'intérieur de l'ovale CSS · le portrait remplit le miroir */
.mfl-miroir-face-1 img,
.mfl-miroir-face-2 img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
display: block;
background: transparent;
z-index: 1;
transform: scale(1.35);
transform-origin: center 35%;
}
.mfl-miroir-face-1 {
transform: rotateY(0deg);
}
.mfl-miroir-face-2 {
transform: rotateY(180deg);
}
/* Femme fatiguée · zoom renforcé pour remplir l'ovale comme l'homme vivant */
.mfl-miroir-femme .mfl-miroir-face-2 img {
transform: scale(1.85);
transform-origin: center 38%;
object-position: center 38%;
}
.mfl-miroir-face img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
background: transparent;
}
/* Colonne texte · centrée pour aligner eyebrow + titre + cadre */
.mfl-section2-texte {
text-align: center;
}
/* Citation murmurée */
.mfl-section2-citation {
font-family: var(--mfl-font-titre);
font-style: italic;
color: var(--mfl-bordeaux);
font-size: clamp(1.2rem, 2vw, 1.5rem);
font-weight: 300;
letter-spacing: 0.02em;
margin-top: 2rem;
opacity: 0.9;
}
.mfl-section2-citation em {
color: var(--mfl-or);
font-style: italic;
}
/* ============================================================
CADRE COUTURE · phrase de conversion Maison
Inspiration : carton d'invitation Dior, manifesto Aman
============================================================ */
.mfl-section2-cadre {
position: relative;
margin: 3.5rem auto 0;
padding: 3rem 2.5rem 2.4rem;
max-width: 460px;
background:
linear-gradient(180deg,
rgba(252, 246, 233, 0.7) 0%,
rgba(248, 238, 218, 0.5) 100%);
border: 1px solid rgba(201, 160, 80, 0.32);
border-radius: 3px;
text-align: center;
box-shadow:
0 18px 50px rgba(74, 15, 26, 0.07),
inset 0 0 0 5px rgba(201, 160, 80, 0.05);
}
/* Filet or intérieur · double encadrement couture */
.mfl-section2-cadre::before {
content: '';
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
border: 1px solid rgba(201, 160, 80, 0.16);
border-radius: 2px;
pointer-events: none;
}
/* Ornements or · étoile signature haut et bas */
.mfl-section2-cadre-ornement {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 38px;
height: 24px;
background: var(--mfl-ivoire);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 2;
}
.mfl-section2-cadre-ornement::before {
content: '✦';
font-size: 0.88rem;
color: var(--mfl-or);
line-height: 1;
}
.mfl-section2-cadre-ornement-haut { top: -12px; }
.mfl-section2-cadre-ornement-bas { bottom: -12px; }
/* La phrase de conversion · plus grande, plus présente */
.mfl-section2-cadre-phrase {
font-family: var(--mfl-font-titre);
font-style: italic;
font-size: clamp(1.45rem, 2.4vw, 1.85rem);
font-weight: 300;
color: var(--mfl-bordeaux);
line-height: 1.35;
letter-spacing: 0.015em;
margin: 0 0 1.4rem;
position: relative;
z-index: 1;
}
.mfl-section2-cadre-phrase em {
font-style: italic;
color: var(--mfl-or);
font-weight: 400;
}
/* Signature Maison Forever Lab discrète sous la phrase */
.mfl-section2-cadre-signature {
display: block;
font-family: var(--mfl-font-mention);
font-size: 0.62rem;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--mfl-or);
font-weight: 600;
position: relative;
z-index: 1;
padding-top: 1.2rem;
}
.mfl-section2-cadre-signature::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--mfl-or), transparent);
opacity: 0.6;
}
/* Responsive · empile sur tablette et mobile (miroirs autour du texte) */
@media (max-width: 1024px) {
.mfl-section2-grid {
grid-template-columns: 1fr;
gap: 3rem;
text-align: center;
max-width: 600px;
}
.mfl-section2-texte {
order: 1;
text-align: center;
}
.mfl-miroir-scene:nth-of-type(1) {
order: 2;
}
.mfl-miroir-scene:nth-of-type(3) {
order: 3;
}
.mfl-miroir {
margin: 0 auto;
}
.mfl-section2-miroir::before {
left: 50%;
}
}
@media (max-width: 768px) {
.mfl-section2-miroir {
padding: 5rem 1.5rem;
}
.mfl-miroir {
width: 200px;
height: 300px;
}
.mfl-section2-miroir::before {
width: 350px;
height: 350px;
}
}
/* Réduire les animations si l'utilisateur le préfère (accessibilité) */
@media (prefers-reduced-motion: reduce) {
.mfl-miroir {
animation: none;
}
.mfl-miroir-face-2 {
display: none;
}
}
/* ====================================================================
INVITATION MAISON · CARTON ÉDITORIAL PRÉ-ÉDITION
Niveau Maison d'édition · zéro mécanique marketing · 30 mai 2026
==================================================================== */
.mfl-invitation-section {
background: var(--mfl-bordeaux, #4A1F24);
padding: 9rem 1.5rem 9rem;
text-align: center;
position: relative;
overflow: hidden;
}
/* Voile lumière dorée très subtile · diffuse, pas concentrée */
.mfl-invitation-section::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 70%;
height: 90%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center,
rgba(184, 154, 104, 0.06) 0%,
rgba(184, 154, 104, 0.02) 40%,
transparent 70%);
pointer-events: none;
z-index: 0;
}
.mfl-invitation-container {
position: relative;
z-index: 1;
max-width: 640px;
margin: 0 auto;
}
/* Eyebrow · lettres espacées · ton bronze chaud, pas or vif */
.mfl-invitation-eyebrow {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.45em;
text-transform: uppercase;
color: var(--mfl-or-vieilli, #B89A68);
opacity: 0.85;
margin-bottom: 2.5rem;
}
/* Titre · Cormorant italique, fin, généreux */
.mfl-invitation-titre {
font-family: 'Cormorant Garamond', 'Didot', serif;
font-weight: 300;
font-style: italic;
font-size: clamp(2.2rem, 4.5vw, 3.6rem);
line-height: 1.15;
letter-spacing: 0.01em;
color: var(--mfl-or-vieilli, #B89A68);
margin: 0 0 2.5rem;
}
/* Phrase éditoriale · ivoire chaud, italique léger */
.mfl-invitation-phrase {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
line-height: 1.7;
color: rgba(246, 241, 232, 0.78);
margin: 0 auto 1.5rem;
max-width: 480px;
}
/* Édition offerte · plus discrète, italique champagne */
.mfl-invitation-edition {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
line-height: 1.6;
color: rgba(184, 154, 104, 0.75);
letter-spacing: 0.02em;
margin: 0 auto 3.5rem;
}
.mfl-invitation-edition em {
font-style: italic;
}
/* Form · carton d'invitation, pas formulaire web */
.mfl-invitation-form {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1.25rem;
max-width: 440px;
margin: 0 auto 2.5rem;
}
/* Champ email · papier ivoire, contour ultra fin, hauteur généreuse */
.mfl-invitation-input {
background: rgba(246, 241, 232, 0.96);
border: none;
border-bottom: 1px solid rgba(184, 154, 104, 0.4);
border-radius: 0;
padding: 1.4rem 1.5rem;
font-family: 'Cormorant Garamond', serif;
font-size: 1.05rem;
font-style: italic;
color: var(--mfl-noir-brun, #1E1715);
letter-spacing: 0.02em;
text-align: center;
transition: border-color 0.6s ease, background 0.6s ease;
outline: none;
-webkit-appearance: none;
appearance: none;
}
.mfl-invitation-input::placeholder {
color: rgba(74, 31, 36, 0.45);
font-style: italic;
letter-spacing: 0.02em;
}
.mfl-invitation-input:focus {
border-bottom-color: var(--mfl-or-vieilli, #B89A68);
background: rgba(246, 241, 232, 1);
}
/* CTA · mat, presque sans glow, pas marketing */
.mfl-invitation-cta {
background: transparent;
color: var(--mfl-or-vieilli, #B89A68);
border: 1px solid rgba(184, 154, 104, 0.5);
border-radius: 0;
padding: 1.4rem 2.5rem;
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0.35em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.7s ease;
box-shadow: none;
}
.mfl-invitation-cta:hover {
background: rgba(184, 154, 104, 0.08);
border-color: rgba(184, 154, 104, 0.75);
color: var(--mfl-or-vieilli, #B89A68);
box-shadow: 0 0 0 1px rgba(184, 154, 104, 0.1);
}
/* Mention bas · quasi invisible, ton confidentiel */
.mfl-invitation-mention {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.78rem;
letter-spacing: 0.06em;
color: rgba(246, 241, 232, 0.32);
margin: 0;
}
/* Responsive · mobile */
@media (max-width: 640px) {
.mfl-invitation-section {
padding: 6rem 1.25rem;
}
.mfl-invitation-eyebrow {
font-size: 0.65rem;
letter-spacing: 0.35em;
margin-bottom: 2rem;
}
.mfl-invitation-titre {
font-size: 2rem;
margin-bottom: 2rem;
}
.mfl-invitation-edition {
margin-bottom: 2.5rem;
}
.mfl-invitation-input,
.mfl-invitation-cta {
padding: 1.2rem 1.5rem;
}
.mfl-invitation-cta {
letter-spacing: 0.25em;
}
}