/* ====================================================================
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 grain · DÉSACTIVÉE pour rendu lisse */
.mfl-nm-direction::before {
display: none;
}
.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;
}
/* ===== ANCIENNES SECTIONS BORDEAUX · NEUTRALISÉES ===== */
.mfl-nm-manifeste,
.mfl-nm-direction {
display: none;
}
/* ====================================================================
NIVEAU AUGUSTINUS BADER · HERMÈS · DIPTYQUE
Sections en LUMIÈRE · pas un seul ornement chargé
Drop cap · numérotation romaine · typographie monumentale
==================================================================== */
/* ====== SCEAU MAISON · médaillon central isolé ====== */
.mfl-nm-sceau {
display: block;
margin: 5rem auto 0;
width: 130px;
height: auto;
opacity: 0;
filter: brightness(1.04) contrast(1.04) drop-shadow(0 4px 12px rgba(74, 31, 36, 0.10));
animation: mflSceauReveal 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
}
/* ====== SCEAU TYPO PAYSAGE · monogramme + MAISON FOREVER LAB ====== */
.mfl-nm-sceau-typo {
display: block;
margin: 5rem auto 0;
width: 380px;
height: auto;
max-width: 90%;
opacity: 0;
/* Léger lift sans ombre marquée · le sceau s'inscrit sur le papier */
filter: brightness(1.03) contrast(1.03);
animation: mflSceauReveal 2.6s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
}
@media (max-width: 640px) {
.mfl-nm-sceau-typo {
width: 280px;
margin-top: 3.5rem;
}
}
@keyframes mflSceauReveal {
0% { opacity: 0; transform: translateY(12px) scale(0.94); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 640px) {
.mfl-nm-sceau {
width: 110px;
margin-top: 3.5rem;
}
}
/* ====== SECTION MANIFESTE · IVOIRE CHAUD ====== */
.mfl-nm-manifeste-lumiere {
background: #F6F1E8;
padding: 11rem 2rem;
position: relative;
overflow: hidden;
}
/* ====== SECTION DIRECTION · CHAMPAGNE SOFT ====== */
.mfl-nm-direction-lumiere {
background: #F1E9D8;
padding: 11rem 2rem;
position: relative;
overflow: hidden;
}
/* Inner container avec marge généreuse · luxe respire */
.mfl-nm-lumiere-inner {
max-width: 720px;
margin: 0 auto;
position: relative;
}
/* ====== NUMÉRO ROMAIN GÉANT · signature éditeur ====== */
.mfl-nm-numero-romain {
display: block;
font-family: 'Cormorant Garamond', 'Didot', serif;
font-weight: 300;
font-style: italic;
font-size: 4rem;
line-height: 1;
color: rgba(184, 154, 104, 0.55);
margin: 0 0 3.5rem;
letter-spacing: 0.04em;
text-align: center;
}
/* ====== EYEBROW LIGHT · lettres très espacées, comme un index ====== */
.mfl-nm-eyebrow-light {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.55em;
text-transform: uppercase;
color: var(--mfl-bronze-chaud, #8A6A4A);
margin: 0 0 2rem;
text-align: center;
font-weight: 400;
}
/* ====== FILET COURT · signature subtile sous l'eyebrow ====== */
.mfl-nm-filet-court {
display: block;
width: 48px;
height: 1px;
background: var(--mfl-or-vieilli, #B89A68);
opacity: 0.55;
margin: 0 auto 4rem;
}
/* ====== TITRE MONUMENTAL · le luxe par la taille typographique ====== */
.mfl-nm-quote-monumental {
font-family: 'Cormorant Garamond', 'Didot', serif;
font-weight: 300;
font-size: clamp(2.8rem, 5.5vw, 4.6rem);
line-height: 1.18;
color: #3D1A20;
margin: 0 0 4.5rem;
letter-spacing: 0.008em;
text-align: center;
}
.mfl-nm-quote-monumental em {
font-style: italic;
color: #3D1A20;
}
/* ====== DROP CAP · vraie initiale éditoriale ====== */
.mfl-nm-dropcap {
font-family: 'Cormorant Garamond', 'Didot', serif;
font-weight: 400;
font-style: normal;
/* Reste dans le flux pour ne pas casser l'alignement */
color: var(--mfl-or-vieilli, #B89A68);
font-size: 1.05em;
}
.mfl-nm-dropcap-paragraphe {
float: left;
font-family: 'Cormorant Garamond', 'Didot', serif;
font-weight: 400;
font-size: 3.8em;
line-height: 0.85;
color: var(--mfl-or-vieilli, #B89A68);
margin: 0.05em 0.15em 0 0;
padding: 0;
}
/* ====== PARAGRAPHE PREMIUM · espace, justesse, lecture longue ====== */
.mfl-nm-paragraphe-light {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1.12rem, 1.4vw, 1.32rem);
line-height: 1.95;
color: #2A1116;
margin: 0 0 2.5rem;
max-width: 620px;
margin-left: auto;
margin-right: auto;
text-align: center;
letter-spacing: 0.005em;
}
.mfl-nm-paragraphe-light em {
font-style: italic;
color: #6B3636;
}
/* ====== CTA LIGHT · sobre, sans tape-à-l'œil ====== */
.mfl-cta-light {
display: inline-block;
margin: 3rem auto 0;
padding: 1.2rem 3rem;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: #3D1A20;
background: transparent;
border: 1px solid #3D1A20;
text-decoration: none;
transition: all 0.6s ease;
text-align: center;
}
.mfl-cta-light:hover {
background: #3D1A20;
color: #F6F1E8;
}
/* Container pour centrer le CTA */
.mfl-nm-direction-lumiere .mfl-nm-lumiere-inner {
text-align: center;
}
/* Responsive sections lumière */
@media (max-width: 720px) {
.mfl-nm-manifeste-lumiere,
.mfl-nm-direction-lumiere {
padding: 7rem 1.5rem;
}
.mfl-nm-numero-romain {
font-size: 3rem;
margin-bottom: 2.5rem;
}
.mfl-nm-quote-monumental {
font-size: 2.2rem;
margin-bottom: 3rem;
}
.mfl-nm-dropcap-paragraphe {
font-size: 3em;
}
}
/* Halo lumineux central · UN seul, très subtil */
.mfl-nm-manifeste-voile,
.mfl-nm-direction-voile {
position: absolute;
top: 50%;
left: 50%;
width: 65%;
height: 90%;
transform: translate(-50%, -50%);
background: radial-gradient(
ellipse at center,
rgba(220, 188, 134, 0.07) 0%,
rgba(184, 154, 104, 0.025) 45%,
transparent 75%
);
pointer-events: none;
z-index: 0;
}
.mfl-nm-manifeste-inner,
.mfl-nm-direction-inner {
position: relative;
z-index: 2;
}
/* Désactive les anciens éléments couture · au cas où ils traîneraient */
.mfl-nm-couture-ornement,
.mfl-nm-couture-filet,
.mfl-nm-couture-monogramme {
display: none !important;
}
/* 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;
}
/* ===== EFFETS LUMINEUX SUR LE VISUEL · sans aucune déformation de l'image ===== */
/* L'image RESTE NETTE · les effets viennent en surcouche transparente */
.mfl-nm-vision-image {
filter: none;
/* Saturation très légèrement renforcée pour profondeur cinéma */
filter: saturate(1.05) contrast(1.02);
}
/* Surcouche 1 · ONDE LUMINEUSE · rayon doré qui glisse de gauche à droite */
.mfl-nm-vision-onde {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
115deg,
transparent 0%,
transparent 35%,
rgba(255, 226, 156, 0.10) 50%,
transparent 65%,
transparent 100%
);
background-size: 250% 100%;
mix-blend-mode: screen;
animation: mflOndeLuminale 14s ease-in-out infinite;
}
@keyframes mflOndeLuminale {
0% { background-position: 130% 0; }
100% { background-position: -130% 0; }
}
/* Surcouche 2 · PARTICULES DORÉES · poussières de lumière qui scintillent */
.mfl-nm-vision-particules {
position: absolute;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(circle at 18% 32%, rgba(255, 226, 156, 0.85) 0.5px, transparent 1.5px),
radial-gradient(circle at 72% 18%, rgba(255, 220, 140, 0.7) 0.4px, transparent 1.4px),
radial-gradient(circle at 88% 65%, rgba(255, 230, 170, 0.6) 0.5px, transparent 1.6px),
radial-gradient(circle at 32% 78%, rgba(255, 226, 156, 0.5) 0.4px, transparent 1.4px),
radial-gradient(circle at 56% 48%, rgba(255, 220, 140, 0.4) 0.3px, transparent 1.2px),
radial-gradient(circle at 8% 88%, rgba(255, 230, 170, 0.6) 0.4px, transparent 1.4px),
radial-gradient(circle at 92% 22%, rgba(255, 226, 156, 0.7) 0.5px, transparent 1.5px),
radial-gradient(circle at 44% 12%, rgba(255, 220, 140, 0.45) 0.3px, transparent 1.2px),
radial-gradient(circle at 68% 84%, rgba(255, 230, 170, 0.55) 0.4px, transparent 1.4px),
radial-gradient(circle at 22% 56%, rgba(255, 226, 156, 0.5) 0.4px, transparent 1.3px);
background-size: 100% 100%;
mix-blend-mode: screen;
animation: mflParticulesScintille 6s ease-in-out infinite alternate;
}
@keyframes mflParticulesScintille {
0%, 100% { opacity: 0.55; }
50% { opacity: 0.95; }
}
/* Surcouche 3 · LUMIÈRE DORÉE qui pulse depuis le centre · halo cinéma */
.mfl-nm-vision-lumiere {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(
ellipse 65% 50% at 50% 40%,
rgba(255, 226, 156, 0.06) 0%,
rgba(255, 220, 140, 0.02) 35%,
transparent 65%
);
mix-blend-mode: screen;
animation: mflLumiereCinema 12s ease-in-out infinite;
}
@keyframes mflLumiereCinema {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.04); }
}
/* ===== 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 {
display: inline-block;
font-family: var(--mfl-font-mention);
font-size: 0.65rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--mfl-or-vieilli, #B89A68);
font-weight: 600;
opacity: 1;
margin-top: 1.25rem;
padding: 0.65rem 1.25rem;
border: 1px solid rgba(184, 154, 104, 0.5);
border-radius: 2px;
background: rgba(184, 154, 104, 0.05);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 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 {
color: #F6F1E8;
background: var(--mfl-bordeaux, #3D1A20);
border-color: var(--mfl-bordeaux, #3D1A20);
letter-spacing: 0.32em;
box-shadow: 0 6px 22px rgba(61, 26, 32, 0.22);
}
/* ===== 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);
}
/* === Lien spécial vers Morgan · ambiance bordeaux structuré, différencié des autres === */
.mfl-sillea-action-morgan {
background: linear-gradient(135deg, rgba(74, 15, 26, 0.06) 0%, rgba(184, 154, 104, 0.1) 100%);
border: 1px solid rgba(184, 154, 104, 0.55);
position: relative;
}
.mfl-sillea-action-morgan::before {
content: '◇';
position: absolute;
top: 50%;
right: 0.85rem;
transform: translateY(-50%);
color: rgba(184, 154, 104, 0.85);
font-size: 0.85rem;
transition: all 0.4s ease;
}
.mfl-sillea-action-morgan:hover {
background: linear-gradient(135deg, #3D1A20 0%, #2c0810 100%);
border-color: #B89A68;
}
.mfl-sillea-action-morgan:hover::before {
color: #E3C47E;
transform: translateY(-50%) translateX(2px);
}
.mfl-sillea-action-morgan:hover .mfl-sillea-action-num {
color: #E3C47E;
}
.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;
}
}
/* ====================================================================
LA GAMME · Niveau ORIZON · 31 mai 2026 · 02h30
Cohérence absolue avec Notre Maison · sobriété éditoriale
==================================================================== */
/* === HERO LA GAMME · ivoire chaud · même typo monumentale que Notre Maison === */
.mfl-gamme-hero {
background: var(--mfl-ivoire-chaud, #F6F1E8);
padding: 11rem 1.5rem 7rem;
text-align: center;
position: relative;
overflow: hidden;
}
.mfl-gamme-hero::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 65%;
height: 75%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center,
rgba(184, 154, 104, 0.08) 0%,
rgba(184, 154, 104, 0.03) 45%,
transparent 70%);
pointer-events: none;
z-index: 0;
animation: nmHaloRespire 12s ease-in-out infinite;
}
.mfl-gamme-hero-inner {
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
}
/* CTA hero ultra discret · outline or vieilli */
.mfl-gamme-hero-cta {
display: inline-block;
margin-top: 3.5rem;
padding: 1.2rem 2.8rem;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: #3D1A20;
background: transparent;
border: 1px solid rgba(61, 26, 32, 0.4);
text-decoration: none;
transition: all 0.6s ease;
}
.mfl-gamme-hero-cta:hover {
background: #3D1A20;
color: var(--mfl-ivoire-chaud, #F6F1E8);
border-color: #3D1A20;
}
/* === SECTIONS LUMIÈRE · même structure que Notre Maison === */
.mfl-gamme-ecosysteme {
background: var(--mfl-ivoire-chaud, #F6F1E8);
padding: 9rem 2rem;
}
.mfl-gamme-soutiens {
background: #F1E9D8;
padding: 9rem 2rem;
}
.mfl-gamme-prose {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
/* === LE CŒUR DE LA MAISON · section avec visuel cinéma === */
.mfl-gamme-coeur {
background: var(--mfl-ivoire-chaud, #F6F1E8);
padding: 9rem 1.5rem;
position: relative;
}
.mfl-gamme-coeur-header {
max-width: 720px;
margin: 0 auto 5rem;
text-align: center;
}
/* === VISUEL COMPOSITION PRODUITS · pleine largeur respirante === */
.mfl-gamme-visuel {
margin: 0 auto 6rem;
max-width: 1640px;
position: relative;
}
.mfl-gamme-visuel-frame {
position: relative;
overflow: hidden;
border-radius: 4px;
box-shadow: 0 30px 80px rgba(30, 23, 21, 0.18);
/* Micro mouvement de caméra · imperceptible · Apple style */
animation: mflGammeCameraSlow 28s ease-in-out infinite alternate;
}
@keyframes mflGammeCameraSlow {
0% { transform: scale(1); }
100% { transform: scale(1.025); }
}
.mfl-gamme-visuel-image {
width: 100%;
height: auto;
display: block;
}
/* Halo lumineux respirant au-dessus du logo central */
.mfl-gamme-visuel-halo {
position: absolute;
top: 25%;
left: 50%;
width: 35%;
height: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center,
rgba(255, 226, 156, 0.16) 0%,
rgba(255, 220, 140, 0.05) 35%,
transparent 70%);
mix-blend-mode: screen;
pointer-events: none;
animation: mflGammeHaloRespire 10s ease-in-out infinite;
}
@keyframes mflGammeHaloRespire {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
/* Particules dorées microscopiques · zéro paillettes · cinéma silencieux */
.mfl-gamme-visuel-particules {
position: absolute;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(circle at 12% 22%, rgba(255, 226, 156, 0.75) 0.4px, transparent 1.5px),
radial-gradient(circle at 78% 14%, rgba(255, 220, 140, 0.6) 0.4px, transparent 1.4px),
radial-gradient(circle at 88% 68%, rgba(255, 230, 170, 0.55) 0.5px, transparent 1.6px),
radial-gradient(circle at 24% 78%, rgba(255, 226, 156, 0.5) 0.4px, transparent 1.4px),
radial-gradient(circle at 56% 38%, rgba(255, 220, 140, 0.4) 0.3px, transparent 1.2px);
mix-blend-mode: screen;
animation: mflGammeParticulesScintille 8s ease-in-out infinite alternate;
}
@keyframes mflGammeParticulesScintille {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.9; }
}
/* === FILET BRILLANT · un seul trait fin · cadence équilibrée · lumière calibrée === */
.mfl-gamme-visuel-filet-brillant {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
mix-blend-mode: screen;
opacity: 0.78;
}
.mfl-gamme-visuel-filet-brillant::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
115deg,
transparent 0%,
transparent 49%,
rgba(255, 232, 178, 0.0) 49.3%,
rgba(255, 244, 210, 0.5) 49.9%,
rgba(255, 250, 220, 0.62) 50%,
rgba(255, 244, 210, 0.5) 50.1%,
rgba(255, 232, 178, 0.0) 50.7%,
transparent 51%,
transparent 100%
);
filter: blur(1.5px);
transform: translateX(-60%) translateY(-10%);
animation: mflGammeFiletGlisse 30s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes mflGammeFiletGlisse {
0% {
transform: translateX(-70%) translateY(-15%);
opacity: 0;
}
25% {
opacity: 0.75;
}
50% {
opacity: 0.9;
}
75% {
opacity: 0.75;
}
100% {
transform: translateX(70%) translateY(15%);
opacity: 0;
}
}
/* Respect du prefers-reduced-motion · accessibilité */
@media (prefers-reduced-motion: reduce) {
.mfl-gamme-visuel-filet-brillant::before,
.mfl-gamme-visuel-filet-brillant-secondaire::before {
animation: none;
opacity: 0;
}
.mfl-gamme-visuel-frame {
animation: none;
}
}
/* === 3 PIÈCES SOUS LE VISUEL · CTA éditoriaux silencieux === */
.mfl-gamme-pieces {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid rgba(184, 154, 104, 0.18);
}
.mfl-gamme-piece {
display: block;
padding: 3.5rem 2.5rem;
text-decoration: none;
border-right: 1px solid rgba(184, 154, 104, 0.18);
background: var(--mfl-ivoire-chaud, #F6F1E8);
transition: background 0.7s ease;
position: relative;
}
.mfl-gamme-piece:last-child {
border-right: none;
}
.mfl-gamme-piece:hover {
background: rgba(184, 154, 104, 0.05);
}
.mfl-gamme-piece-numero {
display: block;
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-style: italic;
font-size: 1.6rem;
color: var(--mfl-or-vieilli, #B89A68);
letter-spacing: 0.05em;
margin-bottom: 1.5rem;
}
.mfl-gamme-piece-titre {
font-family: 'Cormorant Garamond', 'Didot', serif;
font-weight: 400;
font-size: 1.8rem;
line-height: 1.2;
color: #3D1A20;
margin: 0 0 0.5rem;
letter-spacing: 0.005em;
}
.mfl-gamme-piece-sous {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: 1.05rem;
color: var(--mfl-bronze-chaud, #8A6A4A);
margin: 0 0 1.5rem;
}
.mfl-gamme-piece-desc {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1.05rem;
line-height: 1.75;
color: var(--mfl-noir-brun, #1E1715);
margin: 0 0 2rem;
}
.mfl-gamme-piece-prix {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--mfl-or-vieilli, #B89A68);
margin-bottom: 2rem;
}
.mfl-gamme-piece-lien {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #3D1A20;
border-bottom: 1px solid rgba(61, 26, 32, 0.3);
padding-bottom: 0.3rem;
transition: border-color 0.5s ease, color 0.5s ease;
}
.mfl-gamme-piece:hover .mfl-gamme-piece-lien {
border-bottom-color: var(--mfl-or-vieilli, #B89A68);
color: var(--mfl-or-vieilli, #B89A68);
}
/* === RESPIRATION ÉMOTIONNELLE · visuel typo pleine largeur === */
.mfl-gamme-respiration {
width: 100%;
background: #1A0709;
overflow: hidden;
position: relative;
}
.mfl-gamme-respiration-frame {
margin: 0;
width: 100%;
position: relative;
overflow: hidden;
/* Micro mouvement de caméra encore plus lent · cinéma respirant */
animation: mflGammeCameraSlow 30s ease-in-out infinite alternate;
}
.mfl-gamme-respiration-image {
width: 100%;
height: auto;
display: block;
}
/* Reflet doré qui passe une fois toutes les 18s · imperceptible */
.mfl-gamme-respiration-reflet {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
105deg,
transparent 0%,
transparent 38%,
rgba(255, 226, 156, 0.10) 50%,
transparent 62%,
transparent 100%
);
background-size: 250% 100%;
mix-blend-mode: screen;
animation: mflGammeRefletLent 18s ease-in-out infinite;
}
@keyframes mflGammeRefletLent {
0%, 75% { background-position: 130% 0; }
100% { background-position: -130% 0; }
}
/* === SOUTIENS · grille minimal niveau Aesop === */
.mfl-gamme-soutiens-grid {
max-width: 1240px;
margin: 4rem auto 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid rgba(184, 154, 104, 0.2);
border-left: 1px solid rgba(184, 154, 104, 0.2);
}
.mfl-gamme-soutien {
padding: 3.5rem 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.6s ease;
}
.mfl-gamme-soutien:hover {
background: rgba(184, 154, 104, 0.05);
}
.mfl-gamme-soutien-numero {
display: block;
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-style: italic;
font-size: 1.4rem;
color: var(--mfl-or-vieilli, #B89A68);
margin-bottom: 1.25rem;
letter-spacing: 0.05em;
}
.mfl-gamme-soutien-titre {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1.4rem;
line-height: 1.3;
color: #3D1A20;
margin: 0 0 1.25rem;
letter-spacing: 0.005em;
}
.mfl-gamme-soutien-texte {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1.05rem;
line-height: 1.75;
color: var(--mfl-noir-brun, #1E1715);
margin: 0 0 1.75rem;
}
/* === LIEN ÉDITORIAL · vers nos-affiliations.html#ancre === */
.mfl-gamme-soutien-lien {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--mfl-or-vieilli, #B89A68);
text-decoration: none;
padding-bottom: 4px;
border-bottom: 1px solid rgba(184, 154, 104, 0.35);
transition: color 0.4s ease, border-color 0.4s ease, letter-spacing 0.4s ease;
}
.mfl-gamme-soutien-lien:hover,
.mfl-gamme-soutien-lien:focus-visible {
color: var(--mfl-bordeaux, #3D1A20);
border-color: rgba(61, 26, 32, 0.55);
letter-spacing: 0.26em;
}
.mfl-gamme-soutiens-cta {
text-align: center;
margin-top: 4.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
.mfl-cta-light-secondary {
opacity: 0.7;
font-size: 0.8rem;
}
.mfl-cta-light-secondary:hover,
.mfl-cta-light-secondary:focus-visible {
opacity: 1;
}
/* === TRANSPARENCE · bordeaux pur souverain === */
.mfl-gamme-transparence {
background: #3D1A20;
padding: 9rem 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.mfl-gamme-transparence::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 70%;
height: 90%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center,
rgba(220, 188, 134, 0.08) 0%,
rgba(184, 154, 104, 0.03) 50%,
transparent 75%);
pointer-events: none;
z-index: 0;
animation: nmHaloRespire 14s ease-in-out infinite;
}
.mfl-gamme-prose-dark {
position: relative;
z-index: 1;
max-width: 720px;
margin: 0 auto;
}
.mfl-nm-eyebrow-dark {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.55em;
text-transform: uppercase;
color: var(--mfl-or-vieilli, #B89A68);
opacity: 0.9;
margin-bottom: 2rem;
}
.mfl-nm-filet-dark {
display: block;
width: 48px;
height: 1px;
background: var(--mfl-or-vieilli, #B89A68);
opacity: 0.55;
margin: 0 auto 3rem;
}
.mfl-gamme-transparence-texte {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1.1rem, 1.4vw, 1.3rem);
line-height: 1.95;
color: rgba(246, 241, 232, 0.88);
margin: 0 auto 1.5rem;
max-width: 620px;
font-style: italic;
}
/* CTA bordeaux · outline or vieilli */
.mfl-cta-light-dark {
display: inline-block;
margin: 3rem auto 0;
padding: 1.2rem 3rem;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--mfl-or-vieilli, #B89A68);
background: transparent;
border: 1px solid rgba(184, 154, 104, 0.5);
text-decoration: none;
transition: all 0.6s ease;
}
.mfl-cta-light-dark:hover {
background: rgba(184, 154, 104, 0.08);
border-color: var(--mfl-or-vieilli, #B89A68);
}
/* === RESPONSIVE LA GAMME === */
@media (max-width: 900px) {
.mfl-gamme-pieces,
.mfl-gamme-soutiens-grid {
grid-template-columns: 1fr;
}
.mfl-gamme-piece {
border-right: none;
border-bottom: 1px solid rgba(184, 154, 104, 0.18);
}
.mfl-gamme-piece:last-child {
border-bottom: none;
}
.mfl-gamme-coeur,
.mfl-gamme-ecosysteme,
.mfl-gamme-soutiens,
.mfl-gamme-transparence {
padding: 6rem 1.25rem;
}
.mfl-gamme-hero {
padding: 7rem 1.25rem 5rem;
}
}
/* ════════════════════════════════════════════════════════════════════════ */
/* PAGE LE CERCLE MAISON v2 · institutionnel premium · 31 mai 2026 */
/* ════════════════════════════════════════════════════════════════════════ */
/* === 1 · HERO D'AUTORITÉ · architecture lumineuse dorée (image complète) === */
.mfl-cercle-hero {
position: relative;
display: block;
text-align: center;
overflow: hidden;
background: #2c0810; /* bordeaux profond de secours */
padding: 0;
width: 100%;
}
.mfl-cercle-hero-fond {
position: relative;
width: 100%;
z-index: 0;
}
.mfl-cercle-hero-image {
display: block;
width: 100%;
height: auto;
object-fit: contain;
opacity: 1;
/* Micro mouvement caméra · imperceptible */
animation: mflCercleHeroPan 32s ease-in-out infinite alternate;
}
@keyframes mflCercleHeroPan {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.04) translate(-0.5%, -0.5%); }
}
.mfl-cercle-hero-halo {
/* Désactivé : l'image contient déjà son propre halo doré natif */
display: none;
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(ellipse at center,
rgba(255, 226, 156, 0.18) 0%,
rgba(255, 220, 140, 0.08) 30%,
transparent 60%);
mix-blend-mode: screen;
pointer-events: none;
animation: mflCercleHaloRespire 14s ease-in-out infinite;
}
@keyframes mflCercleHaloRespire {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
.mfl-cercle-hero-lignes {
/* Désactivé : la constellation est déjà dans l'image */
display: none;
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0.85;
mix-blend-mode: screen;
}
.mfl-cercle-svg-lignes {
width: 100%;
height: 100%;
animation: mflCercleLignesRotate 90s linear infinite;
transform-origin: center;
}
@keyframes mflCercleLignesRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.mfl-cercle-hero-particules {
/* Désactivé : les particules dorées sont déjà dans l'image */
display: none;
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background-image:
radial-gradient(circle at 18% 28%, rgba(255, 226, 156, 0.7) 0.5px, transparent 1.5px),
radial-gradient(circle at 72% 18%, rgba(255, 220, 140, 0.55) 0.4px, transparent 1.4px),
radial-gradient(circle at 82% 62%, rgba(255, 230, 170, 0.6) 0.5px, transparent 1.6px),
radial-gradient(circle at 28% 72%, rgba(255, 226, 156, 0.5) 0.4px, transparent 1.4px),
radial-gradient(circle at 50% 88%, rgba(255, 220, 140, 0.45) 0.4px, transparent 1.3px),
radial-gradient(circle at 60% 32%, rgba(255, 230, 170, 0.4) 0.3px, transparent 1.2px);
mix-blend-mode: screen;
animation: mflCercleParticulesScintille 10s ease-in-out infinite alternate;
}
@keyframes mflCercleParticulesScintille {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
.mfl-cercle-hero-inner {
position: relative;
z-index: 10;
max-width: 840px;
padding: 2rem 1rem;
}
/* === Mode IMAGE-FAIT-TOUT · texte HTML masqué visuellement, lisible pour Google === */
.mfl-cercle-hero-inner-sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* === Section Hero Actions · CTAs + Badges sous l'image Hero === */
.mfl-cercle-hero-actions {
background: linear-gradient(180deg, #1a0508 0%, #2c0810 50%, #3D1A20 100%);
padding: 5.5rem 1.5rem 5rem;
position: relative;
overflow: hidden;
}
/* === COUPURE CHOC · trait lumineux doré entre image Hero et CTAs === */
/* Filet principal · large et lumineux, dégradé du transparent à or vif */
.mfl-cercle-hero-actions::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 65%;
max-width: 720px;
height: 1.5px;
background: linear-gradient(to right,
transparent 0%,
rgba(184, 154, 104, 0.3) 15%,
#B89A68 35%,
#E3C47E 50%,
#B89A68 65%,
rgba(184, 154, 104, 0.3) 85%,
transparent 100%);
opacity: 1;
box-shadow:
0 0 8px rgba(227, 196, 126, 0.85),
0 0 18px rgba(227, 196, 126, 0.45),
0 0 40px rgba(184, 154, 104, 0.3);
animation: mflCercleCoupureChoc 6s ease-in-out infinite;
}
/* Halo lumineux qui se diffuse au-dessus et en-dessous du filet */
.mfl-cercle-hero-actions::after {
content: '';
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
width: 50%;
max-width: 560px;
height: 60px;
background: radial-gradient(ellipse at center,
rgba(227, 196, 126, 0.22) 0%,
rgba(184, 154, 104, 0.1) 30%,
transparent 70%);
mix-blend-mode: screen;
pointer-events: none;
animation: mflCercleCoupureHalo 6s ease-in-out infinite;
}
@keyframes mflCercleCoupureChoc {
0%, 100% {
box-shadow:
0 0 6px rgba(227, 196, 126, 0.7),
0 0 14px rgba(227, 196, 126, 0.35),
0 0 32px rgba(184, 154, 104, 0.22);
}
50% {
box-shadow:
0 0 12px rgba(255, 232, 178, 1),
0 0 26px rgba(227, 196, 126, 0.65),
0 0 56px rgba(184, 154, 104, 0.4);
}
}
@keyframes mflCercleCoupureHalo {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
.mfl-cercle-hero-actions-inner {
max-width: 1140px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 3.5rem;
}
.mfl-cercle-hero-eyebrow {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.36em;
text-transform: uppercase;
color: #E3C47E;
margin-bottom: 3rem;
opacity: 0.92;
}
.mfl-cercle-hero-titre {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(3rem, 6.4vw, 5.4rem);
line-height: 1.05;
color: #F6F1E8;
margin: 0 0 2.5rem;
letter-spacing: -0.005em;
}
.mfl-cercle-hero-titre em {
font-style: italic;
font-weight: 300;
color: #E3C47E;
display: block;
margin-top: 0.4rem;
}
.mfl-cercle-hero-filet {
display: block;
width: 62px;
height: 1px;
margin: 0 auto 2.5rem;
background: linear-gradient(to right, transparent, #B89A68, transparent);
opacity: 0.7;
}
.mfl-cercle-hero-baseline {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1.05rem, 1.8vw, 1.3rem);
line-height: 1.7;
color: rgba(246, 241, 232, 0.88);
margin: 0 0 3.5rem;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
.mfl-cercle-hero-baseline em {
color: #E3C47E;
font-style: italic;
display: block;
margin-top: 0.4rem;
}
.mfl-cercle-hero-ctas {
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 1rem;
}
.mfl-cercle-cta-or,
.mfl-cercle-cta-or-secondaire {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: 'Inter', sans-serif;
font-weight: 500;
text-decoration: none;
padding: 1.15rem 2.5rem 1.05rem;
border-radius: 2px;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 340px;
max-width: 380px;
}
.mfl-cercle-cta-label {
font-size: 0.86rem;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 600;
line-height: 1.25;
text-align: center;
}
.mfl-cercle-cta-sublabel {
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 400;
opacity: 0.78;
line-height: 1.2;
text-align: center;
}
.mfl-cercle-cta-or {
background: linear-gradient(135deg, #B89A68 0%, #E3C47E 50%, #B89A68 100%);
color: #2c0810;
border: 1px solid #B89A68;
box-shadow: 0 4px 20px rgba(184, 154, 104, 0.3);
}
.mfl-cercle-cta-or:hover,
.mfl-cercle-cta-or:focus-visible {
background: linear-gradient(135deg, #E3C47E 0%, #FFF4D6 50%, #E3C47E 100%);
box-shadow: 0 6px 28px rgba(227, 196, 126, 0.45);
transform: translateY(-2px);
}
.mfl-cercle-cta-or:hover .mfl-cercle-cta-label,
.mfl-cercle-cta-or:focus-visible .mfl-cercle-cta-label {
letter-spacing: 0.28em;
}
.mfl-cercle-cta-or-secondaire {
background: transparent;
color: #E3C47E;
border: 1px solid rgba(227, 196, 126, 0.5);
}
.mfl-cercle-cta-or-secondaire:hover,
.mfl-cercle-cta-or-secondaire:focus-visible {
border-color: #E3C47E;
background: rgba(227, 196, 126, 0.08);
}
.mfl-cercle-cta-or-secondaire:hover .mfl-cercle-cta-label,
.mfl-cercle-cta-or-secondaire:focus-visible .mfl-cercle-cta-label {
letter-spacing: 0.28em;
}
/* === 4 micro-badges signature Maison · sous les CTAs Hero === */
.mfl-cercle-hero-badges {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 0;
margin-top: 0;
flex-wrap: wrap;
}
.mfl-cercle-hero-ctas {
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
}
.mfl-cercle-hero-badge {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 1.5rem;
border-right: 1px solid rgba(184, 154, 104, 0.22);
color: rgba(246, 241, 232, 0.78);
transition: color 0.5s ease;
}
.mfl-cercle-hero-badge:last-child {
border-right: none;
}
.mfl-cercle-hero-badge:hover {
color: #E3C47E;
}
.mfl-cercle-hero-badge-icone {
width: 22px;
height: 22px;
color: #B89A68;
flex-shrink: 0;
transition: color 0.5s ease, transform 0.5s ease;
}
.mfl-cercle-hero-badge:hover .mfl-cercle-hero-badge-icone {
color: #E3C47E;
transform: scale(1.05);
}
.mfl-cercle-hero-badge-texte {
font-family: 'Inter', sans-serif;
font-size: 0.68rem;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1.35;
text-align: left;
}
/* === 2 · SÉLECTION ÉDITORIALE STRICTE · texte gauche + visuel Dossier droite === */
.mfl-cercle-selection {
background: #F6F1E8;
padding: 9rem 1.5rem;
position: relative;
overflow: hidden;
}
.mfl-cercle-selection::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 70% 50%, rgba(184, 154, 104, 0.05) 0%, transparent 60%);
pointer-events: none;
}
.mfl-cercle-selection-grille {
max-width: 1340px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 5rem;
align-items: center;
position: relative;
z-index: 2;
}
.mfl-cercle-selection-texte {
padding: 1rem 0;
}
.mfl-cercle-selection-paragraphe {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1.18rem;
line-height: 1.85;
color: rgba(30, 23, 21, 0.82);
margin: 0 0 1.75rem;
}
.mfl-cercle-selection-paragraphe strong {
font-weight: 500;
color: #3D1A20;
}
.mfl-cercle-selection-paragraphe em {
font-style: italic;
color: #B89A68;
}
/* Mini bandeau ✔ Maison · 4 garanties */
.mfl-cercle-selection-garanties {
list-style: none;
padding: 0;
margin: 3rem 0 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.85rem 1.5rem;
padding-top: 2rem;
border-top: 1px solid rgba(184, 154, 104, 0.22);
}
.mfl-cercle-selection-garantie {
display: flex;
align-items: center;
gap: 0.65rem;
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(30, 23, 21, 0.78);
}
.mfl-cercle-selection-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(184, 154, 104, 0.12);
color: #B89A68;
font-size: 0.7rem;
font-weight: 600;
flex-shrink: 0;
}
/* === Visuel Dossier de Sélection · cabinet éditorial Maison === */
.mfl-cercle-selection-visuel {
margin: 0;
position: relative;
}
.mfl-cercle-selection-cadre {
position: relative;
overflow: hidden;
border-radius: 3px;
box-shadow:
0 30px 80px rgba(61, 26, 32, 0.18),
0 12px 32px rgba(61, 26, 32, 0.12);
}
.mfl-cercle-selection-image {
display: block;
width: 100%;
height: auto;
transform: scale(1);
transition: transform 8s ease;
}
/* Léger zoom lent au hover (effet "document vivant") */
.mfl-cercle-selection-cadre:hover .mfl-cercle-selection-image {
transform: scale(1.02);
}
/* Glow doré ultra subtil sur les sceaux · pulsation lente */
.mfl-cercle-selection-glow {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 48% 75%, rgba(255, 226, 156, 0.18) 0%, transparent 18%),
radial-gradient(circle at 36% 87%, rgba(255, 220, 140, 0.14) 0%, transparent 16%),
radial-gradient(circle at 22% 32%, rgba(255, 226, 156, 0.12) 0%, transparent 20%);
mix-blend-mode: screen;
animation: mflCercleSelectionGlow 12s ease-in-out infinite;
}
@keyframes mflCercleSelectionGlow {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
/* Lumière mouvante ultra lente · reflet de bureau premium */
.mfl-cercle-selection-reflet {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
115deg,
transparent 0%,
transparent 35%,
rgba(255, 244, 210, 0.0) 45%,
rgba(255, 250, 220, 0.15) 50%,
rgba(255, 244, 210, 0.0) 55%,
transparent 65%,
transparent 100%
);
mix-blend-mode: soft-light;
transform: translateX(-50%);
animation: mflCercleSelectionReflet 28s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes mflCercleSelectionReflet {
0% {
transform: translateX(-60%);
opacity: 0;
}
20% {
opacity: 0.5;
}
50% {
opacity: 0.7;
}
80% {
opacity: 0.5;
}
100% {
transform: translateX(60%);
opacity: 0;
}
}
.mfl-cercle-selection-legende {
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #B89A68;
text-align: center;
margin-top: 1.5rem;
opacity: 0.85;
}
/* Responsive · empilement mobile */
@media (max-width: 1024px) {
.mfl-cercle-selection-grille {
grid-template-columns: 1fr;
gap: 3.5rem;
}
}
@media (max-width: 720px) {
.mfl-cercle-selection {
padding: 6rem 1.25rem;
}
.mfl-cercle-selection-garanties {
grid-template-columns: 1fr;
gap: 0.7rem;
}
}
/* === ANCIENNE SECTION "NOS PRINCIPES" · conservée pour compatibilité === */
.mfl-cercle-principes {
background: #F6F1E8;
padding: 8.5rem 1.5rem;
display: none; /* Remplacée par .mfl-cercle-selection */
}
.mfl-cercle-principes-grille {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 5rem;
align-items: start;
}
.mfl-cercle-principes-intro {
position: sticky;
top: 8rem;
}
.mfl-cercle-section-titre {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(2.4rem, 4.8vw, 3.6rem);
line-height: 1.08;
color: #3D1A20;
margin: 1.5rem 0 2rem;
letter-spacing: -0.005em;
}
.mfl-cercle-section-titre em {
font-style: italic;
color: #B89A68;
display: block;
}
.mfl-cercle-section-baseline {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1.1rem;
line-height: 1.75;
color: rgba(30, 23, 21, 0.78);
margin: 0;
max-width: 480px;
}
.mfl-cercle-principes-cartes {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.mfl-cercle-principe {
background: #FFFFFF;
border: 1px solid rgba(184, 154, 104, 0.22);
border-left: 2px solid #B89A68;
padding: 2.5rem 2.5rem 2.5rem 3rem;
position: relative;
transition: all 0.6s ease;
box-shadow: 0 4px 24px rgba(61, 26, 32, 0.04);
}
.mfl-cercle-principe:hover {
border-left-width: 4px;
box-shadow: 0 8px 32px rgba(184, 154, 104, 0.15);
transform: translateX(2px);
}
.mfl-cercle-principe-icone {
position: absolute;
top: 2rem;
right: 2.5rem;
font-size: 1.6rem;
color: #B89A68;
opacity: 0.55;
}
.mfl-cercle-principe-titre {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1.5rem;
color: #3D1A20;
margin: 0 0 0.9rem;
letter-spacing: 0.005em;
}
.mfl-cercle-principe-texte {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1.05rem;
line-height: 1.7;
color: rgba(30, 23, 21, 0.82);
margin: 0;
}
/* === 3 · CE QUE NOUS REFUSONS · bordeaux profond monumental === */
.mfl-cercle-refus {
background: linear-gradient(180deg, #3D1A20 0%, #2c0810 100%);
padding: 9.5rem 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.mfl-cercle-refus::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(184, 154, 104, 0.06) 0%, transparent 65%);
pointer-events: none;
}
.mfl-cercle-refus-inner {
position: relative;
z-index: 2;
max-width: 880px;
margin: 0 auto;
}
.mfl-nm-numero-romain-or {
color: #E3C47E !important;
}
.mfl-cercle-section-titre-dark {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(2.4rem, 5vw, 3.6rem);
line-height: 1.1;
color: #F6F1E8;
margin: 1.5rem 0 4rem;
letter-spacing: -0.005em;
}
.mfl-cercle-section-titre-dark em {
font-style: italic;
color: #E3C47E;
display: block;
}
.mfl-cercle-refus-liste {
list-style: none;
padding: 0;
margin: 0 0 4rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem 4rem;
text-align: left;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.mfl-cercle-refus-item {
display: flex;
align-items: baseline;
gap: 1rem;
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1.3rem;
color: rgba(246, 241, 232, 0.88);
letter-spacing: 0.01em;
padding: 0.5rem 0;
border-bottom: 1px solid rgba(184, 154, 104, 0.18);
}
.mfl-cercle-refus-x {
color: #B89A68;
font-size: 0.9em;
opacity: 0.8;
flex-shrink: 0;
}
.mfl-cercle-refus-conclusion {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-style: italic;
font-size: 1.4rem;
color: #E3C47E;
line-height: 1.6;
margin: 0;
letter-spacing: 0.01em;
}
/* === 4 · COMMENT FONCTIONNE LE CERCLE · timeline horizontale dorée === */
.mfl-cercle-process {
background: #F1E9D8;
padding: 8.5rem 1.5rem;
}
.mfl-cercle-process-header {
max-width: 720px;
margin: 0 auto 6rem;
text-align: center;
}
.mfl-cercle-process-timeline {
position: relative;
max-width: 1140px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
padding: 3rem 0;
}
.mfl-cercle-process-ligne {
position: absolute;
top: 4.5rem;
left: 16.66%;
right: 16.66%;
height: 1px;
background: linear-gradient(to right, transparent 0%, #B89A68 15%, #E3C47E 50%, #B89A68 85%, transparent 100%);
opacity: 0.6;
z-index: 1;
}
.mfl-cercle-process-etape {
text-align: center;
position: relative;
z-index: 2;
}
.mfl-cercle-process-point {
display: block;
width: 14px;
height: 14px;
margin: 0 auto 2rem;
background: radial-gradient(circle, #E3C47E 0%, #B89A68 100%);
border-radius: 50%;
box-shadow: 0 0 18px rgba(227, 196, 126, 0.5), 0 0 0 6px rgba(241, 233, 216, 1);
position: relative;
}
.mfl-cercle-process-numero {
display: block;
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-style: italic;
font-size: 1.4rem;
color: #B89A68;
letter-spacing: 0.08em;
margin-bottom: 1rem;
}
.mfl-cercle-process-titre {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1.8rem;
color: #3D1A20;
margin: 0 0 1.25rem;
}
.mfl-cercle-process-texte {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1.05rem;
line-height: 1.7;
color: rgba(30, 23, 21, 0.78);
margin: 0;
max-width: 280px;
margin-left: auto;
margin-right: auto;
}
/* === 5 · DOMAINES COUVERTS · grid éditoriale luxe === */
.mfl-cercle-domaines {
background: #F6F1E8;
padding: 9rem 1.5rem;
}
/* Baseline réduite à « 8 domaines. » avec le 8 en or qui pulse en courant alternatif */
.mfl-cercle-domaines-baseline {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1.6rem, 3vw, 2.2rem);
line-height: 1.2;
color: rgba(30, 23, 21, 0.85);
display: inline-flex;
align-items: baseline;
justify-content: center;
gap: 0.3rem;
margin: 1rem auto 0;
max-width: none;
}
.mfl-cercle-domaines-chiffre {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-style: italic;
font-size: 2.6em;
line-height: 1;
color: #B89A68;
position: relative;
display: inline-block;
/* Léger soulignement lumineux + animation courant alternatif */
animation:
mflCercleChiffreCourantAlternatif 1.4s cubic-bezier(0.6, 0, 0.4, 1) infinite,
mflCercleChiffreCouleurPulse 4s ease-in-out infinite;
text-shadow:
0 0 6px rgba(227, 196, 126, 0.7),
0 0 14px rgba(227, 196, 126, 0.35);
}
/* Effet courant alternatif · scintillement rapide irrégulier comme un néon */
@keyframes mflCercleChiffreCourantAlternatif {
0%, 100% {
opacity: 1;
text-shadow:
0 0 6px rgba(227, 196, 126, 0.7),
0 0 14px rgba(227, 196, 126, 0.35),
0 0 28px rgba(184, 154, 104, 0.18);
}
6% {
opacity: 0.65;
text-shadow:
0 0 3px rgba(184, 154, 104, 0.4),
0 0 8px rgba(184, 154, 104, 0.18);
}
8% {
opacity: 1;
text-shadow:
0 0 10px rgba(255, 232, 178, 0.95),
0 0 22px rgba(227, 196, 126, 0.55),
0 0 44px rgba(184, 154, 104, 0.3);
}
10% {
opacity: 0.85;
text-shadow:
0 0 5px rgba(227, 196, 126, 0.55),
0 0 12px rgba(227, 196, 126, 0.25);
}
14% {
opacity: 1;
text-shadow:
0 0 12px rgba(255, 244, 210, 1),
0 0 26px rgba(227, 196, 126, 0.7),
0 0 52px rgba(184, 154, 104, 0.4);
}
18% {
opacity: 0.92;
text-shadow:
0 0 6px rgba(227, 196, 126, 0.6),
0 0 14px rgba(227, 196, 126, 0.3);
}
42% {
opacity: 1;
text-shadow:
0 0 8px rgba(227, 196, 126, 0.85),
0 0 18px rgba(227, 196, 126, 0.45);
}
47% {
opacity: 0.55;
text-shadow:
0 0 3px rgba(184, 154, 104, 0.35);
}
50% {
opacity: 1;
text-shadow:
0 0 14px rgba(255, 244, 210, 1),
0 0 28px rgba(227, 196, 126, 0.75),
0 0 56px rgba(184, 154, 104, 0.45);
}
75% {
opacity: 0.78;
text-shadow:
0 0 4px rgba(227, 196, 126, 0.5),
0 0 10px rgba(227, 196, 126, 0.22);
}
78% {
opacity: 1;
text-shadow:
0 0 10px rgba(255, 232, 178, 0.9),
0 0 22px rgba(227, 196, 126, 0.55);
}
}
/* Lente pulsation de teinte au-dessus de l'effet courant · va du doré chaud au doré clair */
@keyframes mflCercleChiffreCouleurPulse {
0%, 100% { color: #B89A68; }
50% { color: #E3C47E; }
}
/* Classe utilitaire pour le contenu lisible par lecteurs d'écran uniquement */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Respect prefers-reduced-motion · stabilité pour les visiteurs sensibles */
@media (prefers-reduced-motion: reduce) {
.mfl-cercle-domaines-chiffre {
animation: none;
color: #E3C47E;
text-shadow: 0 0 10px rgba(227, 196, 126, 0.5);
}
}
.mfl-cercle-domaines-header {
max-width: 720px;
margin: 0 auto 5.5rem;
text-align: center;
}
.mfl-cercle-domaines-grille {
max-width: 1340px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.mfl-cercle-domaine {
background: #FFFFFF;
border: 1px solid rgba(184, 154, 104, 0.2);
padding: 2.5rem 2rem;
position: relative;
transition: all 0.6s ease;
cursor: default;
}
.mfl-cercle-domaine::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at top, rgba(184, 154, 104, 0.08) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.6s ease;
pointer-events: none;
}
.mfl-cercle-domaine:hover {
border-color: #B89A68;
box-shadow: 0 12px 36px rgba(184, 154, 104, 0.18);
transform: translateY(-3px);
}
.mfl-cercle-domaine:hover::before {
opacity: 1;
}
.mfl-cercle-domaine-numero {
display: block;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: 1.5rem;
color: #B89A68;
margin-bottom: 1.25rem;
letter-spacing: 0.06em;
}
.mfl-cercle-domaine-titre {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1.3rem;
color: #3D1A20;
line-height: 1.3;
margin: 0 0 1rem;
min-height: 3.4rem;
}
.mfl-cercle-domaine-texte {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 0.98rem;
line-height: 1.65;
color: rgba(30, 23, 21, 0.78);
margin: 0;
}
/* === 6 · MORGAN · médaillon centré + texte (compact, plus encart raisonnable) === */
.mfl-cercle-morgan {
background: linear-gradient(180deg, #FAF6EE 0%, #F6F1E8 100%);
padding: 8rem 1.5rem;
scroll-margin-top: 80px;
text-align: center;
}
.mfl-cercle-morgan-inner {
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
/* Médaillon Morgan · cercle 220px avec halo doré pulsant lent */
.mfl-cercle-morgan-medaillon {
margin: 0 0 3rem;
position: relative;
width: 220px;
height: 220px;
display: flex;
align-items: center;
justify-content: center;
}
.mfl-cercle-morgan-medaillon-halo {
position: absolute;
inset: -28px;
border-radius: 50%;
background: radial-gradient(circle at center,
rgba(227, 196, 126, 0.32) 0%,
rgba(184, 154, 104, 0.18) 35%,
rgba(184, 154, 104, 0.08) 60%,
transparent 75%);
filter: blur(8px);
animation: mflMorganHaloPulse 8s ease-in-out infinite;
z-index: 1;
}
@keyframes mflMorganHaloPulse {
0%, 100% { opacity: 0.65; transform: scale(0.96); }
50% { opacity: 1; transform: scale(1.04); }
}
.mfl-cercle-morgan-medaillon-cadre {
position: relative;
z-index: 2;
width: 188px;
height: 188px;
border-radius: 50%;
overflow: hidden;
border: 1.5px solid #B89A68;
box-shadow:
0 0 0 4px rgba(246, 241, 232, 1),
0 18px 40px rgba(61, 26, 32, 0.22),
0 8px 20px rgba(61, 26, 32, 0.12);
transition: box-shadow 0.6s ease, transform 0.6s ease;
}
.mfl-cercle-morgan-medaillon-cadre:hover {
box-shadow:
0 0 0 4px rgba(246, 241, 232, 1),
0 22px 50px rgba(184, 154, 104, 0.32),
0 10px 24px rgba(61, 26, 32, 0.18);
transform: translateY(-2px);
}
.mfl-cercle-morgan-medaillon-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.mfl-cercle-morgan-medaillon-legende {
position: absolute;
bottom: -76px;
left: 50%;
transform: translateX(-50%);
text-align: center;
display: flex;
flex-direction: column;
gap: 0.3rem;
width: 280px;
}
.mfl-cercle-morgan-medaillon-nom {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1.6rem;
color: #3D1A20;
letter-spacing: 0.02em;
}
.mfl-cercle-morgan-medaillon-fonction {
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #B89A68;
}
.mfl-cercle-morgan-texte {
padding: 5rem 1rem 0;
text-align: center;
max-width: 640px;
}
.mfl-cercle-morgan-paragraphe {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1.18rem;
line-height: 1.8;
color: rgba(30, 23, 21, 0.82);
margin: 0 0 1.75rem;
}
.mfl-cercle-morgan-citation {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: 1.5rem;
line-height: 1.55;
color: #B89A68;
margin: 3rem 0 3rem;
padding: 0 0 0 2rem;
border-left: 2px solid #B89A68;
}
/* === 7 · LES 3 MODÈLES JURIDIQUES · 3 colonnes majestueuses === */
.mfl-cercle-modeles {
background: #F1E9D8;
padding: 9rem 1.5rem;
}
.mfl-cercle-modeles-header {
max-width: 720px;
margin: 0 auto 5.5rem;
text-align: center;
}
.mfl-cercle-modeles-grille {
max-width: 1340px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.mfl-cercle-modele {
background: #FFFFFF;
border-top: 3px solid #B89A68;
padding: 3rem 2.5rem 3.5rem;
position: relative;
text-align: center;
transition: all 0.6s ease;
box-shadow: 0 8px 32px rgba(61, 26, 32, 0.06);
}
.mfl-cercle-modele:hover {
box-shadow: 0 16px 48px rgba(184, 154, 104, 0.18);
transform: translateY(-4px);
}
.mfl-cercle-modele-sceau {
font-size: 2.6rem;
color: #B89A68;
margin-bottom: 1.25rem;
line-height: 1;
}
.mfl-cercle-modele-zone {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #B89A68;
margin-bottom: 1rem;
}
.mfl-cercle-modele-titre {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1.55rem;
line-height: 1.3;
color: #3D1A20;
margin: 0 0 1.5rem;
}
.mfl-cercle-modele-titre em {
font-style: italic;
color: #B89A68;
display: block;
font-weight: 300;
}
.mfl-cercle-modele-texte {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1rem;
line-height: 1.7;
color: rgba(30, 23, 21, 0.82);
margin: 0 0 1.5rem;
text-align: left;
}
.mfl-cercle-modele-pourquoi {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 0.95rem;
line-height: 1.7;
color: rgba(30, 23, 21, 0.72);
margin: 0 0 1.5rem;
text-align: left;
padding: 1rem 1.25rem;
background: rgba(241, 233, 216, 0.55);
border-left: 2px solid rgba(184, 154, 104, 0.4);
}
.mfl-cercle-modele-pourquoi em {
font-style: italic;
color: #B89A68;
font-weight: 400;
}
.mfl-cercle-modele-signature {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.95rem;
color: #B89A68;
margin: 0;
letter-spacing: 0.01em;
}
/* === 8 · POURQUOI LES PRATICIENS · ivoire chaud · grille raisons === */
.mfl-cercle-praticiens {
background: #F6F1E8;
padding: 8.5rem 1.5rem;
}
.mfl-cercle-praticiens-inner {
max-width: 1040px;
margin: 0 auto;
text-align: center;
}
.mfl-cercle-praticiens-raisons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem 2rem;
margin-top: 4rem;
text-align: left;
}
.mfl-cercle-praticiens-raison {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1.15rem;
line-height: 1.6;
color: rgba(30, 23, 21, 0.85);
padding: 1.5rem 1.75rem;
background: #FFFFFF;
border-left: 2px solid #B89A68;
transition: all 0.5s ease;
}
.mfl-cercle-praticiens-raison:hover {
background: #FAF6EE;
border-left-width: 3px;
transform: translateX(3px);
}
/* === 9 · REJOINDRE LE CERCLE · bordeaux + formulaire premium === */
.mfl-cercle-rejoindre {
background: linear-gradient(180deg, #2c0810 0%, #3D1A20 100%);
padding: 10rem 1.5rem;
scroll-margin-top: 80px;
position: relative;
overflow: hidden;
}
.mfl-cercle-rejoindre::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at top, rgba(184, 154, 104, 0.08) 0%, transparent 50%);
pointer-events: none;
}
.mfl-cercle-rejoindre-inner {
position: relative;
z-index: 2;
max-width: 780px;
margin: 0 auto;
text-align: center;
}
.mfl-cercle-rejoindre-baseline {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1.2rem;
line-height: 1.75;
color: rgba(246, 241, 232, 0.85);
margin: 0 0 4rem;
}
.mfl-cercle-rejoindre-baseline em {
color: #E3C47E;
font-style: italic;
display: block;
margin-top: 0.5rem;
}
.mfl-cercle-formulaire {
display: flex;
flex-direction: column;
gap: 1.75rem;
text-align: left;
}
.mfl-cercle-formulaire-rangee {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.mfl-cercle-formulaire-champ,
.mfl-cercle-formulaire-champ-large {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.mfl-cercle-formulaire-label {
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #E3C47E;
opacity: 0.9;
}
.mfl-cercle-formulaire-input {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1.05rem;
color: #F6F1E8;
background: rgba(246, 241, 232, 0.04);
border: 1px solid rgba(184, 154, 104, 0.3);
border-radius: 2px;
padding: 0.95rem 1.1rem;
transition: all 0.4s ease;
width: 100%;
}
.mfl-cercle-formulaire-input::placeholder {
color: rgba(246, 241, 232, 0.4);
font-style: italic;
}
.mfl-cercle-formulaire-input:focus {
outline: none;
border-color: #B89A68;
background: rgba(246, 241, 232, 0.08);
box-shadow: 0 0 0 3px rgba(184, 154, 104, 0.12);
}
.mfl-cercle-formulaire-textarea {
resize: vertical;
min-height: 120px;
font-family: 'Cormorant Garamond', serif;
}
.mfl-cercle-formulaire-input[type="url"],
.mfl-cercle-formulaire-input[type="email"] {
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
letter-spacing: 0.01em;
}
.mfl-cercle-formulaire select.mfl-cercle-formulaire-input {
font-family: 'Cormorant Garamond', serif;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23B89A68' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1.25rem center;
background-size: 10px;
padding-right: 2.5rem;
}
.mfl-cercle-formulaire-cta {
margin: 1.5rem auto 0;
padding: 1.2rem 3rem;
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.26em;
text-transform: uppercase;
color: #2c0810;
background: linear-gradient(135deg, #B89A68 0%, #E3C47E 50%, #B89A68 100%);
border: 1px solid #B89A68;
border-radius: 2px;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 6px 24px rgba(184, 154, 104, 0.3);
}
.mfl-cercle-formulaire-cta:hover:not(:disabled),
.mfl-cercle-formulaire-cta:focus-visible {
background: linear-gradient(135deg, #E3C47E 0%, #FFF4D6 50%, #E3C47E 100%);
box-shadow: 0 10px 36px rgba(227, 196, 126, 0.5);
letter-spacing: 0.3em;
transform: translateY(-2px);
}
.mfl-cercle-formulaire-cta:disabled {
opacity: 0.7;
cursor: default;
}
.mfl-cercle-formulaire-mention {
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 300;
font-style: italic;
color: rgba(246, 241, 232, 0.55);
margin: 1rem 0 0;
text-align: center;
}
/* === 10 · FAQ · accordion premium === */
.mfl-cercle-faq {
background: #FAF6EE;
padding: 9rem 1.5rem;
}
.mfl-cercle-faq-header {
max-width: 720px;
margin: 0 auto 5rem;
text-align: center;
}
.mfl-cercle-faq-liste {
max-width: 880px;
margin: 0 auto;
}
.mfl-cercle-faq-item {
border-bottom: 1px solid rgba(184, 154, 104, 0.22);
transition: background 0.5s ease;
}
.mfl-cercle-faq-item:first-child {
border-top: 1px solid rgba(184, 154, 104, 0.22);
}
.mfl-cercle-faq-item[open] {
background: rgba(246, 241, 232, 0.55);
}
.mfl-cercle-faq-question {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1.35rem;
line-height: 1.4;
color: #3D1A20;
padding: 1.75rem 3rem 1.75rem 0.5rem;
cursor: pointer;
list-style: none;
position: relative;
transition: color 0.4s ease;
}
.mfl-cercle-faq-question::-webkit-details-marker {
display: none;
}
.mfl-cercle-faq-question::after {
content: '+';
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1.8rem;
color: #B89A68;
transition: transform 0.5s ease, color 0.4s ease;
}
.mfl-cercle-faq-item[open] .mfl-cercle-faq-question::after {
content: '−';
color: #3D1A20;
}
.mfl-cercle-faq-question:hover {
color: #B89A68;
}
.mfl-cercle-faq-reponse {
padding: 0 0.5rem 2rem 0.5rem;
animation: mflCercleFaqOpen 0.6s ease;
}
@keyframes mflCercleFaqOpen {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.mfl-cercle-faq-reponse p {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1.1rem;
line-height: 1.75;
color: rgba(30, 23, 21, 0.82);
margin: 0 0 1rem;
}
.mfl-cercle-faq-reponse p:last-child {
margin-bottom: 0;
}
.mfl-cercle-faq-lien {
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #B89A68;
text-decoration: none;
border-bottom: 1px solid rgba(184, 154, 104, 0.35);
padding-bottom: 2px;
transition: all 0.4s ease;
}
.mfl-cercle-faq-lien:hover,
.mfl-cercle-faq-lien:focus-visible {
color: #3D1A20;
border-color: rgba(61, 26, 32, 0.55);
letter-spacing: 0.26em;
}
/* === RESPONSIVE LE CERCLE === */
@media (max-width: 1024px) {
.mfl-cercle-principes-grille,
.mfl-cercle-morgan-grille {
grid-template-columns: 1fr;
gap: 3.5rem;
}
.mfl-cercle-principes-intro {
position: static;
}
.mfl-cercle-domaines-grille {
grid-template-columns: repeat(2, 1fr);
}
.mfl-cercle-modeles-grille {
grid-template-columns: 1fr;
gap: 2rem;
}
}
@media (max-width: 720px) {
.mfl-cercle-hero {
min-height: 80vh;
padding: 6rem 1.25rem 4rem;
}
.mfl-cercle-hero-ctas {
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
.mfl-cercle-cta-or,
.mfl-cercle-cta-or-secondaire {
width: 100%;
max-width: 320px;
justify-content: center;
}
.mfl-cercle-hero-badges {
flex-direction: column;
gap: 0.5rem;
margin-top: 2.5rem;
align-items: center;
}
.mfl-cercle-hero-badge {
border-right: none;
border-bottom: 1px solid rgba(184, 154, 104, 0.18);
padding: 0.75rem 1rem;
width: 100%;
max-width: 280px;
justify-content: flex-start;
}
.mfl-cercle-hero-badge:last-child {
border-bottom: none;
}
.mfl-cercle-principes,
.mfl-cercle-refus,
.mfl-cercle-process,
.mfl-cercle-domaines,
.mfl-cercle-morgan,
.mfl-cercle-modeles,
.mfl-cercle-praticiens,
.mfl-cercle-rejoindre,
.mfl-cercle-faq {
padding: 6rem 1.25rem;
}
.mfl-cercle-refus-liste {
grid-template-columns: 1fr;
gap: 1rem;
}
.mfl-cercle-process-timeline {
grid-template-columns: 1fr;
gap: 4rem;
}
.mfl-cercle-process-ligne {
display: none;
}
.mfl-cercle-domaines-grille {
grid-template-columns: 1fr;
}
.mfl-cercle-praticiens-raisons {
grid-template-columns: 1fr;
}
.mfl-cercle-formulaire-rangee {
grid-template-columns: 1fr;
}
.mfl-cercle-morgan-citation {
font-size: 1.25rem;
}
}
/* ════════════════════════════════════════════════════════════════════════ */
/* TUNNEL MORGAN · popup modal 5 étapes · ambiance bordeaux profond */
/* ════════════════════════════════════════════════════════════════════════ */
/* Conteneur racine · fixe, plein écran, masqué par défaut */
.mfl-morgan-tunnel {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.6s ease;
}
.mfl-morgan-tunnel.mfl-morgan-tunnel-ouvert {
opacity: 1;
pointer-events: auto;
}
/* Bloquer le scroll de la page derrière */
body.mfl-morgan-tunnel-actif {
overflow: hidden;
}
/* Voile sombre derrière · fond bordeaux profond presque noir */
.mfl-morgan-tunnel-voile {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center,
rgba(44, 8, 16, 0.85) 0%,
rgba(20, 4, 8, 0.92) 100%);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Cadre du modal · papier crème avec ornement Maison */
.mfl-morgan-tunnel-cadre {
position: relative;
width: 100%;
max-width: 600px;
max-height: 90vh;
background: linear-gradient(180deg, #FAF6EE 0%, #F6F1E8 100%);
border-radius: 4px;
box-shadow:
0 40px 100px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(184, 154, 104, 0.32);
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateY(20px) scale(0.96);
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.mfl-morgan-tunnel-ouvert .mfl-morgan-tunnel-cadre {
transform: translateY(0) scale(1);
}
/* En-tête fixe avec médaillon Morgan + nom + fermer */
.mfl-morgan-tunnel-entete {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem 1.75rem;
border-bottom: 1px solid rgba(184, 154, 104, 0.22);
background: linear-gradient(180deg, rgba(246, 241, 232, 0.85) 0%, rgba(246, 241, 232, 1) 100%);
}
.mfl-morgan-tunnel-avatar {
position: relative;
width: 56px;
height: 56px;
flex-shrink: 0;
}
.mfl-morgan-tunnel-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 1.5px solid #B89A68;
position: relative;
z-index: 2;
box-shadow: 0 0 0 3px rgba(246, 241, 232, 1);
}
.mfl-morgan-tunnel-avatar-halo {
position: absolute;
inset: -6px;
border-radius: 50%;
background: radial-gradient(circle, rgba(227, 196, 126, 0.45) 0%, transparent 70%);
animation: mflMorganHaloPulse 6s ease-in-out infinite;
}
.mfl-morgan-tunnel-entete-texte {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.mfl-morgan-tunnel-entete-nom {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1.2rem;
color: #3D1A20;
}
.mfl-morgan-tunnel-entete-fonction {
font-family: 'Inter', sans-serif;
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #B89A68;
}
.mfl-morgan-tunnel-fermer {
background: transparent;
border: 1px solid rgba(184, 154, 104, 0.32);
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: rgba(61, 26, 32, 0.6);
transition: all 0.4s ease;
flex-shrink: 0;
}
.mfl-morgan-tunnel-fermer:hover,
.mfl-morgan-tunnel-fermer:focus-visible {
border-color: #B89A68;
color: #3D1A20;
background: rgba(184, 154, 104, 0.08);
outline: none;
}
/* Progressbar dorée · animation lente fluide */
.mfl-morgan-tunnel-progress {
height: 2px;
background: rgba(184, 154, 104, 0.18);
position: relative;
}
.mfl-morgan-tunnel-progress-barre {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: linear-gradient(to right, #B89A68, #E3C47E);
width: 20%;
transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 8px rgba(227, 196, 126, 0.6);
}
/* Corps des étapes · zone scrollable */
.mfl-morgan-tunnel-corps {
flex: 1;
overflow-y: auto;
padding: 2rem 1.75rem 1rem;
position: relative;
}
.mfl-morgan-tunnel-corps::-webkit-scrollbar { width: 4px; }
.mfl-morgan-tunnel-corps::-webkit-scrollbar-track { background: transparent; }
.mfl-morgan-tunnel-corps::-webkit-scrollbar-thumb { background: rgba(184, 154, 104, 0.3); border-radius: 2px; }
.mfl-morgan-tunnel-etape {
display: none;
animation: mflMorganEtapeFade 0.5s ease;
}
.mfl-morgan-tunnel-etape.mfl-morgan-tunnel-etape-active {
display: block;
}
@keyframes mflMorganEtapeFade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.mfl-morgan-tunnel-numero {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #B89A68;
margin-bottom: 1.25rem;
opacity: 0.85;
}
.mfl-morgan-tunnel-titre {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1.85rem;
line-height: 1.2;
color: #3D1A20;
margin: 0 0 1rem;
letter-spacing: -0.005em;
}
.mfl-morgan-tunnel-titre em {
font-style: italic;
color: #B89A68;
font-weight: 300;
}
.mfl-morgan-tunnel-baseline {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1.05rem;
line-height: 1.6;
color: rgba(30, 23, 21, 0.7);
margin: 0 0 2rem;
font-style: italic;
}
/* Options · grille boutons éditoriaux */
.mfl-morgan-tunnel-options {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.7rem;
}
.mfl-morgan-tunnel-option-large {
grid-column: span 2;
}
.mfl-morgan-tunnel-option {
background: transparent;
border: 1px solid rgba(184, 154, 104, 0.32);
color: #3D1A20;
padding: 0.95rem 1rem;
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1rem;
cursor: pointer;
border-radius: 2px;
text-align: left;
transition: all 0.4s ease;
line-height: 1.3;
}
.mfl-morgan-tunnel-option:hover,
.mfl-morgan-tunnel-option:focus-visible {
border-color: #B89A68;
background: rgba(184, 154, 104, 0.08);
transform: translateX(2px);
outline: none;
}
.mfl-morgan-tunnel-option-active {
border-color: #B89A68;
background: rgba(184, 154, 104, 0.14);
box-shadow: 0 4px 14px rgba(184, 154, 104, 0.18);
font-weight: 500;
}
/* Formulaire étape 4 */
.mfl-morgan-tunnel-formulaire {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.mfl-morgan-tunnel-champ {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.mfl-morgan-tunnel-label {
font-family: 'Inter', sans-serif;
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #B89A68;
}
.mfl-morgan-tunnel-input {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1rem;
background: #FFFFFF;
border: 1px solid rgba(184, 154, 104, 0.32);
border-radius: 2px;
padding: 0.75rem 0.95rem;
color: #3D1A20;
transition: all 0.4s ease;
}
.mfl-morgan-tunnel-input:focus {
outline: none;
border-color: #B89A68;
box-shadow: 0 0 0 3px rgba(184, 154, 104, 0.14);
}
.mfl-morgan-tunnel-input[type="email"],
.mfl-morgan-tunnel-input[type="tel"] {
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
}
.mfl-morgan-tunnel-preferences {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 0.3rem;
}
.mfl-morgan-tunnel-pref {
display: flex;
align-items: center;
gap: 0.4rem;
font-family: 'Cormorant Garamond', serif;
font-size: 0.95rem;
color: #3D1A20;
cursor: pointer;
padding: 0.5rem 0.85rem;
border: 1px solid rgba(184, 154, 104, 0.22);
border-radius: 2px;
transition: all 0.3s ease;
}
.mfl-morgan-tunnel-pref:hover {
background: rgba(184, 154, 104, 0.08);
border-color: #B89A68;
}
.mfl-morgan-tunnel-pref input { accent-color: #B89A68; }
/* Message Morgan (étape 5) · ton chaleureux */
.mfl-morgan-tunnel-message {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1.1rem;
line-height: 1.75;
color: rgba(30, 23, 21, 0.85);
margin: 1.5rem 0;
}
.mfl-morgan-tunnel-message p {
margin: 0 0 1.1rem;
}
.mfl-morgan-tunnel-message strong {
font-weight: 500;
color: #3D1A20;
}
.mfl-morgan-tunnel-message-italique em {
font-style: italic;
color: #B89A68;
}
.mfl-morgan-tunnel-message-invitation {
border-top: 1px solid rgba(184, 154, 104, 0.18);
padding-top: 1.25rem;
margin-top: 1.5rem !important;
font-size: 1rem;
color: rgba(30, 23, 21, 0.72);
}
.mfl-morgan-tunnel-message-invitation a {
color: #B89A68;
text-decoration: none;
border-bottom: 1px solid rgba(184, 154, 104, 0.4);
transition: all 0.3s ease;
}
.mfl-morgan-tunnel-message-invitation a:hover {
color: #3D1A20;
border-color: #3D1A20;
}
.mfl-morgan-tunnel-rgpd {
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
font-style: italic;
color: rgba(30, 23, 21, 0.55);
text-align: center;
margin: 2rem 0 0;
padding-top: 1.25rem;
border-top: 1px solid rgba(184, 154, 104, 0.14);
}
/* Pied du tunnel · navigation précédent / suivant */
.mfl-morgan-tunnel-pied {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.75rem 1.5rem;
border-top: 1px solid rgba(184, 154, 104, 0.22);
gap: 1rem;
background: rgba(246, 241, 232, 0.85);
}
.mfl-morgan-tunnel-precedent,
.mfl-morgan-tunnel-suivant {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 0.85rem 1.5rem;
border-radius: 2px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.mfl-morgan-tunnel-precedent {
background: transparent;
border: 1px solid rgba(184, 154, 104, 0.32);
color: rgba(61, 26, 32, 0.65);
}
.mfl-morgan-tunnel-precedent:hover {
border-color: #B89A68;
color: #3D1A20;
background: rgba(184, 154, 104, 0.06);
}
.mfl-morgan-tunnel-suivant {
background: linear-gradient(135deg, #B89A68 0%, #E3C47E 50%, #B89A68 100%);
border: 1px solid #B89A68;
color: #2c0810;
box-shadow: 0 4px 14px rgba(184, 154, 104, 0.32);
flex-shrink: 0;
}
.mfl-morgan-tunnel-suivant:hover:not(:disabled),
.mfl-morgan-tunnel-suivant:focus-visible {
background: linear-gradient(135deg, #E3C47E 0%, #FFF4D6 50%, #E3C47E 100%);
box-shadow: 0 6px 22px rgba(227, 196, 126, 0.5);
letter-spacing: 0.26em;
transform: translateY(-1px);
}
.mfl-morgan-tunnel-suivant-inactif,
.mfl-morgan-tunnel-suivant:disabled {
opacity: 0.4;
cursor: not-allowed;
filter: grayscale(0.4);
}
/* Responsive */
@media (max-width: 720px) {
.mfl-morgan-tunnel { padding: 0.75rem; }
.mfl-morgan-tunnel-cadre { max-height: 95vh; }
.mfl-morgan-tunnel-entete { padding: 1.25rem 1.25rem; }
.mfl-morgan-tunnel-corps { padding: 1.5rem 1.25rem 0.75rem; }
.mfl-morgan-tunnel-pied { padding: 1rem 1.25rem 1.25rem; }
.mfl-morgan-tunnel-titre { font-size: 1.55rem; }
.mfl-morgan-tunnel-options { grid-template-columns: 1fr; }
.mfl-morgan-tunnel-option-large { grid-column: span 1; }
.mfl-morgan-tunnel-precedent,
.mfl-morgan-tunnel-suivant { padding: 0.75rem 1rem; font-size: 0.66rem; letter-spacing: 0.16em; }
}
/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.mfl-morgan-tunnel,
.mfl-morgan-tunnel-cadre,
.mfl-morgan-tunnel-etape,
.mfl-morgan-tunnel-avatar-halo,
.mfl-cercle-morgan-medaillon-halo {
animation: none !important;
transition: opacity 0.2s ease !important;
}
}
/* ════════════════════════════════════════════════════════════════════════ */
/* ÉVOCATION CERCLE · composant éditorial discret · réutilisable partout */
/* À insérer dans Home, Gamme, Bibliothèque, Protocoles, pages éditoriales */
/* ════════════════════════════════════════════════════════════════════════ */
.mfl-evocation-cercle {
background: linear-gradient(180deg, #F6F1E8 0%, #FAF6EE 100%);
padding: 7rem 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.mfl-evocation-cercle::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
max-width: 480px;
height: 1px;
background: linear-gradient(to right, transparent, rgba(184, 154, 104, 0.55), transparent);
}
.mfl-evocation-cercle-inner {
max-width: 760px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.mfl-evocation-cercle-ornement {
display: inline-block;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.6rem;
color: #B89A68;
margin-bottom: 1.75rem;
opacity: 0.85;
animation: mflEvocationOrnementRespire 6s ease-in-out infinite;
}
@keyframes mflEvocationOrnementRespire {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.06); }
}
.mfl-evocation-cercle-eyebrow {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #B89A68;
margin-bottom: 1.5rem;
opacity: 0.85;
}
.mfl-evocation-cercle-phrase {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-style: italic;
font-size: clamp(1.5rem, 2.6vw, 2rem);
line-height: 1.45;
color: #3D1A20;
margin: 0 0 2rem;
letter-spacing: -0.005em;
}
.mfl-evocation-cercle-phrase em {
font-style: italic;
color: #B89A68;
font-weight: 400;
}
.mfl-evocation-cercle-baseline {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1.05rem;
line-height: 1.75;
color: rgba(30, 23, 21, 0.72);
margin: 0 0 2.5rem;
}
.mfl-evocation-cercle-cta {
display: inline-flex;
align-items: center;
gap: 0.65rem;
font-family: 'Inter', sans-serif;
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: #B89A68;
text-decoration: none;
padding: 0.95rem 2rem;
border: 1px solid rgba(184, 154, 104, 0.55);
border-radius: 2px;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
background: transparent;
}
.mfl-evocation-cercle-cta:hover,
.mfl-evocation-cercle-cta:focus-visible {
background: linear-gradient(135deg, rgba(184, 154, 104, 0.08) 0%, rgba(227, 196, 126, 0.12) 100%);
border-color: #B89A68;
color: #3D1A20;
letter-spacing: 0.28em;
transform: translateY(-1px);
box-shadow: 0 6px 22px rgba(184, 154, 104, 0.18);
}
.mfl-evocation-cercle-cta::after {
content: '◇';
font-size: 0.85em;
opacity: 0.7;
transition: transform 0.4s ease;
}
.mfl-evocation-cercle-cta:hover::after {
transform: translateX(2px);
opacity: 1;
}
/* Variante bordeaux pour pages en ivoire dominant */
.mfl-evocation-cercle-bordeaux {
background: linear-gradient(180deg, #3D1A20 0%, #2c0810 100%);
}
.mfl-evocation-cercle-bordeaux::before {
background: linear-gradient(to right, transparent, rgba(227, 196, 126, 0.65), transparent);
}
.mfl-evocation-cercle-bordeaux .mfl-evocation-cercle-eyebrow {
color: #E3C47E;
}
.mfl-evocation-cercle-bordeaux .mfl-evocation-cercle-phrase {
color: #F6F1E8;
}
.mfl-evocation-cercle-bordeaux .mfl-evocation-cercle-phrase em {
color: #E3C47E;
}
.mfl-evocation-cercle-bordeaux .mfl-evocation-cercle-baseline {
color: rgba(246, 241, 232, 0.78);
}
.mfl-evocation-cercle-bordeaux .mfl-evocation-cercle-ornement {
color: #E3C47E;
}
.mfl-evocation-cercle-bordeaux .mfl-evocation-cercle-cta {
color: #E3C47E;
border-color: rgba(227, 196, 126, 0.55);
}
.mfl-evocation-cercle-bordeaux .mfl-evocation-cercle-cta:hover {
background: rgba(227, 196, 126, 0.1);
border-color: #E3C47E;
color: #F6F1E8;
}
@media (max-width: 720px) {
.mfl-evocation-cercle {
padding: 5rem 1.25rem;
}
}
/* ════════════════════════════════════════════════════════════════════════ */
/* CONTINUER LE PARCOURS MAISON · section de maillage croisé émotionnel */
/* À insérer en bas de chaque page principale */
/* ════════════════════════════════════════════════════════════════════════ */
.mfl-continuer-parcours {
background: #FAF6EE;
padding: 6.5rem 1.5rem;
border-top: 1px solid rgba(184, 154, 104, 0.18);
}
.mfl-continuer-parcours-inner {
max-width: 1140px;
margin: 0 auto;
}
.mfl-continuer-parcours-header {
text-align: center;
max-width: 640px;
margin: 0 auto 4rem;
}
.mfl-continuer-parcours-eyebrow {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #B89A68;
margin-bottom: 1.25rem;
}
.mfl-continuer-parcours-titre {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1.8rem, 3.2vw, 2.4rem);
line-height: 1.2;
color: #3D1A20;
margin: 0;
letter-spacing: -0.005em;
}
.mfl-continuer-parcours-titre em {
font-style: italic;
color: #B89A68;
}
.mfl-continuer-parcours-grille {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
}
.mfl-continuer-parcours-carte {
background: #FFFFFF;
border: 1px solid rgba(184, 154, 104, 0.22);
border-top: 2px solid #B89A68;
padding: 2.5rem 2rem;
text-decoration: none;
display: flex;
flex-direction: column;
gap: 0.85rem;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.mfl-continuer-parcours-carte:hover {
border-top-width: 4px;
transform: translateY(-3px);
box-shadow: 0 14px 36px rgba(184, 154, 104, 0.18);
}
.mfl-continuer-parcours-carte-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #B89A68;
}
.mfl-continuer-parcours-carte-titre {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1.5rem;
line-height: 1.3;
color: #3D1A20;
margin: 0;
}
.mfl-continuer-parcours-carte-titre em {
font-style: italic;
color: #B89A68;
}
.mfl-continuer-parcours-carte-texte {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1rem;
line-height: 1.65;
color: rgba(30, 23, 21, 0.78);
margin: 0.25rem 0 0;
}
.mfl-continuer-parcours-carte-lien {
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #B89A68;
margin-top: 1rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
border-bottom: 1px solid rgba(184, 154, 104, 0.3);
padding-bottom: 3px;
align-self: flex-start;
transition: all 0.4s ease;
}
.mfl-continuer-parcours-carte:hover .mfl-continuer-parcours-carte-lien {
color: #3D1A20;
border-color: #3D1A20;
letter-spacing: 0.26em;
}
@media (max-width: 1024px) {
.mfl-continuer-parcours-grille {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
@media (max-width: 720px) {
.mfl-continuer-parcours {
padding: 5rem 1.25rem;
}
}
/* ════════════════════════════════════════════════════════════════════════ */
/* FIL D'ARIANE · breadcrumb visuel · cohérence luxe silencieux */
/* ════════════════════════════════════════════════════════════════════════ */
.mfl-fil-ariane {
background: transparent;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid rgba(184, 154, 104, 0.18);
}
.mfl-fil-ariane-inner {
max-width: 1340px;
margin: 0 auto;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.mfl-fil-ariane-item {
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(30, 23, 21, 0.55);
text-decoration: none;
transition: color 0.3s ease;
}
.mfl-fil-ariane-item:not(:last-child):hover {
color: #B89A68;
}
.mfl-fil-ariane-item-actif {
color: #B89A68;
font-weight: 500;
}
.mfl-fil-ariane-separateur {
color: rgba(184, 154, 104, 0.4);
font-size: 0.7rem;
margin: 0 0.15rem;
}
/* ════════════════════════════════════════════════════════════════════════ */
/* LE CERCLE MAISON · appel premium sur la HOME · B2C + B2B */
/* Visuel globe doré + 4 piliers (Écoute, Identification, Accompagnement, */
/* Mise en relation) + double CTA + bandeau de réassurance */
/* ════════════════════════════════════════════════════════════════════════ */
.mfl-cercle-appel {
position: relative;
padding: 9rem 1.5rem;
background: #1a0508;
overflow: hidden;
isolation: isolate;
}
/* Fond visuel · globe doré atténué + voile bordeaux pour lisibilité */
.mfl-cercle-appel-fond {
position: absolute;
inset: 0;
z-index: 0;
}
.mfl-cercle-appel-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0.55;
animation: mflCercleAppelPan 38s ease-in-out infinite alternate;
}
@keyframes mflCercleAppelPan {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.06) translate(-1%, 0); }
}
.mfl-cercle-appel-voile {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, rgba(44, 8, 16, 0.5) 0%, rgba(20, 4, 8, 0.85) 70%, rgba(20, 4, 8, 0.95) 100%),
linear-gradient(180deg, rgba(20, 4, 8, 0.4) 0%, rgba(20, 4, 8, 0.7) 100%);
}
.mfl-cercle-appel-inner {
position: relative;
z-index: 2;
max-width: 1240px;
margin: 0 auto;
text-align: center;
}
/* En-tête · titre monumental */
.mfl-cercle-appel-entete {
max-width: 760px;
margin: 0 auto 5rem;
}
.mfl-cercle-appel-eyebrow {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.36em;
text-transform: uppercase;
color: #E3C47E;
margin-bottom: 2.25rem;
opacity: 0.92;
}
.mfl-cercle-appel-titre {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(2.6rem, 5.4vw, 4.4rem);
line-height: 1.08;
color: #F6F1E8;
margin: 0 0 2rem;
letter-spacing: -0.005em;
}
.mfl-cercle-appel-titre em {
font-style: italic;
color: #E3C47E;
display: block;
font-weight: 300;
}
.mfl-cercle-appel-filet {
display: block;
width: 80px;
height: 1px;
margin: 0 auto 2rem;
background: linear-gradient(to right, transparent, #E3C47E, transparent);
opacity: 0.85;
box-shadow: 0 0 8px rgba(227, 196, 126, 0.5);
}
.mfl-cercle-appel-baseline {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1.2rem, 2.2vw, 1.6rem);
line-height: 1.6;
color: rgba(246, 241, 232, 0.92);
margin: 0;
}
.mfl-cercle-appel-baseline em {
font-style: italic;
color: #E3C47E;
display: block;
margin-top: 0.4rem;
}
/* 4 piliers · grille premium */
.mfl-cercle-appel-piliers {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
max-width: 1180px;
margin: 0 auto 5rem;
}
.mfl-cercle-appel-pilier {
position: relative;
padding: 2.5rem 1.5rem;
background: linear-gradient(180deg, rgba(246, 241, 232, 0.04) 0%, rgba(246, 241, 232, 0.02) 100%);
border: 1px solid rgba(184, 154, 104, 0.28);
border-top: 2px solid #B89A68;
border-radius: 3px;
text-align: center;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.mfl-cercle-appel-pilier::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at top, rgba(227, 196, 126, 0.06) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.6s ease;
pointer-events: none;
border-radius: 3px;
}
.mfl-cercle-appel-pilier:hover {
border-color: #B89A68;
border-top-width: 3px;
transform: translateY(-4px);
background: linear-gradient(180deg, rgba(246, 241, 232, 0.07) 0%, rgba(246, 241, 232, 0.03) 100%);
box-shadow: 0 12px 36px rgba(227, 196, 126, 0.18);
}
.mfl-cercle-appel-pilier:hover::before {
opacity: 1;
}
.mfl-cercle-appel-pilier-numero {
display: block;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: 1.6rem;
color: #E3C47E;
margin-bottom: 1.25rem;
letter-spacing: 0.08em;
opacity: 0.85;
}
.mfl-cercle-appel-pilier-titre {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1.45rem;
color: #F6F1E8;
margin: 0 0 0.9rem;
letter-spacing: 0.005em;
}
.mfl-cercle-appel-pilier-texte {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 0.98rem;
line-height: 1.6;
color: rgba(246, 241, 232, 0.78);
margin: 0;
}
/* 2 CTAs · B2C principal or chaud + B2B secondaire outline */
.mfl-cercle-appel-ctas {
display: flex;
gap: 1.75rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 3.5rem;
}
.mfl-cercle-appel-cta {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: 'Inter', sans-serif;
font-weight: 500;
text-decoration: none;
padding: 1.15rem 2.5rem 1.05rem;
border-radius: 2px;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 340px;
max-width: 380px;
}
.mfl-cercle-appel-cta-label {
font-size: 0.84rem;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 600;
line-height: 1.25;
text-align: center;
}
.mfl-cercle-appel-cta-sublabel {
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 400;
opacity: 0.78;
line-height: 1.2;
text-align: center;
}
.mfl-cercle-appel-cta-principal {
background: linear-gradient(135deg, #B89A68 0%, #E3C47E 50%, #B89A68 100%);
color: #2c0810;
border: 1px solid #B89A68;
box-shadow: 0 6px 24px rgba(184, 154, 104, 0.4);
}
.mfl-cercle-appel-cta-principal:hover,
.mfl-cercle-appel-cta-principal:focus-visible {
background: linear-gradient(135deg, #E3C47E 0%, #FFF4D6 50%, #E3C47E 100%);
box-shadow: 0 10px 36px rgba(227, 196, 126, 0.55);
transform: translateY(-2px);
}
.mfl-cercle-appel-cta-secondaire {
background: transparent;
color: #E3C47E;
border: 1px solid rgba(227, 196, 126, 0.55);
}
.mfl-cercle-appel-cta-secondaire:hover,
.mfl-cercle-appel-cta-secondaire:focus-visible {
border-color: #E3C47E;
background: rgba(227, 196, 126, 0.1);
}
.mfl-cercle-appel-cta:hover .mfl-cercle-appel-cta-label,
.mfl-cercle-appel-cta:focus-visible .mfl-cercle-appel-cta-label {
letter-spacing: 0.24em;
}
/* Bandeau de réassurance · 4 micro-badges horizontaux */
.mfl-cercle-appel-rassurance {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1.75rem 2.5rem;
padding-top: 2.5rem;
border-top: 1px solid rgba(184, 154, 104, 0.18);
max-width: 980px;
margin: 0 auto;
}
.mfl-cercle-appel-rassurance-item {
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(227, 196, 126, 0.88);
}
/* Responsive */
@media (max-width: 1024px) {
.mfl-cercle-appel {
padding: 7rem 1.5rem;
}
.mfl-cercle-appel-piliers {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
}
@media (max-width: 720px) {
.mfl-cercle-appel {
padding: 5rem 1.25rem;
}
.mfl-cercle-appel-entete {
margin-bottom: 3.5rem;
}
.mfl-cercle-appel-piliers {
grid-template-columns: 1fr;
margin-bottom: 3rem;
}
.mfl-cercle-appel-ctas {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.mfl-cercle-appel-cta {
width: 100%;
max-width: 340px;
}
.mfl-cercle-appel-rassurance {
flex-direction: column;
align-items: center;
gap: 0.85rem;
padding-top: 2rem;
}
}
/* ════════════════════════════════════════════════════════════════════════ */
/* CONSTELLATION · 2 PORTES B2C + B2B sous "Entrer dans le Cercle" */
/* Très bonne visibilité · jamais agressif */
/* ════════════════════════════════════════════════════════════════════════ */
.mfl-constellation-portes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
max-width: 880px;
margin: 3rem auto 0;
padding: 0 1rem;
}
.mfl-constellation-porte {
display: flex;
align-items: center;
gap: 1.1rem;
text-decoration: none;
padding: 1.5rem 1.75rem;
background: linear-gradient(135deg, #FFFFFF 0%, #FAF6EE 100%);
border: 1px solid rgba(184, 154, 104, 0.42);
border-radius: 4px;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
text-align: left;
}
.mfl-constellation-porte::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at top right, rgba(184, 154, 104, 0.1) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
.mfl-constellation-porte:hover,
.mfl-constellation-porte:focus-visible {
border-color: #B89A68;
box-shadow: 0 14px 36px rgba(184, 154, 104, 0.22);
transform: translateY(-3px);
outline: none;
}
.mfl-constellation-porte:hover::before {
opacity: 1;
}
.mfl-constellation-porte-icone {
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, rgba(184, 154, 104, 0.12) 0%, rgba(227, 196, 126, 0.18) 100%);
color: #B89A68;
border: 1px solid rgba(184, 154, 104, 0.4);
transition: all 0.5s ease;
}
.mfl-constellation-porte:hover .mfl-constellation-porte-icone {
background: linear-gradient(135deg, #B89A68 0%, #E3C47E 100%);
color: #2c0810;
border-color: #B89A68;
transform: scale(1.05);
}
.mfl-constellation-porte-texte {
display: flex;
flex-direction: column;
gap: 0.3rem;
flex: 1;
min-width: 0;
}
.mfl-constellation-porte-label {
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
font-size: 1.1rem;
line-height: 1.25;
color: #3D1A20;
letter-spacing: 0.01em;
}
.mfl-constellation-porte-sub {
font-family: 'Inter', sans-serif;
font-size: 0.66rem;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(184, 154, 104, 0.95);
line-height: 1.3;
}
/* Variante B2C · accent or chaud à gauche */
.mfl-constellation-porte-client {
border-left: 3px solid #B89A68;
}
/* Variante B2B · accent bordeaux à gauche */
.mfl-constellation-porte-partenaire {
border-left: 3px solid var(--mfl-bordeaux, #3D1A20);
}
.mfl-constellation-porte-partenaire .mfl-constellation-porte-icone {
color: var(--mfl-bordeaux, #3D1A20);
background: linear-gradient(135deg, rgba(61, 26, 32, 0.08) 0%, rgba(74, 15, 26, 0.12) 100%);
border-color: rgba(61, 26, 32, 0.35);
}
.mfl-constellation-porte-partenaire:hover .mfl-constellation-porte-icone {
background: linear-gradient(135deg, var(--mfl-bordeaux, #3D1A20) 0%, #4a0f1a 100%);
color: #E3C47E;
border-color: var(--mfl-bordeaux, #3D1A20);
}
@media (max-width: 720px) {
.mfl-constellation-portes {
grid-template-columns: 1fr;
gap: 1rem;
margin-top: 2.25rem;
}
.mfl-constellation-porte {
padding: 1.25rem 1.25rem;
}
}
/* ════════════════════════════════════════════════════════════════════════ */
/* HALO LUMINEUX · ONGLET "LE CERCLE" dans le bandeau navigation */
/* Cercle doré qui pulse lentement · attire le regard subtilement */
/* ════════════════════════════════════════════════════════════════════════ */
.mfl-nav-cercle-halo {
position: relative;
display: inline-block;
}
.mfl-nav-cercle-halo::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% + 32px);
height: calc(100% + 16px);
border: 1px solid #B89A68;
border-radius: 999px;
box-shadow:
0 0 12px rgba(227, 196, 126, 0.45),
0 0 24px rgba(184, 154, 104, 0.25),
inset 0 0 8px rgba(227, 196, 126, 0.18);
background: radial-gradient(ellipse at center, rgba(227, 196, 126, 0.08) 0%, transparent 70%);
animation: mflNavCercleHaloPulse 4s ease-in-out infinite;
pointer-events: none;
z-index: -1;
}
@keyframes mflNavCercleHaloPulse {
0%, 100% {
opacity: 0.7;
box-shadow:
0 0 8px rgba(227, 196, 126, 0.35),
0 0 18px rgba(184, 154, 104, 0.18),
inset 0 0 6px rgba(227, 196, 126, 0.12);
}
50% {
opacity: 1;
box-shadow:
0 0 18px rgba(227, 196, 126, 0.65),
0 0 32px rgba(184, 154, 104, 0.35),
inset 0 0 12px rgba(227, 196, 126, 0.25);
}
}
.mfl-nav-cercle-halo:hover::before {
border-color: #E3C47E;
box-shadow:
0 0 22px rgba(255, 232, 178, 0.85),
0 0 40px rgba(227, 196, 126, 0.45),
inset 0 0 14px rgba(255, 232, 178, 0.3);
}
/* ════════════════════════════════════════════════════════════════════════ */
/* HALO LUMINEUX · CARTE "LE CERCLE" dans la section Système Maison */
/* Utilise pour éviter */
/* le conflit avec ::before/::after qui font les ornements aux coins */
/* ════════════════════════════════════════════════════════════════════════ */
.mfl-systeme-produit-cercle {
isolation: isolate;
}
.mfl-systeme-produit-cercle-aura {
position: absolute;
inset: -8px;
border-radius: 8px;
background: linear-gradient(135deg,
rgba(227, 196, 126, 0.85) 0%,
rgba(184, 154, 104, 0.45) 30%,
rgba(227, 196, 126, 0.85) 50%,
rgba(184, 154, 104, 0.45) 70%,
rgba(227, 196, 126, 0.85) 100%);
background-size: 200% 200%;
z-index: -2;
animation: mflCarteCercleHaloGlow 8s ease-in-out infinite;
filter: blur(3px);
pointer-events: none;
}
.mfl-systeme-produit-cercle-aura-glow {
position: absolute;
inset: -2px;
border-radius: 4px;
box-shadow:
0 0 32px rgba(227, 196, 126, 0.4),
0 0 64px rgba(184, 154, 104, 0.22),
0 0 96px rgba(184, 154, 104, 0.12);
pointer-events: none;
z-index: -1;
animation: mflCarteCerclePulse 6s ease-in-out infinite;
}
@keyframes mflCarteCercleHaloGlow {
0%, 100% {
background-position: 0% 50%;
opacity: 0.75;
}
50% {
background-position: 100% 50%;
opacity: 1;
}
}
@keyframes mflCarteCerclePulse {
0%, 100% {
box-shadow:
0 0 22px rgba(227, 196, 126, 0.25),
0 0 48px rgba(184, 154, 104, 0.14);
}
50% {
box-shadow:
0 0 36px rgba(227, 196, 126, 0.45),
0 0 72px rgba(184, 154, 104, 0.25);
}
}
.mfl-systeme-produit-cercle:hover .mfl-systeme-produit-cercle-aura {
filter: blur(4px);
opacity: 1;
}
.mfl-systeme-produit-cercle:hover .mfl-systeme-produit-cercle-aura-glow {
box-shadow:
0 0 50px rgba(255, 232, 178, 0.7),
0 0 88px rgba(227, 196, 126, 0.45),
0 0 120px rgba(184, 154, 104, 0.2);
}
/* Petit indicateur "signature Maison" en haut de la carte */
.mfl-systeme-produit-cercle .mfl-systeme-produit-numero {
position: relative;
}
/* prefers-reduced-motion · pulsations désactivées */
@media (prefers-reduced-motion: reduce) {
.mfl-nav-cercle-halo::before,
.mfl-systeme-produit-cercle::before,
.mfl-systeme-produit-cercle::after {
animation: none;
}
}
/* ════════════════════════════════════════════════════════════════════════ */
/* MENU · SÉPARATEUR "Orientation" + entrées Sillea / Morgan / Médical */
/* Visible essentiellement en mode mobile (menu burger ouvert) */
/* ════════════════════════════════════════════════════════════════════════ */
/* Séparateur "Orientation" dans le menu */
.mfl-nav-separateur {
list-style: none;
text-align: center;
margin: 1.75rem 0 0.5rem;
pointer-events: none;
}
.mfl-nav-separateur span {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--mfl-or, #B89A68);
padding: 0 1rem;
position: relative;
}
.mfl-nav-separateur span::before,
.mfl-nav-separateur span::after {
content: '';
position: absolute;
top: 50%;
width: 32px;
height: 1px;
background: linear-gradient(to right, transparent, rgba(184, 154, 104, 0.55), transparent);
}
.mfl-nav-separateur span::before {
right: 100%;
}
.mfl-nav-separateur span::after {
left: 100%;
}
/* Entrées Sillea / Morgan stylisées */
.mfl-nav-sillea,
.mfl-nav-morgan {
position: relative;
}
.mfl-nav-sillea::before {
content: '✦';
display: inline-block;
color: var(--mfl-or, #B89A68);
margin-right: 0.6em;
font-size: 0.85em;
opacity: 0.8;
}
.mfl-nav-morgan::before {
content: '◇';
display: inline-block;
color: var(--mfl-or, #B89A68);
margin-right: 0.6em;
font-size: 0.85em;
opacity: 0.85;
}
/* Sur desktop · masquer les nouvelles entrées dans la nav horizontale pour ne pas surcharger */
@media (min-width: 1025px) {
.mfl-nav-separateur,
.mfl-nav-sillea,
.mfl-nav-morgan,
.mfl-nav li a[href*="partenaires-accompagnement-medical"],
.mfl-nav li a[href^="mailto:"] {
display: none;
}
}
/* === 2 portes B2C/B2B dans le contexte Système Maison · espacement ajusté === */
.mfl-systeme-portes {
margin-top: 3rem !important;
max-width: 880px !important;
}
@media (max-width: 720px) {
.mfl-systeme-portes {
margin-top: 2.25rem !important;
}
}
/* prefers-reduced-motion pour les aura cercle */
@media (prefers-reduced-motion: reduce) {
.mfl-systeme-produit-cercle-aura,
.mfl-systeme-produit-cercle-aura-glow {
animation: none;
}
}
/* ════════════════════════════════════════════════════════════════════════ */
/* APPEL CERCLE · BLOC SÉCURITÉ · zones + certifications internationales */
/* "Sélection encadrée · sécurité avant tout" */
/* ════════════════════════════════════════════════════════════════════════ */
.mfl-cercle-appel-securite {
max-width: 880px;
margin: 0 auto 3.5rem;
padding: 2.25rem 2rem;
text-align: center;
background: linear-gradient(180deg, rgba(246, 241, 232, 0.04) 0%, rgba(246, 241, 232, 0.02) 100%);
border: 1px solid rgba(184, 154, 104, 0.32);
border-top: 2px solid #B89A68;
border-radius: 3px;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.mfl-cercle-appel-securite-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #E3C47E;
margin-bottom: 1.25rem;
opacity: 0.92;
}
.mfl-cercle-appel-securite-phrase {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1.05rem, 1.8vw, 1.2rem);
line-height: 1.7;
color: rgba(246, 241, 232, 0.92);
margin: 0 0 1.75rem;
}
.mfl-cercle-appel-securite-phrase em {
color: #E3C47E;
font-style: italic;
}
/* Certifications · pastilles or fines */
.mfl-cercle-appel-securite-certifs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem;
}
.mfl-cercle-appel-securite-certif {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #E3C47E;
padding: 0.45rem 1rem;
border: 1px solid rgba(184, 154, 104, 0.55);
border-radius: 999px;
background: rgba(184, 154, 104, 0.06);
transition: all 0.4s ease;
}
.mfl-cercle-appel-securite-certif:hover {
background: rgba(227, 196, 126, 0.14);
border-color: #E3C47E;
color: #F6F1E8;
transform: translateY(-2px);
}
@media (max-width: 720px) {
.mfl-cercle-appel-securite {
padding: 1.75rem 1.25rem;
margin-bottom: 2.5rem;
}
.mfl-cercle-appel-securite-certifs {
gap: 0.4rem;
}
.mfl-cercle-appel-securite-certif {
font-size: 0.6rem;
padding: 0.4rem 0.75rem;
letter-spacing: 0.18em;
}
}
/* ════════════════════════════════════════════════════════════════════════ */
/* MINI BANDEAU BOUTIQUE MAISON · accès direct aux 4 produits + Cercle */
/* Sous le header · style Clarins/Clinique adapté Maison */
/* ════════════════════════════════════════════════════════════════════════ */
.mfl-boutique-bandeau {
background: linear-gradient(180deg, #F6F1E8 0%, #FAF6EE 100%);
border-top: 1px solid rgba(184, 154, 104, 0.18);
border-bottom: 1px solid rgba(184, 154, 104, 0.22);
position: sticky;
top: 0;
z-index: 90;
box-shadow: 0 2px 12px rgba(61, 26, 32, 0.04);
}
.mfl-boutique-bandeau-inner {
max-width: 1340px;
margin: 0 auto;
padding: 0.65rem 1.5rem;
display: flex;
align-items: center;
gap: 2rem;
}
.mfl-boutique-bandeau-label {
font-family: 'Inter', sans-serif;
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #B89A68;
flex-shrink: 0;
position: relative;
padding-right: 1.25rem;
}
.mfl-boutique-bandeau-label::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 16px;
background: rgba(184, 154, 104, 0.35);
}
.mfl-boutique-bandeau-liste {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
flex: 1;
}
.mfl-boutique-bandeau-liste li {
display: flex;
align-items: center;
}
.mfl-boutique-bandeau-liste a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 0.95rem;
color: #3D1A20;
text-decoration: none;
padding: 0.45rem 0.9rem;
border-radius: 2px;
transition: all 0.4s ease;
letter-spacing: 0.01em;
}
.mfl-boutique-bandeau-liste a:hover,
.mfl-boutique-bandeau-liste a:focus-visible {
background: rgba(184, 154, 104, 0.1);
color: #B89A68;
outline: none;
}
.mfl-boutique-bandeau-eyebrow {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.75em;
color: #B89A68;
opacity: 0.85;
}
/* Carte Cercle · halo doré subtil sur le bandeau */
.mfl-boutique-bandeau-cercle {
background: linear-gradient(135deg, rgba(184, 154, 104, 0.06) 0%, rgba(227, 196, 126, 0.1) 100%);
border: 1px solid rgba(184, 154, 104, 0.32);
}
.mfl-boutique-bandeau-cercle:hover {
background: linear-gradient(135deg, rgba(184, 154, 104, 0.18) 0%, rgba(227, 196, 126, 0.22) 100%) !important;
border-color: #B89A68 !important;
}
/* Séparateur fin */
.mfl-boutique-bandeau-sep {
width: 1px;
height: 16px;
background: rgba(184, 154, 104, 0.32);
margin: 0 0.5rem;
}
/* CTA "Voir toute la Gamme" · or chaud, accent */
.mfl-boutique-bandeau-gamme {
font-family: 'Inter', sans-serif !important;
font-size: 0.7rem !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: #B89A68 !important;
margin-left: auto;
}
.mfl-boutique-bandeau-gamme:hover {
color: #3D1A20 !important;
}
/* Responsive · masque le bandeau sur mobile (déjà accessible via le menu burger enrichi) */
@media (max-width: 900px) {
.mfl-boutique-bandeau {
display: none;
}
}
@media (max-width: 1100px) {
.mfl-boutique-bandeau-label {
display: none;
}
.mfl-boutique-bandeau-liste a {
padding: 0.4rem 0.7rem;
font-size: 0.9rem;
}
}
/* ════════════════════════════════════════════════════════════════════════ */
/* POPUP NEWSLETTER MAISON · « Recevoir Le Carnet Maison » */
/* ════════════════════════════════════════════════════════════════════════ */
.mfl-newsletter-popup {
position: fixed;
inset: 0;
z-index: 9998;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.6s ease;
}
.mfl-newsletter-popup-ouvert {
opacity: 1;
pointer-events: auto;
}
.mfl-newsletter-voile {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(44, 8, 16, 0.55) 0%, rgba(20, 4, 8, 0.78) 100%);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.mfl-newsletter-cadre {
position: relative;
width: 100%;
max-width: 480px;
background: linear-gradient(180deg, #FAF6EE 0%, #F6F1E8 100%);
border: 1px solid rgba(184, 154, 104, 0.32);
border-radius: 4px;
padding: 3rem 2.5rem 2.5rem;
text-align: center;
box-shadow:
0 40px 90px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(184, 154, 104, 0.18);
transform: translateY(20px) scale(0.97);
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.mfl-newsletter-popup-ouvert .mfl-newsletter-cadre {
transform: translateY(0) scale(1);
}
.mfl-newsletter-fermer {
position: absolute;
top: 1rem;
right: 1rem;
background: transparent;
border: 1px solid rgba(184, 154, 104, 0.32);
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: rgba(61, 26, 32, 0.55);
transition: all 0.4s ease;
}
.mfl-newsletter-fermer:hover {
border-color: #B89A68;
color: #3D1A20;
background: rgba(184, 154, 104, 0.08);
}
.mfl-newsletter-orn {
font-size: 1.6rem;
color: #B89A68;
margin-bottom: 0.85rem;
animation: mflNewsletterOrnRespire 5s ease-in-out infinite;
}
@keyframes mflNewsletterOrnRespire {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.08); }
}
.mfl-newsletter-eyebrow {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #B89A68;
margin-bottom: 1rem;
}
.mfl-newsletter-titre {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1.7rem, 3vw, 2.1rem);
line-height: 1.2;
color: #3D1A20;
margin: 0 0 1.25rem;
letter-spacing: -0.005em;
}
.mfl-newsletter-titre em {
font-style: italic;
color: #B89A68;
}
.mfl-newsletter-baseline {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1rem;
line-height: 1.65;
color: rgba(30, 23, 21, 0.75);
margin: 0 0 2rem;
}
.mfl-newsletter-form {
display: flex;
flex-direction: column;
gap: 0.85rem;
text-align: left;
}
.mfl-newsletter-label {
font-family: 'Inter', sans-serif;
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #B89A68;
}
.mfl-newsletter-input {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 1.05rem;
background: #FFFFFF;
border: 1px solid rgba(184, 154, 104, 0.32);
border-radius: 2px;
padding: 0.85rem 1rem;
color: #3D1A20;
transition: all 0.4s ease;
}
.mfl-newsletter-input:focus {
outline: none;
border-color: #B89A68;
box-shadow: 0 0 0 3px rgba(184, 154, 104, 0.12);
}
.mfl-newsletter-cta {
font-family: 'Inter', sans-serif;
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: #2c0810;
background: linear-gradient(135deg, #B89A68 0%, #E3C47E 50%, #B89A68 100%);
border: 1px solid #B89A68;
border-radius: 2px;
padding: 1rem 1.5rem;
cursor: pointer;
margin-top: 0.5rem;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 18px rgba(184, 154, 104, 0.3);
}
.mfl-newsletter-cta:hover:not(:disabled) {
background: linear-gradient(135deg, #E3C47E 0%, #FFF4D6 50%, #E3C47E 100%);
letter-spacing: 0.28em;
transform: translateY(-1px);
}
.mfl-newsletter-cta:disabled {
opacity: 0.75;
cursor: default;
}
.mfl-newsletter-mention {
font-family: 'Inter', sans-serif;
font-size: 0.66rem;
font-style: italic;
color: rgba(30, 23, 21, 0.5);
margin: 1.5rem 0 0;
line-height: 1.5;
}
@media (max-width: 720px) {
.mfl-newsletter-cadre {
padding: 2.5rem 1.5rem 2rem;
max-width: calc(100vw - 1.5rem);
}
.mfl-newsletter-titre { font-size: 1.55rem; }
}
@media (prefers-reduced-motion: reduce) {
.mfl-newsletter-popup,
.mfl-newsletter-cadre,
.mfl-newsletter-orn { animation: none !important; transition: opacity 0.2s !important; }
}
/* ===== Fix sommaire des éditions — Maison Forever Lab ===== */
ol.mfl-edition-chapitres li{grid-template-columns:40px 1fr !important;align-items:start !important;}
ol.mfl-edition-chapitres li .mfl-edition-num{grid-column:1 !important;grid-row:1 / span 2 !important;}
ol.mfl-edition-chapitres li .mfl-edition-chapitre-titre{grid-column:2 !important;grid-row:1 !important;}
ol.mfl-edition-chapitres li .mfl-edition-chapitre-sous{grid-column:2 !important;grid-row:2 !important;width:auto !important;}
/* ===== WooCommerce — charte Maison (6 juin 2026) ===== */
.woocommerce div.product p.price,.woocommerce div.product span.price,.woocommerce ul.products li.product .price{color:var(--mfl-bordeaux,#4a0f1a)!important;font-family:"Cormorant Garamond",Georgia,serif!important;font-size:1.95rem!important;font-weight:500!important;line-height:1.1!important;}
.woocommerce a.button,.woocommerce button.button,.woocommerce .button,.woocommerce #respond input#submit,.woocommerce input.button,.woocommerce ul.products li.product .button,.woocommerce button.single_add_to_cart_button,.single_add_to_cart_button{background:var(--mfl-bordeaux,#4a0f1a)!important;color:var(--mfl-ivoire,#faf6ee)!important;font-family:"Inter",sans-serif!important;letter-spacing:.14em!important;text-transform:uppercase!important;font-size:.76rem!important;border-radius:0!important;padding:14px 30px!important;border:none!important;transition:background .2s,color .2s!important;}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button:hover,.woocommerce button.single_add_to_cart_button:hover,.single_add_to_cart_button:hover{background:var(--mfl-or,#c9a050)!important;color:#2c0810!important;}
.woocommerce ul.products li.product{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;}
.woocommerce ul.products li.product a img{margin-bottom:1rem!important;}
.woocommerce ul.products li.product .woocommerce-loop-product__title,.woocommerce ul.products li.product h2{min-height:3.1em;display:flex;align-items:center;justify-content:center;font-family:"Cormorant Garamond",serif!important;color:var(--mfl-bordeaux,#4a0f1a)!important;}
.woocommerce ul.products li.product .price{margin:.2rem 0 .9rem!important;}
.woocommerce ul.products li.product .button{margin-top:auto!important;}
.woocommerce .quantity input.qty{border:1px solid var(--mfl-or,#c9a050)!important;border-radius:0!important;padding:10px!important;font-family:"Inter",sans-serif!important;}
.woocommerce span.onsale{background:var(--mfl-or,#c9a050)!important;color:#2c0810!important;border-radius:0!important;}
/* ===== grille-equal-height : aligner prix+boutons (6 juin) ===== */
.woocommerce ul.products{display:flex!important;flex-wrap:wrap!important;align-items:stretch!important;}
.woocommerce ul.products li.product{float:none!important;display:flex!important;flex-direction:column!important;}
.woocommerce ul.products li.product .woocommerce-loop-product__title,.woocommerce ul.products li.product h2{min-height:0!important;}
.woocommerce ul.products li.product .price{margin-top:auto!important;margin-bottom:.6rem!important;}
.woocommerce ul.products li.product .button{margin-top:0!important;margin-bottom:0!important;align-self:center!important;}
/* bouton-bas-grille : pousser le bouton (enfant direct) tout en bas */
.woocommerce ul.products li.product > a.button,.woocommerce ul.products li.product > a.add_to_cart_button,.woocommerce ul.products li.product > .button{margin-top:auto!important;align-self:center!important;}