*/
font-size: 0;
color: transparent;
text-indent: -9999px;
overflow: hidden;
vertical-align: middle;
transition: opacity var(--tr), transform var(--tr);
}
.nav__logo:hover {
background-color: transparent;
opacity: 0.85;
transform: translateY(-1px);
box-shadow: none;
}
/* Cache le SVG inline (ancien rendu CSS du logo) */
.nav__logo > * { display: none; }
.nav__logo-mark { display: none; }
.nav__links {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: var(--space-5);
}
.nav__link {
font-size: 0.88rem;
font-weight: 500;
color: var(--text-mid);
position: relative;
white-space: nowrap; /* pas de retour à la ligne dans les libellés */
transition: color var(--tr);
}
.nav__link::after {
content: '';
position: absolute;
bottom: -4px; left: 0;
width: 0; height: 2px;
background: var(--blue);
border-radius: var(--radius-full);
transition: width var(--tr);
}
.nav__link:hover, .nav__link.active { color: var(--blue); }
.nav__link:hover::after, .nav__link.active::after { width: 100%; }
.nav__actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; flex-wrap: nowrap; }
.nav__lang {
/* Masqué tant que la traduction FR/AR n'est pas livrée — préserve le HTML pour réactivation future. */
display: none !important;
font-size: 0.78rem;
font-weight: 700;
color: var(--text-muted);
padding: 4px var(--space-3);
border: 1.5px solid var(--border);
border-radius: var(--radius-full);
transition: all var(--tr);
cursor: pointer;
}
.nav__lang:hover { color: var(--blue); border-color: var(--blue-light); }
.nav__hamburger { display: none; flex-direction: column; gap: 5px; padding: var(--space-2); cursor: pointer; }
.nav__hamburger span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: var(--radius-full); transition: all var(--tr); }
.nav__mobile {
display: none;
flex-direction: column;
padding: var(--space-5) var(--space-6);
border-top: 1px solid var(--border);
background: white;
gap: var(--space-3);
}
.nav__mobile.open { display: flex; }
.nav__mobile-link {
font-size: 0.95rem;
font-weight: 500;
color: var(--text-mid);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--border-light);
display: block;
transition: color var(--tr);
}
.nav__mobile-link:hover { color: var(--blue); }
/* ── 5b. NAV AUTH STATE ─────────────────────────────────────── */
/* Bouton "Se connecter" injecté par nav-auth.js */
.nav__login-btn {
font-size: 0.82rem;
font-weight: 600;
color: var(--navy);
padding: 7px 18px;
border: 1.5px solid var(--border);
border-radius: var(--radius-full);
background: white;
transition: all var(--tr);
white-space: nowrap;
text-decoration: none;
display: inline-flex;
align-items: center;
}
.nav__login-btn:hover {
border-color: var(--blue);
color: var(--blue);
background: var(--blue-pale);
}
/* Chip utilisateur connecté */
.nav__user-chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 6px 14px 6px 6px;
border-radius: var(--radius-full);
border: 1.5px solid var(--border);
background: white;
text-decoration: none;
color: var(--navy);
font-size: 0.85rem;
font-weight: 600;
transition: all var(--tr);
cursor: pointer;
white-space: nowrap;
}
.nav__user-chip:hover {
border-color: var(--blue);
background: var(--blue-pale);
color: var(--blue);
}
.nav__user-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%);
color: white;
font-size: 0.75rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.nav__user-name {
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
}
/* Bouton connexion mobile */
.nav__mobile-auth-btn {
font-size: 0.9rem;
font-weight: 600;
color: var(--blue);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--border-light);
display: block;
transition: color var(--tr);
text-decoration: none;
}
.nav__mobile-auth-btn:hover { color: var(--navy); }
/* ── 6. BOUTONS ─────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 0.875rem 2rem;
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 600;
border-radius: var(--radius-full);
transition: all var(--tr);
cursor: pointer;
white-space: nowrap;
letter-spacing: 0.01em;
border: 2px solid transparent;
}
/* Primaire — rose */
.btn--primary {
background: var(--rose);
color: white;
border-color: var(--rose);
box-shadow: 0 4px 18px rgba(175,59,110,0.28);
}
.btn--primary:hover {
background: #9B3362;
border-color: #9B3362;
transform: translateY(-2px) rotate(-0.4deg);
box-shadow: 0 10px 32px rgba(175,59,110,0.38);
}
.btn--primary:active {
transform: translateY(0) rotate(0);
box-shadow: 0 4px 12px rgba(175,59,110,0.22);
}
/* Secondaire — contour rose */
.btn--secondary {
background: white;
color: var(--rose);
border-color: rgba(175,59,110,0.28);
}
.btn--secondary:hover {
background: var(--rose-pale);
border-color: var(--rose);
color: var(--rose);
transform: translateY(-2px) rotate(0.3deg);
}
/* CTA fort — rose (action principale) */
.btn--terracotta {
background: var(--rose);
color: white;
border-color: var(--rose);
box-shadow: 0 4px 16px rgba(175,59,110,0.28);
}
.btn--terracotta:hover {
background: #9B3362;
border-color: #9B3362;
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(175,59,110,0.38);
}
/* Ghost */
.btn--ghost {
background: transparent;
color: var(--text-mid);
border-color: var(--border);
}
.btn--ghost:hover { border-color: var(--blue-light); color: var(--blue); }
.btn--lg { padding: 1.1rem 2.6rem; font-size: 0.975rem; }
.btn--sm { padding: 0.6rem 1.4rem; font-size: 0.82rem; }
.btn-group { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
/* ── 7. HERO ────────────────────────────────────────────────── */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
padding-top: 140px;
position: relative;
overflow: hidden;
background: linear-gradient(155deg, var(--blue-pale) 0%, var(--off-white) 50%, var(--blue-pale) 100%);
}
/* Blob décoratif bleu */
.hero::before {
content: '';
position: absolute;
top: -15%; right: -8%;
width: 55vw; height: 55vw;
max-width: 720px; max-height: 720px;
background: radial-gradient(ellipse, rgba(207,226,243,0.65) 0%, transparent 68%);
border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
pointer-events: none;
animation: blobDrift 10s ease-in-out infinite;
}
/* Blob rose discret */
.hero::after {
content: '';
position: absolute;
bottom: -8%; left: -4%;
width: 38vw; height: 38vw;
max-width: 480px; max-height: 480px;
background: radial-gradient(ellipse, rgba(200,132,166,0.12) 0%, transparent 68%);
border-radius: 40% 60% 50% 50% / 55% 45% 55% 45%;
pointer-events: none;
animation: blobDrift 14s ease-in-out infinite reverse;
}
@keyframes blobDrift {
0%, 100% { transform: translate(0,0) rotate(0deg); }
33% { transform: translate(10px,-14px) rotate(2deg); }
66% { transform: translate(-8px,10px) rotate(-1.5deg); }
}
.hero__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
align-items: center;
position: relative;
z-index: 1;
}
.hero__content { padding-right: var(--space-8); }
.hero__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: white;
border: 1.5px solid var(--blue-light);
color: var(--blue);
font-size: 0.76rem;
font-weight: 600;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
margin-bottom: var(--space-6);
letter-spacing: 0.04em;
box-shadow: var(--shadow-sm);
}
.hero__badge::before {
content: '●';
color: var(--blue);
font-size: 0.55rem;
animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
/* ── Skeleton shimmer global ─────────────────────────────────────
Donne un effet "loading premium" sur tous les .skeleton et .skel
pendant les ~30 s de cold start Render. Override les définitions
locales (les variables --sage-pale / --blue-pale étaient à #EAF2F9
uniforme = rectangle plat sans vie). */
.skeleton, .skel {
background: linear-gradient(
90deg,
#eef0f3 0%,
#f7f8fa 50%,
#eef0f3 100%
) !important;
background-size: 200% 100% !important;
animation: nafsolea-shimmer 1.4s ease-in-out infinite !important;
border-radius: 6px;
color: transparent !important;
}
@keyframes nafsolea-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Si l'utilisateur préfère réduire les animations */
@media (prefers-reduced-motion: reduce) {
.skeleton, .skel {
animation: pulse 1.6s ease-in-out infinite !important;
background: #eef0f3 !important;
}
}
.hero__title { margin-bottom: var(--space-6); }
.hero__title em {
font-style: normal;
color: var(--blue);
position: relative;
display: inline-block;
}
/* Underline décoratif sous l'emphase */
.hero__title em::after {
content: '';
position: absolute;
bottom: 2px; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--blue-light), var(--rose-light));
border-radius: var(--radius-full);
}
.hero__subtitle {
font-size: 1.05rem;
line-height: 1.88;
color: var(--text-light);
margin-bottom: var(--space-8);
max-width: 50ch;
}
.hero__trust {
margin-top: var(--space-8);
display: flex;
align-items: center;
gap: var(--space-6);
flex-wrap: wrap;
}
.hero__trust-item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 0.8rem;
color: var(--text-muted);
font-weight: 500;
}
.hero__trust-item svg { color: var(--blue); }
/* Carte psy dans le hero */
.hero__visual { position: relative; display: flex; align-items: center; justify-content: center; }
.hero__card {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-xl);
width: 100%;
max-width: 400px;
position: relative;
border: 1px solid var(--border-light);
}
.hero__card-avatar {
width: 68px; height: 68px;
border-radius: 50%;
background: linear-gradient(135deg, var(--blue-light), var(--blue));
display: flex; align-items: center; justify-content: center;
font-size: 1.9rem;
margin-bottom: var(--space-4);
border: 3px solid var(--blue-pale);
}
.hero__card h4 { font-size: 1rem; margin-bottom: 2px; color: var(--navy); }
.hero__card-role { font-size: 0.8rem; color: var(--blue); font-weight: 500; margin-bottom: var(--space-4); }
.hero__card-tags { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
/* Ligne langues : toutes sur une rangée */
.hero__card-langs { display: flex; flex-wrap: wrap; gap: var(--space-1); }
/* Ligne spécialités : sous les langues */
.hero__card-specs { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.hero__card-availability {
display: flex; align-items: center; gap: var(--space-2);
font-size: 0.78rem; color: var(--blue); font-weight: 500;
background: var(--blue-pale);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
margin-bottom: var(--space-5);
}
/* Bulles flottantes */
.hero__floating-1,
.hero__floating-2 {
position: absolute;
background: white;
border-radius: var(--radius-lg);
padding: var(--space-3) var(--space-4);
box-shadow: var(--shadow-lg);
display: flex; align-items: center; gap: var(--space-2);
font-size: 0.78rem; font-weight: 700;
border: 1px solid var(--border-light);
animation: float 4s ease-in-out infinite;
}
.hero__floating-1 { top: -18px; right: -28px; color: var(--blue); animation-delay: 0s; }
.hero__floating-2 { bottom: -12px; left: -22px; color: var(--rose); animation-delay: 2s; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
/* ── 8. TAGS / BADGES ───────────────────────────────────────── */
.tag {
font-size: 0.72rem;
font-weight: 600;
padding: 3px 10px;
border-radius: var(--radius-full);
background: var(--blue-pale);
color: var(--text-mid);
border: 1px solid var(--border);
}
.tag--sage {
background: var(--blue-pale);
color: var(--blue);
border-color: var(--blue-light);
}
.tag--terracotta {
background: var(--rose-pale);
color: var(--rose);
border-color: rgba(175,59,110,0.2);
}
.lang-badge {
font-size: 0.68rem; font-weight: 700;
padding: 2px 8px; border-radius: var(--radius-full);
background: var(--blue); color: white;
}
.lang-badge--ar { background: var(--rose); }
.lang-badge--en { background: var(--navy); }
/* ── 9. STATISTIQUES ────────────────────────────────────────── */
.stats {
background: white;
border-top: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
}
.stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--space-6); text-align: center; }
.stat-item__number {
font-family: var(--font-heading);
font-size: 2.8rem; font-weight: 800;
color: var(--blue);
line-height: 1; margin-bottom: var(--space-2);
letter-spacing: -0.04em;
}
.stat-item__label { font-size: 0.84rem; color: var(--text-muted); font-weight: 500; }
.stat-item__sub { font-size: 0.76rem; color: var(--text-light); margin-top: var(--space-1); }
/* ── 10. PROBLÈME ───────────────────────────────────────────── */
.problem {
background: linear-gradient(180deg, #FDF6FA 0%, var(--rose-pale) 100%);
color: var(--text);
position: relative;
}
.problem .section-header .label { color: var(--rose); }
.problem .section-header h2 { color: var(--navy); }
.problem .section-header p { color: var(--text-light); }
/* Grille 2 colonnes × 2 lignes */
.problem__cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.75rem;
max-width: 860px;
margin-inline: auto;
}
.problem-card {
background: #fff;
border: 1px solid rgba(175,59,110,0.12);
border-radius: var(--radius-xl);
padding: 2rem 1.75rem 1.75rem;
display: flex;
flex-direction: column;
gap: 0;
transition: transform 0.32s ease, box-shadow 0.32s ease;
box-shadow: 0 4px 20px rgba(175,59,110,0.07);
}
.problem-card:hover {
transform: translateY(-5px) rotate(0.4deg);
box-shadow: 0 14px 40px rgba(175,59,110,0.15);
}
.problem-card__icon {
width: 60px; height: 60px;
border-radius: 16px;
background: var(--rose-pale);
color: var(--rose);
display: flex; align-items: center; justify-content: center;
transform: rotate(-3deg);
flex-shrink: 0;
margin-bottom: 1.25rem;
font-size: 0;
}
.problem-card__icon svg { width: 30px; height: 30px; }
.problem-card h4 { color: var(--navy); font-size: 1.1rem; font-weight: 700; margin-bottom: 0.6rem; line-height: 1.3; }
.problem-card p { color: var(--text-light); font-size: 0.94rem; max-width: none; line-height: 1.7; }
@media (max-width: 640px) { .problem__cards { grid-template-columns: 1fr; } }
/* ── 11. SOLUTION ───────────────────────────────────────────── */
.solution { background: var(--blue-pale); }
.solution__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.solution__mockup {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-6);
box-shadow: var(--shadow-xl);
max-width: 420px;
border: 1px solid var(--border-light);
}
.solution__mockup-header {
display: flex; align-items: center; gap: var(--space-3);
margin-bottom: var(--space-5);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--border-light);
}
.solution__avatar {
width: 44px; height: 44px; border-radius: 50%;
background: var(--rose-pale);
color: var(--rose);
display: flex; align-items: center; justify-content: center;
font-size: 0; flex-shrink: 0;
}
.solution__values { display: flex; flex-direction: column; gap: var(--space-2); }
.value-row {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-2) 0;
background: transparent;
font-size: 0.875rem; font-weight: 500; color: var(--text-mid);
}
.value-row__icon {
width: 32px; height: 32px;
background: var(--rose-pale);
border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
font-size: 0.9rem; flex-shrink: 0;
box-shadow: 0 2px 8px rgba(175,59,110,0.12);
}
.solution__content { display: flex; flex-direction: column; gap: var(--space-6); }
.solution__feature { display: flex; gap: var(--space-4); align-items: flex-start; }
.solution__feature-num {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 600;
font-size: 2.4rem;
color: var(--rose);
opacity: 0.65;
line-height: 1;
flex-shrink: 0;
width: 56px;
transform: rotate(-3deg);
background: none;
}
.solution__feature h4 { margin-bottom: 2px; }
.solution__feature p { font-size: 0.9rem; max-width: none; }
/* ── 12. ÉTAPES ─────────────────────────────────────────────── */
.steps { background: var(--off-white); }
.steps__grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: var(--space-6);
position: relative;
}
.steps__grid::before {
content: '';
position: absolute;
top: 52px;
left: calc(16.67% + 16px);
right: calc(16.67% + 16px);
height: 2px;
background: linear-gradient(90deg, var(--blue-light), var(--blue), var(--blue-light));
z-index: 0;
}
.step-card {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-8);
text-align: center;
box-shadow: var(--shadow-md);
position: relative; z-index: 1;
transition: transform var(--tr), box-shadow var(--tr);
border: 1px solid var(--border-light);
}
.step-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.step-card__num {
width: 64px; height: 64px;
background: linear-gradient(135deg, var(--blue), var(--navy));
color: white; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem; font-weight: 700;
margin: 0 auto var(--space-5);
box-shadow: var(--shadow-sage);
}
.step-card h3 { font-size: 1.1rem; margin-bottom: var(--space-3); }
.step-card p { font-size: 0.875rem; margin-inline: auto; }
/* ── 13. PSYCHOLOGUE CARDS ──────────────────────────────────── */
.psychologist-card {
background: white;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: transform var(--tr), box-shadow var(--tr);
border: 1px solid var(--border-light);
}
.psychologist-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.psychologist-card__header {
background: linear-gradient(160deg, var(--blue-pale) 0%, var(--blue-light) 100%);
padding: 1.75rem var(--space-6) 0;
display: flex; gap: var(--space-4); align-items: flex-start;
}
.psychologist-card__photo-container {
width: 78px; height: 78px;
border-radius: 50%;
border: 3px solid white;
box-shadow: var(--shadow-md);
background: linear-gradient(135deg, var(--blue-light), var(--blue));
display: flex; align-items: center; justify-content: center;
font-size: 2rem; flex-shrink: 0;
}
.psychologist-card__meta { flex: 1; padding-top: var(--space-2); }
.psychologist-card__meta h3 { font-size: 1.05rem; margin-bottom: 3px; }
.psychologist-card__title { font-size: 0.78rem; color: var(--blue); font-weight: 600; margin-bottom: var(--space-3); }
.psychologist-card__langs { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.psychologist-card__body { padding: var(--space-5) var(--space-6) var(--space-6); }
.psychologist-card__specialties { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.psychologist-card__bio { font-size: 0.86rem; line-height: 1.65; margin-bottom: var(--space-5); max-width: none; }
.psychologist-card__footer {
display: flex; align-items: center; justify-content: space-between;
padding: var(--space-4) var(--space-6);
border-top: 1px solid var(--border-light);
background: var(--off-white);
}
.psychologist-card__price { font-size: 0.82rem; color: var(--text-muted); }
.psychologist-card__price strong { color: var(--navy); font-size: 1.1rem; font-weight: 700; }
/* ── 14. TÉMOIGNAGES ────────────────────────────────────────── */
.testimonials { background: var(--blue-pale); }
.testimonials__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: var(--space-5); }
.testimonial-card {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
transition: transform var(--tr), box-shadow var(--tr);
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testimonial-card__stars { color: #F5A623; font-size: 0.9rem; letter-spacing: 2px; margin-bottom: var(--space-4); }
.testimonial-card__quote {
font-size: 0.975rem; line-height: 1.8;
color: var(--navy); font-style: italic; font-weight: 400;
margin-bottom: var(--space-6); max-width: none;
}
.testimonial-card__author { display: flex; align-items: center; gap: var(--space-3); }
.testimonial-card__avatar {
width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg, var(--blue-pale), var(--blue-light));
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem; flex-shrink: 0;
}
.testimonial-card__name { font-weight: 700; font-size: 0.875rem; color: var(--navy); }
.testimonial-card__detail { font-size: 0.75rem; color: var(--text-muted); }
/* ── 15. ÉTHIQUE ────────────────────────────────────────────── */
.ethics {
background: var(--blue);
color: white;
position: relative;
overflow: hidden;
}
.ethics::before {
content: 'نفس';
position: absolute;
right: 3%; top: 50%;
transform: translateY(-50%);
font-size: 18rem; opacity: 0.04;
color: white; font-family: serif;
pointer-events: none; line-height: 1;
}
.ethics .section-header .label { color: rgba(207,226,243,0.75); }
.ethics .section-header h2 { color: white; }
.ethics .section-header p { color: rgba(255,255,255,0.72); }
.ethics__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: var(--space-6); position: relative; z-index: 1; }
.ethics-item { text-align: center; padding: var(--space-6); }
.ethics-item__icon { font-size: 2.2rem; margin-bottom: var(--space-3); }
.ethics-item h4 { color: white; font-size: 0.95rem; margin-bottom: var(--space-2); }
.ethics-item p { color: rgba(255,255,255,0.68); font-size: 0.86rem; max-width: none; }
/* ── 16. BLOG CARDS ─────────────────────────────────────────── */
.blog-card {
background: white;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
transition: transform var(--tr), box-shadow var(--tr);
display: flex; flex-direction: column;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.blog-card__image {
width: 100%; aspect-ratio: 16/9;
background: linear-gradient(135deg, var(--blue-pale) 0%, var(--blue-light) 100%);
display: flex; align-items: center; justify-content: center;
font-size: 3rem;
}
.blog-card__body { padding: var(--space-6); flex: 1; display: flex; flex-direction: column; }
.blog-card__category { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--blue); margin-bottom: var(--space-3); }
.blog-card__title { font-family: var(--font-heading); font-size: 1.02rem; font-weight: 700; line-height: 1.4; color: var(--navy); margin-bottom: var(--space-3); flex: 1; }
.blog-card__excerpt { font-size: 0.85rem; line-height: 1.65; margin-bottom: var(--space-4); max-width: none; }
.blog-card__meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: var(--text-muted); }
.blog-card__read-time { display: flex; align-items: center; gap: var(--space-1); }
/* ── 17. FAQ ────────────────────────────────────────────────── */
.faq__list { display: flex; flex-direction: column; gap: var(--space-3); max-width: 800px; margin-inline: auto; }
.faq-item {
background: white;
border-radius: var(--radius-lg);
border: 1.5px solid var(--border);
overflow: hidden;
transition: border-color var(--tr);
}
.faq-item.open { border-color: var(--blue); }
.faq-item__question {
display: flex; align-items: center; justify-content: space-between;
padding: var(--space-5) var(--space-6);
cursor: pointer; gap: var(--space-4); user-select: none;
}
.faq-item__question h4 {
font-size: 0.95rem; font-weight: 600; color: var(--navy);
font-family: var(--font-body); line-height: 1.4;
}
.faq-item__icon {
width: 28px; height: 28px; border-radius: 50%;
background: var(--blue-pale);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; font-size: 1rem; color: var(--blue);
transition: background var(--tr), transform var(--tr), color var(--tr);
}
.faq-item.open .faq-item__icon { background: var(--blue); color: white; transform: rotate(45deg); }
.faq-item__answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding var(--tr); padding: 0 var(--space-6); }
.faq-item.open .faq-item__answer { max-height: 500px; padding: 0 var(--space-6) var(--space-5); }
.faq-item__answer p { font-size: 0.9rem; line-height: 1.75; max-width: none; }
/* ── 18. FORMULAIRES ────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label { font-size: 0.84rem; font-weight: 600; color: var(--navy); }
.form-input, .form-select, .form-textarea {
width: 100%; padding: 0.85rem var(--space-4);
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
background: white; color: var(--text);
font-size: 0.95rem; font-family: var(--font-body);
transition: border-color var(--tr), box-shadow var(--tr);
outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(85,133,181,0.12);
}
.form-textarea { resize: vertical; min-height: 120px; }
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235585B5' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 40px; cursor: pointer;
}
.form-hint { font-size: 0.78rem; color: var(--text-muted); }
.form-error { font-size: 0.78rem; color: #D45C5C; }
/* ── 19. FILTRES ────────────────────────────────────────────── */
.filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-8); }
.filter-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.filter-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filter-tab {
font-size: 0.82rem; font-weight: 600;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
border: 1.5px solid var(--border);
color: var(--text-mid); background: white;
cursor: pointer; transition: all var(--tr);
}
.filter-tab:hover { border-color: var(--blue-light); color: var(--blue); }
.filter-tab.active { background: var(--blue); border-color: var(--blue); color: white; }
/* ── 20. NEWSLETTER ─────────────────────────────────────────── */
.newsletter {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-12);
text-align: center;
border: 1px solid var(--border-light);
box-shadow: var(--shadow-md);
}
.newsletter__form { display: flex; gap: var(--space-3); max-width: 480px; margin: var(--space-6) auto 0; }
.newsletter__form .form-input { flex: 1; }
/* ── 21. PAGE HERO ──────────────────────────────────────────── */
.page-hero {
padding-top: calc(140px + var(--space-16));
padding-bottom: var(--space-16);
background: linear-gradient(155deg, var(--blue-pale) 0%, var(--off-white) 55%, var(--blue-pale) 100%);
text-align: center;
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
top: -20%; right: -5%;
width: 40%; height: 140%;
background: radial-gradient(ellipse, rgba(207,226,243,0.45) 0%, transparent 68%);
border-radius: 45% 55% 55% 45% / 50%;
pointer-events: none;
}
.page-hero .label { margin-bottom: var(--space-3); display: block; }
.page-hero h1 { margin-bottom: var(--space-5); }
.page-hero p { font-size: 1.05rem; margin-inline: auto; }
/* ── 22. CTA SECTION ────────────────────────────────────────── */
.cta-section {
background: linear-gradient(135deg, var(--navy) 0%, #1E2D4F 100%);
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: -50%; left: -10%;
width: 70%; height: 200%;
background: radial-gradient(ellipse, rgba(85,133,181,0.12) 0%, transparent 68%);
pointer-events: none;
}
.cta-section::after {
content: '';
position: absolute;
bottom: -30%; right: -5%;
width: 40%; height: 150%;
background: radial-gradient(ellipse, rgba(175,59,110,0.10) 0%, transparent 68%);
pointer-events: none;
}
.cta-section .container { position: relative; z-index: 1; text-align: center; }
.cta-section h2 { color: white; margin-bottom: var(--space-4); }
.cta-section p { color: rgba(255,255,255,0.65); font-size: 1.05rem; margin-bottom: var(--space-8); margin-inline: auto; }
/* ── 23. BOOKING ────────────────────────────────────────────── */
.booking__steps-indicator { display: flex; align-items: center; }
.booking__step-dot {
width: 34px; height: 34px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.82rem; font-weight: 700; flex-shrink: 0;
background: var(--border); color: var(--text-muted);
transition: all var(--tr);
}
.booking__step-dot.active { background: var(--blue); color: white; }
.booking__step-dot.done { background: var(--navy); color: white; }
.booking__step-line { flex: 1; height: 2px; background: var(--border); transition: background var(--tr); }
.booking__step-line.done { background: var(--blue); }
.booking__panel {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-md);
border: 1px solid var(--border-light);
}
.time-slots { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-3); margin-top: var(--space-4); }
.time-slot {
padding: var(--space-3); border: 1.5px solid var(--border);
border-radius: var(--radius-md); text-align: center;
font-size: 0.86rem; font-weight: 600; color: var(--text-mid);
cursor: pointer; transition: all var(--tr);
}
.time-slot:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-pale); }
.time-slot.selected { background: var(--blue); border-color: var(--blue); color: white; }
.time-slot.unavailable { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
/* ── 24. BADGES ─────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-full); }
.badge--green { background: rgba(56,189,100,0.12); color: #1A8B40; }
.badge--available { background: var(--blue-pale); color: var(--blue); }
/* ── 25. STATS SECTION ──────────────────────────────────────── */
.stats { background: white; }
/* ── 26. QUIZ MODAL ─────────────────────────────────────────── */
.quiz-overlay {
position: fixed; inset: 0;
background: rgba(43,59,94,0.62);
backdrop-filter: blur(10px);
z-index: 2000;
display: flex; align-items: center; justify-content: center;
padding: var(--space-6);
opacity: 0; pointer-events: none;
transition: opacity var(--tr-slow);
}
.quiz-overlay.open { opacity: 1; pointer-events: all; }
.quiz-modal {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-10);
max-width: 540px; width: 100%;
max-height: 90vh; overflow-y: auto;
transform: translateY(20px) scale(0.97);
transition: transform var(--tr-slow);
position: relative;
}
.quiz-overlay.open .quiz-modal { transform: translateY(0) scale(1); }
.quiz-modal__close {
position: absolute; top: var(--space-4); right: var(--space-4);
width: 32px; height: 32px; border-radius: 50%;
background: var(--blue-pale);
display: flex; align-items: center; justify-content: center;
font-size: 0.95rem; color: var(--text-mid);
cursor: pointer; transition: background var(--tr);
}
.quiz-modal__close:hover { background: var(--blue-light); }
.quiz-progress { height: 4px; background: var(--blue-pale); border-radius: var(--radius-full); margin-bottom: var(--space-8); overflow: hidden; }
.quiz-progress__bar { height: 100%; background: linear-gradient(90deg, var(--blue), var(--rose)); border-radius: var(--radius-full); transition: width 0.5s ease; }
.quiz-options { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-5) 0; }
.quiz-option {
padding: var(--space-4) var(--space-5);
border: 2px solid var(--border);
border-radius: var(--radius-lg);
cursor: pointer; font-size: 0.92rem;
color: var(--text-mid); font-weight: 500;
transition: all var(--tr); text-align: left;
font-family: var(--font-body); background: white;
}
.quiz-option:hover { border-color: var(--blue-light); background: var(--blue-pale); color: var(--blue); }
.quiz-option.selected{ border-color: var(--blue); background: var(--blue-pale); color: var(--blue); }
/* ── 27. SCROLL REVEAL ──────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.30s; }
.reveal-delay-4 { transition-delay: 0.40s; }
/* ── 27b. MODAL — animations & design système global ───────── */
/* Animation d'entrée utilisée par tous les modaux de la plateforme. */
@keyframes nafModalIn {
from {
opacity: 0;
transform: translateY(20px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes nafModalBackdropIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ── Close button premium (rond, discret) ── */
.modal-close-btn {
position: absolute;
top: var(--space-4);
right: var(--space-4);
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--off-white);
border: 1.5px solid var(--border-light);
color: var(--text-muted);
font-size: 1rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--tr);
}
.modal-close-btn:hover {
background: var(--blue-pale);
border-color: var(--blue);
color: var(--navy);
transform: rotate(90deg);
}
/* ── 28. SCROLL TO TOP ──────────────────────────────────────── */
.scroll-top {
position: fixed;
bottom: var(--space-6); right: var(--space-6);
width: 46px; height: 46px; border-radius: 50%;
background: var(--blue); color: white;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem;
box-shadow: 0 4px 18px rgba(85,133,181,0.35);
cursor: pointer; opacity: 0; transform: translateY(12px);
transition: opacity var(--tr), transform var(--tr), background var(--tr);
z-index: 900; border: none;
}
.scroll-top.visible { opacity: 1; transform: translateY(0); }
.scroll-top:hover { background: var(--navy); }
/* ── 29. COOKIE BANNER ──────────────────────────────────────── */
.cookie-banner {
position: fixed; bottom: var(--space-4); left: var(--space-4); right: var(--space-4);
max-width: 540px;
background: var(--navy); color: white;
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-6);
z-index: 1500; box-shadow: var(--shadow-xl);
transform: translateY(calc(100% + var(--space-8)));
transition: transform 0.5s ease;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner p { font-size: 0.84rem; color: rgba(255,255,255,0.7); margin-bottom: var(--space-4); max-width: none; }
.cookie-banner__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
/* ── 30. PAGE ABOUT ─────────────────────────────────────────── */
.about-quote {
font-size: 1.35rem; font-style: italic; font-weight: 400; line-height: 1.65;
color: var(--navy);
border-left: 4px solid var(--blue);
padding-left: var(--space-6);
margin: var(--space-8) 0;
}
.value-card {
background: white; border-radius: var(--radius-lg);
padding: var(--space-6); box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
display: flex; gap: var(--space-4); align-items: flex-start;
transition: transform var(--tr), box-shadow var(--tr);
}
.value-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.value-card__icon { font-size: 1.7rem; flex-shrink: 0; }
.value-card h4 { margin-bottom: var(--space-2); }
.value-card p { font-size: 0.86rem; max-width: none; }
/* ── 31. UTILITAIRES ────────────────────────────────────────── */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-sage { color: var(--blue); }
.text-terracotta { color: var(--rose); }
.text-muted { color: var(--text-muted); }
.bg-beige { background: var(--blue-pale); }
.bg-sage-pale { background: var(--blue-pale); }
.bg-white { background: white; }
.mt-2{margin-top:var(--space-2)} .mt-4{margin-top:var(--space-4)} .mt-6{margin-top:var(--space-6)} .mt-8{margin-top:var(--space-8)}
.mb-4{margin-bottom:var(--space-4)} .mb-6{margin-bottom:var(--space-6)} .mb-8{margin-bottom:var(--space-8)}
.separator { height: 1px; background: var(--border); margin-block: var(--space-8); }
/* ── 31.5 FOOTER ─────────────────────────────────────────────── */
.footer {
background: linear-gradient(180deg, var(--navy) 0%, #1f2d4a 100%);
color: rgba(255, 255, 255, 0.82);
padding: var(--space-16) 0 var(--space-8);
margin-top: var(--space-20);
font-size: 0.92rem;
line-height: 1.65;
}
.footer .container { max-width: 1180px; }
.footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: var(--space-12);
padding-bottom: var(--space-10);
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.footer__brand h3 {
/* Logo texte blanc — Cormorant Garamond italique premium */
color: #ffffff;
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 600;
font-size: 2.8rem; /* compensé pour la finesse optique */
line-height: 1;
letter-spacing: -0.01em;
background-image: none;
width: auto;
height: auto;
margin-bottom: var(--space-3);
}
.footer__brand p {
color: rgba(255, 255, 255, 0.65);
max-width: 340px;
margin-bottom: var(--space-5);
font-size: 0.9rem;
}
.footer__socials { display: flex; gap: var(--space-2); }
.footer__social {
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: rgba(255, 255, 255, 0.78);
font-size: 1.05rem;
text-decoration: none;
transition: all var(--tr);
}
.footer__social svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.footer__social:hover svg { fill: currentColor; }
.footer__social:hover {
background: var(--rose);
border-color: var(--rose);
transform: translateY(-2px);
}
.footer__col h5 {
color: white;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--space-4);
}
.footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer__link {
color: rgba(255, 255, 255, 0.68);
text-decoration: none;
font-size: 0.9rem;
transition: color var(--tr), padding-left var(--tr);
display: inline-block;
}
.footer__link:hover {
color: white;
padding-left: 4px;
}
.footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--space-6);
gap: var(--space-4);
}
.footer__copyright {
color: rgba(255, 255, 255, 0.5);
font-size: 0.83rem;
margin: 0;
}
.footer__legal { display: flex; gap: var(--space-5); }
.footer__legal a {
color: rgba(255, 255, 255, 0.55);
text-decoration: none;
font-size: 0.83rem;
transition: color var(--tr);
}
.footer__legal a:hover { color: white; }
/* ── 32.0 CMS ANTI-FLASH ──────────────────────────────────────
Les éléments [data-content-key] sont gérés par content.js.
On les rend invisibles jusqu'à ce que le fetch soit résolu
(classe .cms-ready ajoutée sur par content.js).
Sans ce masquage, le texte statique de fallback flash brièvement
avant d'être remplacé par la valeur CMS. ─────────────────── */
[data-content-key] {
transition: opacity 0.18s ease;
}
html:not(.cms-ready) [data-content-key] {
opacity: 0;
}
/* ── 32. RESPONSIVE ─────────────────────────────────────────── */
/* Sur desktop : le menu mobile est TOUJOURS caché, même s'il a la classe .open.
Empêche le double affichage de "Se connecter" si la fenêtre est redimensionnée
alors que le menu hamburger était ouvert. */
@media (min-width: 1101px) {
.nav__mobile { display: none !important; }
}
@media (max-width: 1100px) {
/* Sous 1100px, le menu desktop n'a plus la place de tenir sur une seule
ligne à côté du logo agrandi. On passe au hamburger. */
.nav__links, .nav__actions { display: none; }
.nav__hamburger { display: flex; }
}
@media (max-width: 1024px) {
.hero__inner { grid-template-columns: 1fr; text-align: center; }
.hero__content { padding-right: 0; display: flex; flex-direction: column; align-items: center; }
.hero__subtitle { margin-inline: auto; }
.hero__visual { display: none; }
.hero__trust { justify-content: center; }
.solution__inner { grid-template-columns: 1fr; }
.steps__grid { grid-template-columns: 1fr; }
.steps__grid::before { display: none; }
.footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
:root { --space-20: 4rem; --space-32: 6rem; }
.nav__inner { height: 100px; }
.nav__logo { width: 280px; height: 84px; }
.hero { min-height: auto; padding-block: calc(88px + var(--space-10)) var(--space-10); }
.footer__grid { grid-template-columns: 1fr; }
.footer__bottom { flex-direction: column; text-align: center; }
.newsletter__form { flex-direction: column; }
.time-slots { grid-template-columns: repeat(2,1fr); }
.testimonials__grid{ grid-template-columns: 1fr; }
.problem__cards { grid-template-columns: 1fr; }
.grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.container { padding-inline: var(--space-4); }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.55rem; }
.btn--lg { padding: 1rem 1.8rem; font-size: 0.92rem; }
.grid-3, .grid-4 { grid-template-columns: 1fr; }
.filter-bar { flex-direction: column; align-items: flex-start; }
}
/* ── 33. RESPONSIVE MOBILE COMPLÉMENTAIRE ───────────────────── */
/* Toutes les corrections issues de l'audit mobile (mai 2026). */
/* ── Touch targets globaux ──────────────────────────────────── */
/* Les boutons "petits" doivent faire min 44px pour les doigts. */
@media (max-width: 768px) {
.btn--sm {
padding: 0.72rem 1.3rem;
min-height: 44px;
}
/* Labels / tags / badges : 14px minimum pour la lisibilité */
.label { font-size: 0.8rem; }
.tag { font-size: 0.8rem; }
.lang-badge { font-size: 0.78rem; }
/* Scroll-to-top : ne pas chevaucher le cookie banner */
.scroll-top { bottom: 80px; }
}
/* ── Navigation ─────────────────────────────────────────────── */
@media (max-width: 400px) {
/* Logo encore plus petit sur les très petits écrans */
.nav__logo { width: 220px; height: 66px; }
.nav__inner { height: 84px; }
/* Ajuster le padding-top des pages qui compensent la nav */
.nav + section:not(.hero):not(.page-hero):not([class*='-page']):not([class*='-hero']),
.nav + main:not([class*='-page']),
.nav + div[class*='-page']:not(.account-page):not(.cabinet-page) {
padding-top: calc(72px + var(--space-4));
}
}
/* ── Hero — bulles décoratives ──────────────────────────────── */
@media (max-width: 480px) {
/* Les bulles flottantes sortent de l'écran sur mobile → masquées */
.hero__floating-1,
.hero__floating-2 { display: none; }
/* Section padding plus compact sur petits écrans */
:root { --space-20: 2.5rem; }
.section { padding-block: 2.5rem; }
}
/* ── Statistiques homepage ──────────────────────────────────── */
@media (max-width: 480px) {
.stats__grid { grid-template-columns: 1fr 1fr; }
.stat-item__number {
font-size: clamp(1.8rem, 5vw, 2.8rem);
}
}
/* ── Solution section ───────────────────────────────────────── */
@media (max-width: 1024px) {
.solution__inner { gap: var(--space-8); }
.mission-inner { gap: var(--space-8); }
}
/* ── Footer ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
.footer { padding-top: var(--space-10); }
.footer__grid { gap: var(--space-6); }
.footer__brand h3 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
}
@media (max-width: 480px) {
.footer__bottom { padding-top: var(--space-4); }
.newsletter { padding: var(--space-6); }
.newsletter__form { max-width: 100%; }
.cookie-banner { padding: var(--space-4); }
}
/* ── Quiz modal ─────────────────────────────────────────────── */
@media (max-width: 480px) {
.quiz-modal { padding: var(--space-5) var(--space-4); }
.quiz-options { gap: var(--space-2); }
}
/* ── Psychologues (liste) ───────────────────────────────────── */
@media (max-width: 480px) {
/* Les filtres passent en colonne plein-width */
.filters-panel { gap: var(--space-3); }
.filter-group { width: 100%; min-width: 0; }
.psys-grid { gap: var(--space-4); }
/* Actions sur la card (prix + CTA) : pleine largeur */
.psy-full-card__actions { width: 100%; flex-wrap: wrap; }
.psy-full-card__footer { gap: var(--space-3); }
}
/* ── Psychologue détail ─────────────────────────────────────── */
@media (max-width: 480px) {
/* Grille disponibilité 7 colonnes → 4 sur petit écran */
.availability-grid { grid-template-columns: repeat(4, 1fr); }
.psy-detail__main h1 { font-size: clamp(1.4rem, 4vw, 1.8rem); }
.psy-section { padding: var(--space-4); }
/* Avatar + info en colonne sous 480px */
.psy-detail__head { flex-direction: column; gap: var(--space-4); }
.psy-detail__avatar { width: 80px; height: 80px; }
}
/* ── Pages auth (login / inscription) ──────────────────────── */
@media (max-width: 900px) {
.auth-form-wrap { padding: var(--space-6); }
}
@media (max-width: 480px) {
.auth-form-wrap { padding: var(--space-5) var(--space-4); }
/* form-row en 2 colonnes → 1 colonne sur mobile */
.form-row { grid-template-columns: 1fr !important; }
/* Sélecteur de rôle (patient/psy) en 1 colonne sous 400px */
.role-selector { grid-template-columns: 1fr; }
}
/* ── FAQ ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
.search-faq { padding: var(--space-4); }
.still-questions { padding: var(--space-6); }
.contact-options { flex-direction: column; }
}
/* ── Rendez-vous (booking) ──────────────────────────────────── */
@media (max-width: 480px) {
.booking__panel { padding: var(--space-4) !important; }
/* Slots horaires : touch target 44px minimum */
.slot-btn { min-height: 44px; }
/* Boutons navigation calendrier : 44px minimum */
.calendar-nav button,
.rs-cal__nav-btn { width: 44px; height: 44px; min-width: 44px; }
/* Grille de créneaux : 2 colonnes sur très petits écrans */
.slots-grid { grid-template-columns: repeat(2, 1fr) !important; }
/* Ligne psy : prix plus petit */
.psy-select-price { font-size: 0.92rem; }
}
/* ── Mon compte (patient dashboard) ────────────────────────── */
@media (max-width: 768px) {
/* Nav 80px sur desktop, même hauteur approx sur tablette */
.account-page { padding-top: calc(80px + var(--space-5)); }
}
@media (max-width: 600px) {
/* Ligne RDV : 4 colonnes → 2 colonnes + 2e ligne */
.appt-row {
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
}
.appt-row > .appt-date-block { grid-row: 1 / 3; }
.appt-row > .appt-info { grid-column: 2; grid-row: 1; }
.appt-row > .appt-badge { grid-column: 2; grid-row: 2; justify-self: start; }
.appt-row > .appt-actions { grid-column: 1 / -1; grid-row: 3;
padding: var(--space-2) var(--space-6) var(--space-3);
flex-wrap: wrap; gap: var(--space-2); }
}
@media (max-width: 480px) {
/* Boutons actions RDV : touch target 44px */
.appt-actions a,
.appt-actions button { min-height: 44px; padding: 10px 14px; font-size: .8rem; }
/* Date mois lisible */
.appt-date-month { font-size: 0.75rem; }
/* Onglets "À venir / Passés / Tous" : scroll horizontal */
.appt-tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}
/* ── Mon cabinet (psy dashboard) ────────────────────────────── */
@media (max-width: 768px) {
.cabinet-hero { padding: var(--space-5); gap: var(--space-4); }
.cabinet-hero h1 { font-size: clamp(1.3rem, 4vw, 1.7rem); }
}
@media (max-width: 600px) {
/* Ligne RDV psy : 5 colonnes → 2 colonnes + 2e ligne */
.appointment-row {
grid-template-columns: auto 1fr !important;
grid-template-rows: auto auto auto;
row-gap: var(--space-2);
}
.appointment-row__avatar { grid-row: 1 / 3; }
.appointment-row > div:nth-child(2) { grid-column: 2; grid-row: 1; }
.appointment-row .badge-status { grid-column: 2; grid-row: 2; justify-self: start; }
.appointment-row__time { grid-column: 1 / -1; grid-row: 3;
display: flex; gap: var(--space-3); align-items: center; }
.appt-row__actions { grid-column: 1 / -1; grid-row: 4;
flex-wrap: wrap; gap: var(--space-2); }
}
@media (max-width: 400px) {
/* Stats dashboard psy : 2 colonnes → 1 colonne */
.stats-grid { grid-template-columns: 1fr !important; }
}
/* ── Admin ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
/* Topbar : allow wrap pour ne pas couper les boutons */
.topbar { flex-wrap: wrap; gap: var(--space-2); padding-right: var(--space-4); }
/* Boutons d'action dans les tableaux : touch target */
.btn-action { width: 40px; height: 40px; }
/* Liens sidebar : touch target */
.sidebar__link { padding: 14px 12px !important; }
}
/* ── Texte décoratif arabe (à-propos) ──────────────────────── */
@media (max-width: 480px) {
.commitment-section::before { font-size: 6rem; }
}
/* ── 34. BOUTON AIDE FLOTTANT ────────────────────────────────── */
.help-fab {
position: fixed;
bottom: 90px;
right: 20px;
z-index: 900;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--navy);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(26, 43, 74, 0.4);
transition: transform 0.2s ease, box-shadow 0.2s ease;
text-decoration: none;
}
.help-fab:hover {
transform: scale(1.1);
box-shadow: 0 6px 22px rgba(26, 43, 74, 0.55);
background: var(--blue);
}
@media (max-width: 768px) {
/* Remonter le bouton pour ne pas chevaucher le CTA sticky */
.help-fab { bottom: 82px; }
}
/* ── 35. CTA STICKY MOBILE ──────────────────────────────────── */
.sticky-cta-mobile {
display: none;
}
@media (max-width: 768px) {
.sticky-cta-mobile {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 800;
padding: 10px 16px;
background: var(--cream);
border-top: 1px solid var(--border);
box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}
.sticky-cta-mobile__btn {
flex: 1;
text-align: center;
justify-content: center;
}
/* Compenser la barre sticky dans le footer */
.footer {
padding-bottom: calc(var(--space-8) + 64px);
}
}
/* ═══════════════════════════════════════════════════════════════
DESIGN V3 — Typographie enrichie · Mai 2026
Fraunces (italique serif émotionnel) + Caveat (manuscrit)
═══════════════════════════════════════════════════════════════ */
/* ── Voix émotionnelle : italique Cormorant Garamond rose ───── */
/* Cormorant Garamond : serif haute couture, lettres aérées, */
/* allure premium sans excès décoratif. Remplace Fraunces. */
/* font-weight 600 + font-size 1.14em : Cormorant est plus fin */
/* optiquement → on compense pour un poids visuel équivalent. */
.serif-it {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 600;
color: var(--rose);
letter-spacing: 0.01em;
font-size: 1.14em;
}
/* ── Touche manuscrite Caveat ───────────────────────────────── */
.hand {
font-family: 'Caveat', cursive;
font-weight: 500;
}
/* ── Label badge pill ───────────────────────────────────────── */
/* Override : le label devient une pilule avec fond rose-pâle */
.label {
display: inline-flex;
align-items: center;
gap: .5rem;
background: var(--rose-pale);
padding: .4rem .85rem;
border-radius: 9999px;
font-size: .76rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--rose);
}
.label--sage {
background: var(--blue-pale);
color: var(--navy);
}
.label--sage::before { background: var(--navy); }
/* Séparateur zellige : petite pastille avant le texte */
.section-header .label { display: inline-flex; margin-bottom: var(--space-3); }
/* ── Diviseuse vague organique ──────────────────────────────── */
.wave-divider {
display: block;
width: 100%;
height: 64px;
margin-top: -1px;
margin-bottom: -1px;
pointer-events: none;
}
/* ── Hero : badge avec dot pulsant ─────────────────────────── */
.hero__badge {
display: inline-flex;
align-items: center;
gap: .65rem;
background: #fff;
border: 1px solid var(--border);
padding: .5rem 1.1rem;
border-radius: 9999px;
font-size: .85rem;
color: var(--text-light);
font-weight: 500;
box-shadow: var(--shadow-sm);
margin-bottom: 1.5rem;
}
.hero__badge .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--navy);
box-shadow: 0 0 0 4px rgba(43,59,94,.15);
flex-shrink: 0;
}
/* ── Hero : live strip "Yacine vient de réserver" ───────────── */
.live-strip {
margin-top: 1.75rem;
display: inline-flex;
align-items: center;
gap: .75rem;
background: #fff;
border: 1px solid var(--border);
padding: .65rem 1.1rem;
border-radius: 9999px;
font-size: .82rem;
color: var(--text-light);
box-shadow: var(--shadow-sm);
}
.live-strip .pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 4px rgba(34,197,94,.2);
flex-shrink: 0;
animation: livePulse 2s infinite;
}
@keyframes livePulse {
0%,100% { box-shadow: 0 0 0 4px rgba(34,197,94,.2); }
50% { box-shadow: 0 0 0 8px rgba(34,197,94,.05); }
}
.live-strip b { font-weight: 600; color: var(--text); }
/* ── Hero : stickers flottants ──────────────────────────────── */
.hero__sticker {
position: absolute;
padding: .7rem 1rem;
border-radius: 14px;
font-size: .82rem;
font-weight: 500;
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
gap: .45rem;
z-index: 5;
}
.hero__sticker.s1 {
top: -1rem; left: -2rem;
transform: rotate(-4deg);
background: #fff;
color: var(--text);
border: 1px solid var(--border);
}
.hero__sticker.s2 {
top: 35%; right: -3rem;
transform: rotate(3deg);
background: var(--rose);
color: #fff;
}
/* ── Stats : chiffres Cormorant Garamond italique + trait rose ─ */
.stats__grid { text-align: left; }
.stat-item {
position: relative;
padding-left: 1rem;
text-align: left;
}
.stat-item::before {
content: "";
position: absolute;
left: 0; top: .4rem; bottom: .4rem;
width: 2px;
background: var(--rose);
border-radius: 2px;
}
.stat-item__number {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 600;
font-size: 2.8rem; /* légèrement plus grand pour compenser la finesse Cormorant */
color: var(--rose);
line-height: 1;
letter-spacing: -0.02em;
margin-bottom: .4rem;
}
.stat-item__label { font-size: .92rem; font-weight: 600; color: var(--text); margin-bottom: .1rem; }
.stat-item__sub { font-size: .8rem; color: var(--text-muted); }
/* ── Section Problème : fond rose-pâle chaleureux ───────────── */
.problem {
background: linear-gradient(180deg, #FDF6FA 0%, var(--rose-pale) 100%);
}
.problem .section-header h2 { color: var(--navy); }
.problem .section-header p { color: var(--text-light); }
.problem .section-header .label { color: var(--rose); }
.problem-card {
background: #fff;
display: flex;
gap: 1.25rem;
align-items: flex-start;
flex-direction: row;
}
.problem-card__icon {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 14px;
background: var(--rose-pale);
display: flex;
align-items: center;
justify-content: center;
color: var(--rose);
transform: rotate(-3deg);
font-size: 0; /* masque un éventuel emoji résiduel */
}
.problem-card h4 { color: var(--text); font-size: 1.05rem; margin-bottom: .4rem; }
.problem-card p { color: var(--text-light); font-size: .92rem; max-width: none; }
.problem__outro { text-align: center; margin-top: 3rem; }
.problem__outro .serif-it {
font-size: 1.45rem; /* compensé pour la finesse Cormorant */
display: block;
margin-bottom: 1.5rem;
/* hérite de .serif-it — Cormorant Garamond italic */
}
/* ── Solution : icônes SVG + numéros Cormorant Garamond ─────── */
.solution__avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--blue-pale);
color: var(--navy);
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
}
.value-row__icon {
flex-shrink: 0;
width: 34px; height: 34px;
border-radius: 10px;
background: var(--blue-pale);
color: var(--navy);
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
}
.solution__feature-num {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 600;
font-size: 2.4rem;
color: var(--rose);
line-height: 1;
flex-shrink: 0;
width: 50px;
transform: rotate(-3deg);
}
/* ── Steps : numéros Cormorant positionnés au-dessus ────────── */
.steps__grid { overflow: visible; }
.step-card {
padding-top: 3rem;
overflow: visible;
position: relative;
}
.step-card__num {
position: absolute;
top: -22px;
left: 50%;
transform: translateX(-50%) rotate(-6deg);
width: 54px; height: 54px;
border-radius: 50%;
background: var(--rose);
background-image: none;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 700;
font-size: 1.85rem; /* plus grand pour compenser la finesse optique Cormorant */
line-height: 1;
box-shadow: 0 6px 16px rgba(175,59,110,.4);
}
.step-cta-note { text-align: center; margin-top: 3rem; }
.step-cta-note .hand {
color: var(--rose);
font-size: 1.4rem;
display: block;
margin-top: .85rem;
transform: rotate(-1.5deg);
}
/* ── Testimonials : cartes postales ─────────────────────────── */
.testimonials { background: linear-gradient(180deg, #FDFAFC 0%, #FAF1F6 100%); }
.testimonials__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
gap: 2rem;
max-width: 1080px;
margin: 0 auto;
padding: 1.5rem 0;
}
.postcard {
background: #fdfaf2;
border-radius: var(--radius-md);
padding: 1.5rem;
box-shadow: var(--shadow-md);
position: relative;
border: 1px solid var(--border);
}
.postcard:nth-child(1) { transform: rotate(-2deg); }
.postcard:nth-child(2) { transform: rotate(1.2deg) translateY(-12px); }
.postcard:nth-child(3) { transform: rotate(-1deg); }
.postcard__stamp {
position: absolute;
top: -12px; right: 14px;
background: var(--rose);
color: #fff;
padding: .45rem .75rem;
border-radius: 6px;
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: .82rem;
font-weight: 500;
transform: rotate(6deg);
box-shadow: var(--shadow-sm);
/* Suppression du pointillé — rendu plus minimaliste et premium */
}
.postcard__stars {
color: var(--rose);
font-size: 1.05rem;
letter-spacing: 3px;
margin-bottom: .85rem;
display: flex;
gap: 3px;
}
.postcard__stars span:nth-child(2) { transform: translateY(-1px); }
.postcard__stars span:nth-child(3) { transform: translateY(-2px); }
.postcard__stars span:nth-child(4) { transform: translateY(-1px); }
.postcard__quote {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 500;
font-size: 1.06rem; /* légèrement plus grand pour lisibilité Cormorant */
color: var(--text);
line-height: 1.7;
margin: 0 0 1.25rem;
quotes: "« " " »";
max-width: none;
}
.postcard__quote::before { content: open-quote; color: var(--rose); font-size: 1.4em; line-height: 0; vertical-align: -.2em; margin-right: .1em; }
.postcard__quote::after { content: close-quote; color: var(--rose); font-size: 1.4em; line-height: 0; vertical-align: -.4em; margin-left: .05em; }
.postcard__author {
display: flex;
align-items: center;
gap: .75rem;
padding-top: 1rem;
border-top: 1px solid var(--border-light); /* solide, discret — plus de pointillés */
}
.postcard__avatar {
width: 42px; height: 42px;
border-radius: 50%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 700;
font-size: 1.3rem;
flex-shrink: 0;
}
.postcard__name { font-family: 'Caveat', cursive; font-size: 1.4rem; font-weight: 600; color: var(--text); line-height: 1; }
.postcard__detail { font-size: .8rem; color: var(--text-muted); margin-top: 2px; }
/* ── Ethics : fond blanc + icônes SVG dans cartes ───────────── */
.ethics { background: #fff; }
.ethics .section-header h2 { color: var(--navy); }
.ethics .section-header p { color: var(--text-light); }
.ethics__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
gap: var(--space-5);
}
.ethics-item {
text-align: center;
padding: 1.75rem 1.25rem;
background: #fff;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
.ethics-item__icon {
width: 64px; height: 64px;
border-radius: 18px;
background: var(--rose-pale);
color: var(--rose);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
transform: rotate(-4deg);
font-size: 0;
}
.ethics-item:nth-child(2) .ethics-item__icon { background: var(--blue-pale); color: var(--navy); transform: rotate(3deg); }
.ethics-item:nth-child(3) .ethics-item__icon { background: var(--rose-pale); color: var(--rose); transform: rotate(-2deg); }
.ethics-item:nth-child(4) .ethics-item__icon { background: var(--blue-pale); color: var(--navy); transform: rotate(2deg); }
.ethics-item h4 { color: var(--navy); font-size: 1.02rem; margin-bottom: .45rem; }
.ethics-item p { color: var(--text-light); font-size: .88rem; max-width: none; }
/* ── Newsletter : titre Cormorant Garamond ──────────────────── */
.newsletter h3 {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 600;
font-size: 2rem; /* légèrement plus grand pour compenser la finesse */
margin-top: 1rem;
margin-bottom: .85rem;
}
/* ═══════════════════════════════════════════════════════════════
DESIGN V3 — Harmonisation nav + boutons · Mai 2026
Correction hauteur nav, logo, padding hero, boutons rose
═══════════════════════════════════════════════════════════════ */
/* ── Nav : hauteur réduite à 80 px (était 140 px) ───────────── */
.nav__inner {
height: 80px;
}
/* ── Logo : proportions CLAUDE.md 225×68 px ─────────────────── */
.nav__logo {
width: 225px;
height: 68px;
}
/* ── Filet de sécurité : padding-top auto pour sections after nav */
.nav + section:not(.hero):not(.page-hero):not([class*='-page']):not([class*='-hero']),
.nav + main:not([class*='-page']),
.nav + div[class*='-page']:not(.account-page):not(.cabinet-page) {
padding-top: calc(80px + var(--space-6));
}
/* ── Hero homepage : padding compensé pour la nav 80 px ─────── */
.hero {
padding-top: 80px;
}
/* ── Page-hero (FAQ, blog, psychologues, etc.) ───────────────── */
.page-hero {
padding-top: calc(80px + var(--space-16));
background: linear-gradient(160deg, #FDF6FA 0%, var(--off-white) 55%, var(--blue-pale) 100%);
}
/* ── Bouton primaire : rose + micro-interactions ─────────────── */
.btn--primary {
background: var(--rose);
color: #fff;
border-color: var(--rose);
box-shadow: 0 4px 18px rgba(175,59,110,0.28);
}
.btn--primary:hover {
background: #9B3362;
border-color: #9B3362;
transform: translateY(-2px) rotate(-0.4deg);
box-shadow: 0 10px 32px rgba(175,59,110,0.38);
}
.btn--primary:active {
transform: translateY(0) rotate(0);
box-shadow: 0 4px 12px rgba(175,59,110,0.22);
}
/* ── Bouton secondaire : contour rose doux ───────────────────── */
.btn--secondary {
background: #fff;
color: var(--rose);
border-color: rgba(175,59,110,0.3);
}
.btn--secondary:hover {
background: var(--rose-pale);
border-color: var(--rose);
color: var(--rose);
transform: translateY(-2px) rotate(0.3deg);
}
.btn--secondary:active {
transform: translateY(0) rotate(0);
}
/* ── Bouton ghost : survol rose discret ──────────────────────── */
.btn--ghost:hover {
border-color: rgba(175,59,110,0.35);
color: var(--rose);
}
/* ═══════════════════════════════════════════════════════════════
DESIGN V3 — Sections, Problem, Solution, Footer · Mai 2026
═══════════════════════════════════════════════════════════════ */
/* ── Aération globale des sections ──────────────────────────── */
.section { padding-block: var(--space-24); }
.section--sm { padding-block: var(--space-16); }
.section--lg { padding-block: var(--space-32); }
/* ── Section-header : plus d'espace et titre plus grand ─────── */
.section-header {
text-align: center;
max-width: 720px;
margin: 0 auto var(--space-16);
}
.section-header .label {
font-size: 0.78rem;
letter-spacing: 0.12em;
margin-bottom: var(--space-4);
}
.section-header h2 {
font-size: clamp(2.1rem, 4.5vw, 3.1rem);
line-height: 1.18;
margin-top: var(--space-2);
margin-bottom: var(--space-5);
}
.section-header p {
font-size: 1.08rem;
line-height: 1.8;
color: var(--text-light);
max-width: 600px;
margin-inline: auto;
}
/* ── Corps de texte global : plus aéré ───────────────────────── */
p { line-height: 1.8; }
.section p { line-height: 1.8; margin-bottom: var(--space-4); }
/* ── Boutons : animation pop-in au scroll ────────────────────── */
@keyframes btnReveal {
0% { opacity: 0; transform: translateY(20px) scale(0.93); }
60% { opacity: 1; transform: translateY(-3px) scale(1.03); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Désactive la transition générique des .reveal pour laisser l'animation jouer */
.btn.reveal,
.btn--primary.reveal,
.btn--secondary.reveal {
opacity: 0 !important;
transform: translateY(20px) scale(0.93) !important;
transition: none !important;
animation: none;
}
.btn.reveal.visible,
.btn--primary.reveal.visible,
.btn--secondary.reveal.visible {
animation: btnReveal 0.6s cubic-bezier(.22,.68,0,1.3) forwards !important;
transition: none !important;
}
/* ── Bouton terracotta (alias primary) : micro-interaction ── */
.btn--terracotta:hover {
transform: translateY(-2px) rotate(-0.4deg);
}
/* ═══════════════════════════════════════════════════════════════
SECTION PROBLÈME — grille 2×2 "carré"
═══════════════════════════════════════════════════════════════ */
/* Grille 2 colonnes */
.problem__cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.75rem;
max-width: 860px;
margin-inline: auto;
}
/* Carte : layout vertical, icône en haut */
.problem-card {
flex-direction: column;
align-items: flex-start;
padding: 2rem 1.75rem 1.75rem;
border-radius: var(--radius-xl);
border: 1px solid rgba(175,59,110,0.14);
box-shadow: 0 6px 28px rgba(175,59,110,0.08);
transition: transform 0.32s ease, box-shadow 0.32s ease;
gap: 0;
}
.problem-card:hover {
transform: translateY(-5px) rotate(0.4deg);
box-shadow: 0 16px 48px rgba(175,59,110,0.16);
}
/* Icône : plus grande, plus de marge vers le bas */
.problem-card__icon {
width: 64px;
height: 64px;
border-radius: 18px;
background: var(--rose-pale);
color: var(--rose);
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-3deg);
flex-shrink: 0;
margin-bottom: 1.4rem;
}
.problem-card__icon svg { width: 32px; height: 32px; }
/* Titre + texte plus grand */
.problem-card h4 {
font-size: 1.12rem;
font-weight: 700;
color: var(--navy);
margin-bottom: 0.65rem;
line-height: 1.3;
}
.problem-card p {
font-size: 0.96rem;
line-height: 1.7;
color: var(--text-light);
}
/* Outro : centré sous la grille */
.problem__outro {
text-align: center;
margin-top: var(--space-10);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-5);
}
.problem__outro .serif-it {
font-size: 1.4rem;
}
/* Mobile : 1 colonne */
@media (max-width: 640px) {
.problem__cards { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════
SECTION SOLUTION — bloc incliné + numéros épurés
═══════════════════════════════════════════════════════════════ */
/* Section solution : fond légèrement plus chaud */
.solution { background: linear-gradient(180deg, var(--blue-pale) 0%, #EDF3F8 100%); }
/* Conteneur visuel : espace pour la rotation */
.solution__visual {
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
}
/* Mockup incliné légèrement */
.solution__mockup {
border-radius: var(--radius-xl);
box-shadow: 0 24px 64px rgba(26,43,74,0.18);
transform: rotate(-2.5deg) translateY(4px);
transition: transform 0.45s ease, box-shadow 0.45s ease;
}
.solution__mockup:hover {
transform: rotate(-1deg) translateY(-4px);
box-shadow: 0 36px 80px rgba(26,43,74,0.22);
}
/* Numéros feature : Fraunces italic, pas de fond, trait rose */
.solution__feature {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 1rem 0;
border-bottom: 1px solid var(--border-light);
}
.solution__feature:last-of-type { border-bottom: none; }
.solution__feature-num {
font-size: 2.4rem;
min-width: 58px;
color: var(--rose);
opacity: 0.55;
margin-top: -0.2rem;
}
.solution__feature h4 {
font-size: 1.02rem;
font-weight: 700;
color: var(--navy);
margin-bottom: 0.3rem;
}
.solution__feature p {
font-size: 0.9rem;
color: var(--text-light);
line-height: 1.65;
}
/* ═══════════════════════════════════════════════════════════════
FOOTER — touches premium
═══════════════════════════════════════════════════════════════ */
/* Nom Nafsoléa en Cormorant Garamond italique blanc */
.footer__brand h3 {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 600;
font-size: 2.8rem;
color: #fff;
letter-spacing: -0.01em;
margin-bottom: var(--space-2);
}
/* Petite phrase manuscrite sous le nom */
.footer__brand .footer__tagline {
font-family: 'Caveat', cursive;
font-size: 1.15rem;
font-weight: 500;
color: rgba(255,255,255,0.48);
margin-bottom: var(--space-5);
margin-top: -0.25rem;
line-height: 1.3;
max-width: none;
}
/* Plus d'espace intérieur en haut du footer */
.footer {
padding-top: var(--space-20);
}
/* Icônes sociales plus grandes + meilleur hover */
.footer__social {
width: 44px;
height: 44px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
transition: background var(--tr), border-color var(--tr), transform var(--tr);
}
.footer__social:hover {
background: var(--rose);
border-color: var(--rose);
transform: translateY(-3px) rotate(-4deg);
box-shadow: 0 8px 24px rgba(175,59,110,0.4);
}
/* Colonne nav du footer : lien au hover avec petite flèche */
.footer__link {
display: inline-flex;
align-items: center;
gap: 0.3rem;
transition: color var(--tr), gap var(--tr);
}
.footer__link:hover {
color: rgba(255,255,255,0.95);
gap: 0.6rem;
padding-left: 0;
}
.footer__link::before {
content: "→";
opacity: 0;
font-size: 0.75rem;
transition: opacity var(--tr);
}
.footer__link:hover::before { opacity: 0.7; }
/* Bottom bar : une seule ligne de séparation (supprime le double border) */
.footer__grid {
border-bottom: none;
padding-bottom: 0;
}
.footer__bottom {
border-top: 1px solid rgba(255,255,255,0.08);
margin-top: var(--space-10);
padding-top: var(--space-6);
}
/* ── Responsive V3 ───────────────────────────────────────────── */
@media (max-width: 900px) {
/* Footer : reste 2 colonnes jusqu'à 900px (pas 1024px) */
.footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
@media (max-width: 768px) {
.section { padding-block: var(--space-16); }
.section--sm { padding-block: var(--space-10); }
.solution__mockup { transform: none; }
.footer__grid { grid-template-columns: 1fr; }
.footer__bottom { flex-direction: column; text-align: center; gap: var(--space-3); }
}
/* ═══════════════════════════════════════════════════════════════
DESIGN V4 — Polish premium homepage · Mai 2026
Hero + sections : hiérarchie, respiration, lisibilité, contraste
═══════════════════════════════════════════════════════════════ */
/* ── Navbar : logo légèrement plus présent ───────────────────── */
.nav__logo {
width: 260px;
height: 78px;
}
/* ── Hero : plus d'air entre la nav et le contenu ────────────── */
.hero {
padding-top: calc(80px + var(--space-12));
padding-bottom: var(--space-16);
min-height: auto;
}
/* Plus de respiration entre les deux colonnes + visuel décalé à droite */
.hero__inner {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: var(--space-16);
}
.hero__content { padding-right: 0; }
.hero__visual { padding-left: var(--space-6); }
/* ── Hero badge "Fait avec cœur entre Paris et Alger" ────────── */
/* Plus visible, plus contrasté, légèrement décalé à droite, refined */
.hero__badge {
font-size: 0.92rem;
font-weight: 600;
color: var(--navy);
padding: 0.6rem 1.3rem;
margin-left: var(--space-2);
margin-bottom: var(--space-7);
background: #fff;
border: 1px solid rgba(43,59,94,0.14);
box-shadow: 0 4px 18px rgba(43,59,94,0.07);
letter-spacing: 0.01em;
text-transform: none;
}
.hero__badge .dot {
background: var(--rose);
box-shadow: 0 0 0 4px rgba(175,59,110,0.18);
}
/* ── Hero h1 : 3 lignes forcées en desktop ───────────────────── */
.hero__title-line { display: block; }
@media (max-width: 720px) {
.hero__title-line { display: inline; }
}
#hero-title {
font-size: clamp(2.2rem, 5.2vw, 3.8rem);
line-height: 1.12;
letter-spacing: -0.03em;
margin-bottom: var(--space-6);
}
/* ── Hero subtitle : un cran plus grand, plus aéré ───────────── */
.hero__subtitle {
font-size: 1.15rem;
line-height: 1.75;
color: var(--text-mid);
max-width: 52ch;
margin-bottom: var(--space-9);
}
/* ── Hero sticker "Mise en relation rapide" : palette navy ───── */
.hero__sticker.s2 {
background: var(--navy);
color: #fff;
border: 1px solid rgba(255,255,255,0.12);
font-weight: 600;
padding: 0.75rem 1.1rem;
border-radius: 14px;
box-shadow: 0 10px 28px rgba(43,59,94,0.22);
}
.hero__sticker.s2 svg { color: #fff; opacity: 0.85; }
/* ── Hero CTAs : visibilité renforcée ────────────────────────── */
.hero .btn-group { gap: var(--space-4); margin-top: var(--space-2); }
/* Primaire : ombre rose plus prononcée pour pop sur le hero clair */
.hero .btn--primary {
box-shadow: 0 8px 28px rgba(175,59,110,0.32);
}
.hero .btn--primary:hover {
box-shadow: 0 14px 38px rgba(175,59,110,0.42);
}
/* Secondaire : fond solide navy clair pour une vraie visibilité */
.hero .btn--secondary {
background: var(--navy);
color: #fff;
border-color: var(--navy);
box-shadow: 0 4px 18px rgba(43,59,94,0.22);
}
.hero .btn--secondary:hover {
background: #1e2c4a;
color: #fff;
border-color: #1e2c4a;
box-shadow: 0 10px 32px rgba(43,59,94,0.32);
}
/* ── Hero trust + live strip : plus d'air ────────────────────── */
.hero__trust { margin-top: var(--space-9); gap: var(--space-7); }
.hero__trust-item { font-size: 0.85rem; }
.live-strip { margin-top: var(--space-7); }
/* ── Stats : plus d'espace au-dessus de la grille ────────────── */
.stats { padding-top: var(--space-10); }
.stats__grid { gap: var(--space-8); }
/* ── Filet de sécurité : CTAs sans reveal toujours visibles ──── */
/* (les CTAs critiques ont déjà été délestés du .reveal côté HTML, */
/* mais on garantit un fallback même si JS reveal échoue) */
.btn.reveal {
animation: btnRevealFallback 0.4s 1.6s ease forwards;
}
.btn.reveal.visible {
animation: btnReveal 0.6s cubic-bezier(.22,.68,0,1.3) forwards !important;
}
@keyframes btnRevealFallback {
to { opacity: 1 !important; transform: translateY(0) scale(1) !important; }
}
/* ═══════════════════════════════════════════════════════════════
SECTION "CE QUE VOUS VIVEZ" — titre 1 ligne + cards inline
═══════════════════════════════════════════════════════════════ */
/* Titre sur une seule ligne en desktop (impact émotionnel) */
.section-header--wide { max-width: 920px; }
.no-wrap-md { white-space: nowrap; }
@media (max-width: 768px) {
.no-wrap-md { white-space: normal; }
}
/* Cards problème : icône en ligne avec le titre, paragraphe en-dessous */
.problem__cards {
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
max-width: 1000px;
}
.problem-card {
flex-direction: column;
align-items: stretch;
padding: 1.5rem 1.6rem 1.4rem;
gap: 0;
}
.problem-card__head {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.7rem;
}
.problem-card__icon {
width: 48px;
height: 48px;
border-radius: 14px;
margin-bottom: 0;
transform: rotate(-3deg);
}
.problem-card__icon svg { width: 26px; height: 26px; }
.problem-card h4 {
margin-bottom: 0;
font-size: 1.05rem;
line-height: 1.3;
flex: 1;
}
.problem-card p {
font-size: 0.93rem;
line-height: 1.65;
margin-bottom: 0;
}
@media (max-width: 640px) {
.problem__cards { grid-template-columns: 1fr; gap: var(--space-4); }
}
/* ═══════════════════════════════════════════════════════════════
SECTION "NOTRE RÉPONSE" — compacter les 3 features
═══════════════════════════════════════════════════════════════ */
.solution__content { gap: var(--space-3); }
.solution__feature {
padding: 0.75rem 0;
gap: 1rem;
}
.solution__feature-num {
font-size: 2rem;
min-width: 48px;
margin-top: -0.1rem;
}
.solution__feature p { margin-bottom: 0; }
/* ═══════════════════════════════════════════════════════════════
SECTION "TROIS PETITS PAS" — CTA visible + groupe compact
═══════════════════════════════════════════════════════════════ */
/* Le bouton n'a plus la classe .reveal côté HTML — visibilité garantie.
On renforce simplement son ombre rose pour bien le détacher du fond. */
.step-cta-note .btn--primary {
box-shadow: 0 8px 28px rgba(175,59,110,0.32);
}
.step-cta-note .btn--primary:hover {
box-shadow: 0 14px 38px rgba(175,59,110,0.42);
}
/* ═══════════════════════════════════════════════════════════════
SÉPARATEUR DESSINÉ À LA MAIN — transitions douces
═══════════════════════════════════════════════════════════════ */
.hand-divider {
display: block;
width: 220px;
height: 18px;
margin: var(--space-2) auto var(--space-10);
color: rgba(175,59,110,0.4);
opacity: 0.85;
}
/* ═══════════════════════════════════════════════════════════════
TÉMOIGNAGES — postcards plus larges, moins hautes
═══════════════════════════════════════════════════════════════ */
.testimonials__grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.75rem;
max-width: 1180px;
}
.postcard {
padding: 1.4rem 1.5rem 1.25rem;
}
.postcard__quote {
font-size: 0.96rem;
line-height: 1.55;
margin: 0 0 1rem;
}
.postcard__stars { margin-bottom: 0.6rem; font-size: 0.95rem; }
.postcard__author { padding-top: 0.85rem; }
/* ═══════════════════════════════════════════════════════════════
"NOTRE PROMESSE" — contraste du label restauré
═══════════════════════════════════════════════════════════════ */
/* Bug historique : .ethics .section-header .label avait gardé une couleur
pensée pour un fond navy (rgba bleu clair). Or .ethics est passée à
fond blanc → bleu clair sur blanc = illisible. On rebascule sur le rose
de la marque, cohérent avec les autres labels de section. */
.ethics .section-header .label {
color: var(--rose);
background: var(--rose-pale);
}
.ethics .section-header .label::before {
background: var(--rose);
}
/* Le h2 reste navy sur blanc — déjà OK */
.ethics .section-header h2 {
color: var(--navy);
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE V4
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
.hero__inner { grid-template-columns: 1fr; gap: var(--space-10); }
.hero__content { padding-right: 0; }
.hero__visual { padding-left: 0; }
}
@media (max-width: 768px) {
.hero { padding-top: calc(80px + var(--space-6)); }
.hero__subtitle { font-size: 1.02rem; }
.nav__logo { width: 200px; height: 60px; }
.problem__cards { grid-template-columns: 1fr; }
.testimonials__grid { gap: 1.25rem; }
.hand-divider { width: 160px; margin: var(--space-2) auto var(--space-6); }
}
/* ═══════════════════════════════════════════════════════════════
DESIGN V5 — Premium polish homepage · Mai 2026
Espacement, hiérarchie, lisibilité, transitions de sections
═══════════════════════════════════════════════════════════════ */
/* ── 1. Hero : titre plus éditorial, moins imposant ─────────── */
/* Réduction du poids et de la taille pour un rendu plus calme
et une meilleure respiration avec le reste de la composition */
#hero-title {
font-size: clamp(1.85rem, 4.2vw, 3.1rem);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.16;
}
/* ── 2. Hero : composition sans le badge — rééquilibrage ─────── */
/* Le badge étant supprimé, on resserre le bas du titre
et on repositionne tout le contenu légèrement vers le haut */
.hero {
padding-top: calc(80px + var(--space-10));
padding-bottom: var(--space-12);
}
.hero__subtitle {
margin-bottom: var(--space-8);
}
/* CTAs : on réduit légèrement le padding horizontal
pour une composition plus aérée et moins "startup" */
.hero .btn-group {
gap: var(--space-3);
margin-top: 0;
}
.hero .btn--primary,
.hero .btn--secondary {
padding-inline: 1.6rem;
}
/* Trust items : légèrement resserrés pour ne pas trop s'étaler */
.hero__trust {
margin-top: var(--space-6);
gap: var(--space-5);
}
/* Live strip : moins d'espace au-dessus, plus intégré */
.live-strip {
margin-top: var(--space-5);
}
/* ── 3. Sticker "Mise en relation rapide" : palette douce ─────── */
/* L'ancien fond navy (#2B3B5E) était trop sombre et agressif.
On passe à un bleu très pâle pour un feel premium et discret. */
.hero__sticker.s2 {
background: var(--blue-pale);
color: var(--navy);
border: 1px solid var(--blue-light);
box-shadow: 0 6px 20px rgba(43,59,94,0.10);
font-weight: 500;
}
.hero__sticker.s2 svg {
color: var(--blue);
opacity: 1;
}
/* ── 4. Réduction de l'espace avant "Ce que vous vivez" ─────── */
/* La section stats avait trop de padding-top,
créant un vide excessif après le hero */
.stats {
padding-top: var(--space-6);
padding-bottom: var(--space-10);
}
/* Les vagues séparatrices : légèrement plus compactes
pour rapprocher les sections entre elles */
.wave-divider {
height: 48px;
}
/* ── 5. Cards "Ce que vous vivez" : meilleur wrapping du texte ── */
/* En limitant la largeur du texte, on passe de ~4 lignes à ~3
pour un rythme de lecture plus éditorial */
.problem-card p {
max-width: 36ch;
}
/* ── 6. Réduction de l'espace avant les témoignages ─────────── */
/* La vague + section-header créaient trop de blanc vertical */
.testimonials.section {
padding-top: var(--space-14, 3.5rem);
}
/* ── 7. Séparateur transition steps → psys ───────────────────── */
/* Variante du hand-divider positionnée comme pont entre les deux sections */
.hand-divider--transition {
display: block;
width: 200px;
margin: var(--space-10) auto 0;
color: rgba(175,59,110,0.3);
opacity: 0.9;
}
/* ── 8. Footer : badge "Fait avec cœur" côté droit ──────────── */
/* Regroupement du badge et des liens légaux dans un bloc flex-column
aligné à droite, avec le badge subtil au-dessus des liens */
.footer__bottom-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-3);
}
.footer__heart-badge {
font-size: 0.76rem;
color: rgba(255,255,255,0.38);
font-weight: 400;
font-style: italic;
letter-spacing: 0.02em;
margin: 0;
}
/* Sur mobile, tout se centre */
@media (max-width: 768px) {
.footer__bottom-right {
align-items: center;
}
.footer__heart-badge {
text-align: center;
}
/* Responsive hero V5 */
.hero .btn--primary,
.hero .btn--secondary {
padding-inline: 1.3rem;
}
}
/* ═══════════════════════════════════════════════════════════════
DESIGN V6 — Premium UI/UX refinements · Mai 2026
T1: hero font-weight · T2: header grid alignment
T3: badge repositioning · T4: cards right-align
T5: global spacing cleanup · T6: footer handwritten ♥
═══════════════════════════════════════════════════════════════ */
/* ── T1. Hero H1 : font-weight subtil renforcé ──────────────── */
/* AVANT : 600 (semi-bold) — titre trop léger, impact émotionnel
dilué dans la composition.
APRÈS : 700 (bold) — présence plus forte sans agressivité.
Fraunces .serif-it conserve son poids 400 → contraste poétique. */
#hero-title {
font-weight: 700;
}
/* ── T2. Nav inner : alignement grille avec le contenu hero ─── */
/* AVANT : max-width 1440 px + padding 0.75 rem → logo déborde de
~130 px à gauche par rapport au début du H1 hero.
APRÈS : max-width 1200 px + padding 1.5 rem → logo et bouton
"Prendre RDV" s'alignent exactement avec le conteneur hero.
Résultat : composition header/hero unifiée, rythme premium. */
.nav__inner {
max-width: var(--max-w); /* 1200 px — identique .container */
padding-inline: var(--space-6); /* 1.5 rem — identique .container */
}
/* ── T3. Sticker "Mise en relation rapide" : repositionné ───── */
/* AVANT : top 35 % — badge glisse vers le milieu de la carte psy,
ambiguïté visuelle (il semble appartenir à la card, pas au hero).
APRÈS : top 12 % — ancré haut, lié au contexte titre/sous-titre.
La hiérarchie hero devient : titre → badge → carte psy. */
.hero__sticker.s2 {
top: 12%;
right: -2.5rem;
}
/* ── T4. Cards "Ce que vous vivez" : layout éditorial droite ── */
/* AVANT : texte aligné à gauche, icône seule en tête de colonne.
APRÈS : icône inversée à droite du titre (.row-reverse), titre et
paragraphe alignés à droite → grille 2×2 éditorial premium.
Toute icône « déconnectée » du titre est rendue impossible car
l'icône est uniquement dans .problem-card__head. */
.problem-card {
text-align: right;
}
.problem-card__head {
flex-direction: row-reverse; /* icône à droite du titre */
}
.problem-card p {
max-width: none; /* texte s'étale plein-largeur */
}
/* ── T5A. "Notre réponse" : espace inter-features comprimé ──── */
/* AVANT : padding 0.75 rem par feature → trop d'air entre 01/02/03.
APRÈS : 0.45 rem → enchaînement fluide, lecture continue. */
.solution__feature {
padding: 0.45rem 0;
}
/* ── T5B. Mockup solution : espacement interne réduit ─────── */
/* AVANT : padding 1.5 rem + grands gaps → bloc visuel gonflé.
APRÈS : padding 1.1 rem + gaps réduits → densité premium. */
.solution__mockup {
padding: 1.1rem;
}
.solution__mockup-header {
margin-bottom: var(--space-3); /* 0.75 rem (était 1.25 rem) */
padding-bottom: var(--space-2); /* 0.5 rem (était 1 rem) */
}
.solution__values {
gap: 0;
}
.value-row {
padding: 0.25rem 0;
}
/* ── T5C. Séparateur manuscrit → "Une équipe d'exception" ───── */
/* AVANT : divider margin-top 2.5 rem + section padding 6 rem + 6 rem
= ~15 rem de blanc vertical → rupture trop forte du rythme.
APRÈS : divider margin réduit + padding-top psys section allégé
→ environ 7-8 rem → continuité douce sans rupture. */
.hand-divider--transition {
margin: var(--space-4) auto 0; /* 1 rem (était 2.5 rem) */
}
.steps.section {
padding-bottom: var(--space-12); /* 3 rem (était 6 rem) */
}
.section[style*="off-white"] {
padding-top: var(--space-16); /* 4 rem (était 6 rem) */
}
/* ── T5D. Témoignages → "Notre promesse" : gap réduit ───────── */
/* AVANT : ethics section padding-top 6 rem + vague 48 px → ~7 rem
de blanc après les témoignages → sensation de coupure.
APRÈS : 3 rem → fluidité de la lecture. */
.ethics.section {
padding-top: var(--space-12); /* 3 rem (était 6 rem) */
}
/* ── T6. Footer badge : police manuscrite Caveat ─────────────── */
/* AVANT : Poppins italic — lisible mais sans caractère artisanal.
APRÈS : Caveat (même police que les touches manuscrites du site)
→ authenticité, chaleur, cohérence de la charte. Le ♥ dans le
HTML remplace désormais le mot "cœur". */
.footer__heart-badge {
font-family: 'Caveat', cursive;
font-size: 0.9rem; /* Caveat se lit mieux légèrement plus grand */
font-style: normal; /* Caveat ne nécessite pas d'italic CSS */
}
/* ── Responsive V6 ───────────────────────────────────────────── */
@media (max-width: 768px) {
/* Header : sur mobile, on garde un padding confortable */
.nav__inner {
padding-inline: var(--space-4);
}
/* Badge : ne sort plus du cadre sur mobile */
.hero__sticker.s2 {
right: -1rem;
top: 8%;
}
/* Cards : retour à gauche sur mobile pour la lisibilité */
.problem-card {
text-align: left;
}
.problem-card__head {
flex-direction: row;
}
}
/* ═══════════════════════════════════════════════════════════════
FIN V6
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
DESIGN V7 — Alignements & hiérarchie premium homepage · Mai 2026
7 fixes : logo, carte hero, trust badges, live strip,
cards layout, footer signature
═══════════════════════════════════════════════════════════════ */
/* ── Fix 1 : Logo header — présence visuelle renforcée ──────────
AVANT : 260×78 px dans un nav de 80 px — logo déjà grand
mais marge inférieure trop faible, légèrement étouffé.
APRÈS : nav → 88 px | logo → 282×85 px (≈ +9 %)
UX : brand mark plus visible au premier coup d'œil, hiérarchie
header/hero plus intentionnelle. Les compensations
padding-top des sections sont mises à jour en cascade. */
.nav__inner {
height: 88px;
}
.nav__logo {
width: 282px;
height: 85px;
}
/* Hero : compense la nav plus haute */
.hero {
padding-top: calc(88px + var(--space-12));
}
/* Toutes les autres sections après la nav fixe */
.nav + section:not(.hero):not(.page-hero):not([class*='-page']):not([class*='-hero']),
.nav + main:not([class*='-page']),
.nav + div[class*='-page']:not(.account-page):not(.cabinet-page) {
padding-top: calc(88px + var(--space-6));
}
/* Page-hero (FAQ, blog, psychologues…) */
.page-hero {
padding-top: calc(88px + var(--space-16));
}
/* Mobile : réduction harmonique */
@media (max-width: 768px) {
.nav__inner { height: 86px; }
.nav__logo { width: 260px; height: 78px; }
.hero { padding-top: calc(86px + var(--space-6)); }
}
@media (max-width: 400px) {
.nav__inner { height: 76px; }
.nav__logo { width: 220px; height: 66px; }
}
/* ── Fix 2 : Carte psy hero — alignement avec le titre ──────────
AVANT : hero__inner align-items: center → card centrée par
rapport à la hauteur totale de la colonne gauche.
Visuellement la carte flotte trop bas.
APRÈS : la carte démarre à la même hauteur que le H1
(align-self: start) + léger padding-top pour respiration.
UX : composition hero plus naturelle, regard qui suit le titre
puis découvre le psy sans effort. */
.hero__visual {
align-self: start;
padding-top: var(--space-8); /* 2 rem — espace sous le sommet du H1 */
}
/* ── Fix 3 : Trust badges — 1 seule ligne, sans retour chariot ──
AVANT : flex-wrap: wrap + gap trop large → la 3ème pastille
"45 min offertes…" passait à la ligne, cassant le scan
horizontal et l'image de compacité.
AVANT (bug silencieux) : var(--space-7) et var(--space-9)
non définis → margin-top et gap tombaient à 0 (IACVT).
APRÈS : flex-wrap: nowrap | gap: 1.5 rem | margin-top: 2 rem
Textes non sécables (white-space: nowrap) pour garantir
que chaque badge reste un bloc atomique.
UX : trust bar compacte et lisible d'un seul regard, look
premium "3 piliers côte à côte". */
.hero__trust {
margin-top: 2rem;
gap: 1.5rem;
flex-wrap: nowrap;
align-items: center;
}
.hero__trust-item {
white-space: nowrap;
font-size: 0.82rem;
gap: 0.45rem;
}
/* Sur petit desktop : réduire légèrement gap sans casser la ligne */
@media (max-width: 1100px) and (min-width: 1025px) {
.hero__trust { gap: 1.1rem; }
.hero__trust-item { font-size: 0.79rem; }
}
/* ── Fix 4 : Badge activité — intégré dans le rythme hero ───────
AVANT : var(--space-7) non défini → margin-top: 0 (IACVT).
Cela pouvait coller la live strip immédiatement sous
les badges, ou le laisser flotter selon d'autres règles.
APRÈS : margin-top: 1rem — respiration réduite par rapport aux
badges trust (2 rem) mais badge toujours détaché.
UX : le badge "Yacine vient de réserver" vient ponctuer le
discours du hero sans en être désolidarisé. Moins d'espace
mort entre les trust badges et la preuve sociale. */
.live-strip {
margin-top: 1rem;
}
/* ── Fix 5 : Cards "Ce que vous vivez" — icône gauche + texte aligné
AVANT : flex-direction: column avec problem-card__head (flex row:
[icône | h4]) puis
en dessous sur toute la largeur.
Le paragraphe débordait à gauche de la colonne d'icône,
cassant l'alignement visuel.
APRÈS : CSS grid 2 colonnes — icône sur les 2 lignes (span),
h4 + p strictement alignés après l'icône.
display: contents sur __head aplatit ses enfants dans
le grid parent sans wrapper supplémentaire.
UX : lecture naturelle — œil part de l'icône, lit le titre,
puis le texte sans jamais sauter en arrière. Grid clair,
hiérarchie de lecture immédiate. */
.problem-card {
display: grid;
grid-template-columns: 48px 1fr;
grid-template-rows: auto auto;
column-gap: 1rem;
row-gap: 0.4rem;
align-items: start;
/* reset flex */
flex-direction: unset;
gap: unset;
}
.problem-card__head {
display: contents; /* les enfants participent directement au grid */
}
.problem-card__icon {
grid-column: 1;
grid-row: 1 / 3; /* span icône sur titre + description */
align-self: start;
margin-top: 0.2rem; /* alignement optique avec la cap-height du h4 */
margin-bottom: 0;
}
.problem-card h4 {
grid-column: 2;
grid-row: 1;
margin-bottom: 0;
align-self: center;
}
.problem-card p {
grid-column: 2;
grid-row: 2;
margin-bottom: 0;
}
/* Mobile : pas de grid, retour colonne simple */
@media (max-width: 640px) {
.problem-card {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.problem-card__head {
display: flex;
align-items: center;
gap: 0.75rem;
}
.problem-card__icon {
grid-row: unset;
margin-top: 0;
}
}
/* ── Fix 6 : Footer signature — taille et typographie ───────────
AVANT : Caveat 0.9 rem, couleur très effacée (38 % blanc) —
le message "Fait avec ♥ entre Paris & Alger" était lisible
seulement à l'attention, pas à la perception spontanée.
APRÈS : Caveat 1.35 rem | couleur 65 % blanc | lettre-spacing 0.04 em
Le tiret "—" est ajouté en HTML pour l'emphase stylistique.
UX : signature artisanale immédiatement perceptible, renforce
l'identité warm & human de Nafsoléa sans déborder. */
.footer__heart-badge {
font-family: 'Caveat', cursive;
font-size: 1.35rem;
font-style: normal;
font-weight: 500;
color: rgba(255, 255, 255, 0.65);
letter-spacing: 0.04em;
margin: 0;
}
/* ── Fix 7 : Footer signature — au-dessus du séparateur ─────────
AVANT : le badge était dans .footer__bottom-right (en dessous de
la ligne border-top du footer__bottom) → signature noyée
dans la zone administrative (légaux + copyright).
APRÈS : .footer__signature est un nouveau wrapper positionné
juste avant .footer__bottom, avec un alignement centré
et une séparation visuelle légère.
UX : la signature devient une clôture émotionnelle de tout le
footer avant la zone légale — hiérarchie intentionnelle. */
.footer__signature {
text-align: center;
padding-top: var(--space-6);
padding-bottom: var(--space-4);
}
@media (max-width: 768px) {
.footer__heart-badge { font-size: 1.15rem; }
}
/* ── Responsive V7 ───────────────────────────────────────────── */
@media (max-width: 768px) {
.hero__visual { align-self: unset; padding-top: 0; }
}
/* ═══════════════════════════════════════════════════════════════
FIN V7
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
DESIGN V8 — Raffinements homepage · Mai 2026
Logo agrandi, signature à droite, cards texte gauche,
stickers repositionnés + nettoyés
═══════════════════════════════════════════════════════════════ */
/* ── Logo : présence maximale ────────────────────────────────── */
.nav__inner { height: 96px; }
.nav__logo { width: 315px; height: 95px; }
.hero {
padding-top: calc(96px + var(--space-12));
}
.nav + section:not(.hero):not(.page-hero):not([class*='-page']):not([class*='-hero']),
.nav + main:not([class*='-page']),
.nav + div[class*='-page']:not(.account-page):not(.cabinet-page) {
padding-top: calc(96px + var(--space-6));
}
.page-hero { padding-top: calc(96px + var(--space-16)); }
@media (max-width: 768px) {
.nav__inner { height: 86px; }
.nav__logo { width: 260px; height: 78px; }
.hero { padding-top: calc(86px + var(--space-6)); }
}
@media (max-width: 400px) {
.nav__inner { height: 76px; }
.nav__logo { width: 220px; height: 66px; }
}
/* ── Signature footer — alignée à droite ────────────────────────
Repositionnée comme une vraie signature manuscrite en bas à
droite du footer, naturellement calée sur les liens légaux. */
.footer__signature {
text-align: right;
padding-top: var(--space-4);
padding-bottom: var(--space-2);
}
@media (max-width: 768px) {
.footer__signature { text-align: center; }
}
/* ── Cards "Ce que vous vivez" — texte strictement à gauche ─────
Le CSS V7 a bien posé le grid icône | texte, mais text-align
pouvait hériter d'un center parent (section-header--wide).
On force left sur tous les nœuds texte de la card. */
.problem-card,
.problem-card h4,
.problem-card p {
text-align: left;
}
/* ── Stickers hero — badges flottants premium ──────────────────
s1 "1ère séance offerte" : gauche, fond blanc ivoire.
s2 "Réponse sous 24h" : droite, fond rose pâle délicat.
Animations douces et décalées — effet organique, non mécanique. */
.hero__sticker.s1 {
top: 0.75rem;
left: -1.25rem;
bottom: unset;
right: unset;
background: #fffcf8;
color: var(--navy);
border: 1px solid rgba(43,59,94,0.10);
box-shadow: 0 6px 24px rgba(43,59,94,0.10), 0 2px 8px rgba(43,59,94,0.06);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.01em;
animation: stickerFloatLeft 6s cubic-bezier(0.45,0.05,0.55,0.95) infinite;
}
.hero__sticker.s2 {
top: 0.75rem;
right: -1.25rem;
bottom: unset;
left: unset;
background: #fce8ef;
color: #8B2A55;
border: 1px solid rgba(175,59,110,0.15);
box-shadow: 0 6px 24px rgba(175,59,110,0.14), 0 2px 8px rgba(175,59,110,0.08);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.01em;
animation: stickerFloatRight 7s cubic-bezier(0.45,0.05,0.55,0.95) 1.5s infinite;
}
@keyframes stickerFloatLeft {
0%, 100% { transform: rotate(-4deg) translateY(0px); }
30% { transform: rotate(-3.5deg) translateY(-5px); }
60% { transform: rotate(-4.5deg) translateY(-2px); }
}
@keyframes stickerFloatRight {
0%, 100% { transform: rotate(3.5deg) translateY(0px); }
40% { transform: rotate(4deg) translateY(-6px); }
70% { transform: rotate(3deg) translateY(-3px); }
}
/* Mobile : rentrés dans le cadre */
@media (max-width: 768px) {
.hero__sticker.s1 { left: 0.25rem; top: 0.5rem; }
.hero__sticker.s2 { right: 0.25rem; top: 0.5rem; }
}
/* ── Signature — dans la colonne Contact, calée à droite ─────── */
.footer__heart-badge--inline {
display: block;
text-align: right;
margin-top: 1.5rem;
}
/* Masquer l'ancien wrapper .footer__signature s'il subsiste */
.footer__signature { display: none; }
/* ═══════════════════════════════════════════════════════════════
FIN V8
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
DESIGN V9 — Micro-polish homepage · Mai 2026
Signature saut de ligne, cards espacement, sticker doux,
hero mobile optimisé
═══════════════════════════════════════════════════════════════ */
/* ── Signature footer — saut de ligne + une seule ligne ─────────
margin-top plus grand pour créer la rupture visuelle demandée.
white-space: nowrap garantit que le texte ne se coupe jamais. */
.footer__heart-badge--inline {
margin-top: 2rem;
white-space: nowrap;
}
/* ── Cards — espace entre picto et texte ────────────────────────
column-gap 1rem → 1.6rem : les icônes et le texte respirent
sans perdre la logique de grille alignée. */
.problem-card {
column-gap: 1.6rem;
}
/* ── Sticker "Réservation immédiate" — couleur plus douce ───────
Le rose vif (#AF3B6E) était trop saturé et contrastait trop
avec la carte blanche. On passe à un blush très pâle, texte rose
foncé : pastille raffinée, moins "CTA", plus "badge discret". */
.hero__sticker.s2 {
background: #fce8ef;
color: #9B3362;
border: 1px solid rgba(175,59,110,0.18);
box-shadow: 0 4px 14px rgba(175,59,110,0.14);
}
/* ── Hero mobile — optimisation affichage téléphone ─────────────
Problèmes identifiés :
· trust badges overflow horizontal (flex-wrap: nowrap sur desktop)
· boutons trop larges ou mal empilés
· titre trop grand sur petits écrans
· live strip déborde sur certains modèles */
@media (max-width: 768px) {
/* Trust badges : retour au wrap pour éviter le débordement */
.hero__trust {
flex-wrap: wrap;
gap: 0.9rem;
justify-content: flex-start;
}
/* Boutons hero : colonne alignée à gauche */
.hero .btn-group {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
/* Live strip : taille réduite, pas de débordement */
.live-strip {
font-size: 0.76rem;
max-width: 100%;
flex-wrap: wrap;
gap: 0.5rem;
}
/* Padding hero réduit sur mobile */
.hero {
padding-bottom: var(--space-8);
}
}
@media (max-width: 480px) {
/* Titre encore plus compact sur très petit écran */
#hero-title {
font-size: clamp(1.7rem, 8vw, 2.2rem);
line-height: 1.18;
}
.hero__subtitle {
font-size: 0.95rem;
line-height: 1.65;
}
/* Boutons pleine largeur sur mobile S */
.hero .btn-group { align-items: stretch; }
.hero .btn--primary,
.hero .btn--secondary { text-align: center; }
}
/* ═══════════════════════════════════════════════════════════════
FIN V9
═══════════════════════════════════════════════════════════════ */
/* ── Onboarding tour patient ─────────────────────────────────────
Overlay semi-transparent + spotlight sur la cible + tooltip.
Fichier : assets/js/onboarding.js */
.onb-overlay {
position: fixed;
inset: 0;
background: rgba(26, 43, 74, 0.45);
z-index: 9000;
animation: onbFadeIn .25s ease;
}
.onb-spotlight {
position: absolute;
border-radius: 10px;
box-shadow: 0 0 0 9999px rgba(26,43,74,0.45);
z-index: 9001;
pointer-events: none;
transition: all .3s ease;
opacity: 0;
}
.onb-tooltip {
position: absolute;
z-index: 9002;
background: white;
border-radius: 16px;
padding: 1.4rem 1.5rem 1.2rem;
max-width: 320px;
width: calc(100vw - 32px);
box-shadow: 0 20px 60px rgba(26,43,74,0.22), 0 4px 16px rgba(26,43,74,0.10);
animation: onbSlideUp .28s ease;
}
.onb-close {
position: absolute;
top: 12px; right: 14px;
background: none; border: none;
font-size: 1.3rem; line-height: 1;
color: var(--text-muted);
cursor: pointer;
padding: 2px 6px;
border-radius: 6px;
}
.onb-close:hover { background: var(--off-white); color: var(--navy); }
.onb-progress {
display: flex;
gap: 6px;
margin-bottom: 12px;
}
.onb-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--border);
transition: background .2s;
}
.onb-dot.active { background: var(--rose); }
.onb-dot.done { background: #8fa896; } /* sage vert branding */
.onb-title {
font-size: 1rem;
font-weight: 700;
color: var(--navy);
margin: 0 0 8px;
line-height: 1.3;
}
.onb-text {
font-size: .875rem;
color: var(--text-light);
line-height: 1.55;
margin: 0 0 16px;
}
/* ═══════════════════════════════════════════════════════════════
DESIGN V10 — Polish global layout & rendu premium · Mai 2026
Alignements, espacements, micro-détails, cohérence visuelle
═══════════════════════════════════════════════════════════════ */
/* ── Tags : padding légèrement plus généreux, lecture plus aisée ─ */
.tag {
font-size: 0.72rem;
font-weight: 600;
padding: 4px 11px; /* +1px vertical vs avant (3px 10px) */
border-radius: var(--radius-full);
background: var(--blue-pale);
color: var(--text-mid);
border: 1px solid var(--border);
letter-spacing: 0.01em;
line-height: 1.4;
}
.tag--sage {
background: rgba(85,133,181,.10);
color: var(--blue);
border-color: rgba(85,133,181,.22);
}
.tag--terracotta {
background: rgba(175,59,110,.08);
color: var(--rose);
border-color: rgba(175,59,110,.18);
}
/* ── Section-header : sous-titre max-width plus large ───────────
65ch était trop restrictif sur les grands écrans, on laisse
respirer à 72ch pour éviter les retours à la ligne prématurés. */
.section-header p { max-width: 72ch; }
/* ── Section-header : label pill plus premium ───────────────────
Fond plus raffiné (gradient léger), hauteur consistante. */
.label {
display: inline-flex;
align-items: center;
gap: .5rem;
background: linear-gradient(135deg, var(--rose-pale) 0%, #fceef7 100%);
border: 1px solid rgba(175,59,110,.14);
padding: .38rem .9rem;
border-radius: 9999px;
font-size: .73rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--rose);
}
/* ── Stats section : trait gauche légèrement plus prononcé ──────
+1px width pour un rendu plus affirmé sans être lourd. */
.stat-item::before {
width: 3px;
background: linear-gradient(180deg, var(--rose) 0%, rgba(175,59,110,.3) 100%);
}
/* ── Ethics cards : icônes dans un cercle subtil ────────────────
On renforce la hiérarchie visuelle icône → titre → texte. */
.ethics-item__icon {
background: linear-gradient(135deg, var(--blue-pale) 0%, var(--rose-pale) 100%);
border: 1px solid var(--border-light);
border-radius: 16px;
}
/* ── Postcards : amélioration du style global ───────────────────
Fond légèrement plus chaud, ombre plus douce, radius plus arrondi */
.postcard {
background: #fdfcfa;
border-radius: var(--radius-lg); /* 20px au lieu de 12px */
box-shadow: 0 4px 24px rgba(43,59,94,0.08), 0 1px 4px rgba(43,59,94,0.04);
border: 1px solid rgba(43,59,94,0.07);
padding: 1.75rem;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.postcard:hover {
transform: rotate(0deg) translateY(-4px) !important;
box-shadow: 0 12px 40px rgba(43,59,94,0.13), 0 4px 12px rgba(43,59,94,0.06);
}
/* ── Témoignages grid : plus de gap pour respirer ───────────────
En desktop les cards se chevauchent légèrement (rotate) ;
gap 2rem donne de la place sans exploser la mise en page. */
.testimonials__grid {
gap: 2rem;
}
/* ── Hero card : nom psy plus lisible ────────────────────────── */
.hero__card-name {
font-size: 1rem;
font-weight: 700;
color: var(--navy);
line-height: 1.25;
margin-bottom: 3px;
}
.hero__card-role {
font-size: 0.78rem;
color: var(--blue);
font-weight: 500;
margin-bottom: 10px;
}
/* ── Hero visuel : ombre de la card plus premium ────────────────
L'ombre colorée teintée navy renforce le sentiment de profondeur */
.hero__card {
box-shadow:
0 2px 8px rgba(43,59,94,0.08),
0 12px 40px rgba(43,59,94,0.14),
0 32px 64px rgba(43,59,94,0.10);
}
/* ── Boutons : micro-amélioration des transitions ───────────────
cubic-bezier légèrement "spring" pour un ressenti plus vivant. */
.btn {
transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1),
box-shadow 0.18s ease,
background-color 0.18s ease,
border-color 0.18s ease;
}
.btn:hover {
transform: translateY(-2px);
}
.btn:active {
transform: translateY(0);
}
/* ── Live strip : fond légèrement plus chaud ─────────────────── */
.live-strip {
background: rgba(43,59,94,.04);
border: 1px solid rgba(43,59,94,.09);
border-radius: 9999px;
}
/* ── Responsive global : paddings sections sur mobile ───────────
Les sections ont 6rem de padding-block sur desktop. Sur mobile
on descend à 3.5rem pour que le contenu respire mieux. */
@media (max-width: 768px) {
.section { padding-block: 3.5rem; }
.section--lg { padding-block: 4rem; }
.section--sm { padding-block: 2.5rem; }
.section-header { margin-bottom: 2rem; }
.section-header h2 { font-size: clamp(1.5rem, 5vw, 2.2rem); }
}
/* ═══════════════════════════════════════════════════════════════
FIN V10
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
SECTION SOLUTION — "Notre réponse" : fix centrage & vides
Mai 2026
═══════════════════════════════════════════════════════════════ */
/* ── Desktop : centrage vertical parfait des deux colonnes ──────
align-items: center était déjà là mais les paddings internes
déséquilibraient la hauteur. On force un ancrage symétrique. */
.solution__inner {
align-items: center;
gap: var(--space-12); /* réduit (était space-16 = 4rem) pour moins de vide */
}
/* ── Section : padding vertical réduit pour supprimer le vide ──
6rem de chaque côté (--space-24) donnait trop d'espace blanc */
.solution.section {
padding-block: var(--space-16); /* 4rem au lieu de 6rem */
}
/* ── Contenu : alignement left clair, pas de centering forcé ───
La colonne droite doit s'aligner au début (flex-start) pour
une lecture naturelle gauche-droite. gap réduit entre items. */
.solution__content {
gap: var(--space-4); /* 1rem entre chaque bloc (était 1.5rem) */
justify-content: center;
align-self: center;
}
/* ── Label "Notre réponse" : bien ancré en haut du contenu ─────
Le label pill doit rester discret et aligné à gauche du bloc. */
.solution__content > .label {
align-self: flex-start;
margin-bottom: var(--space-1);
}
/* ── Mockup : rotation réduite pour limiter les zones vides ────
rotate(-2.5deg) créait des coins vides dans la colonne gauche */
.solution__mockup {
transform: rotate(-1.5deg) translateY(2px);
}
.solution__mockup:hover {
transform: rotate(-0.5deg) translateY(-4px);
}
/* ── Visual column : max-width pour éviter que la maquette */
/* s'étire trop et crée du vide sur les grands écrans. */
.solution__visual {
max-width: 460px;
justify-self: center;
}
/* ── Features : espacement uniforme et lisible ──────────────── */
.solution__feature {
padding: 0.75rem 0;
gap: 1rem;
}
.solution__feature-num {
min-width: 48px;
opacity: 0.6;
}
/* ── MOBILE : contenu avant mockup + centrage ───────────────── */
@media (max-width: 1024px) {
.solution__inner {
gap: var(--space-8);
}
/* Contenu textuel en premier sur mobile */
.solution__visual { order: 2; max-width: 100%; }
.solution__content { order: 1; }
/* Le mockup prend toute la largeur et n'est plus incliné */
.solution__mockup {
transform: none;
max-width: 500px;
margin-inline: auto;
}
/* Padding section réduit sur mobile */
.solution.section {
padding-block: var(--space-12);
}
}
@media (max-width: 640px) {
.solution__feature {
gap: 0.75rem;
padding: 0.6rem 0;
}
.solution__feature-num {
font-size: 1.8rem;
min-width: 36px;
}
}
.onb-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.onb-skip {
background: none; border: none;
font-size: .8rem;
color: var(--text-muted);
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
font-family: inherit;
}
.onb-skip:hover { color: var(--navy); background: var(--off-white); }
@keyframes onbFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes onbSlideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* Mobile : tooltip centrée en bas de l'écran */
@media (max-width: 640px) {
.onb-tooltip {
position: fixed !important;
bottom: 20px !important;
left: 50% !important;
top: auto !important;
transform: translateX(-50%) !important;
max-width: calc(100vw - 32px);
}
}
/* ============================================================
COMPOSANT ÉTOILES — Ratings & Reviews (Lot 1)
Utilisé sur : psychologue-detail.html, psychologues.html,
mon-compte.html (formulaire avis)
============================================================ */
/* ── Affichage statique ──────────────────────────────────── */
.stars-wrap {
display: inline-flex;
align-items: center;
gap: 1px;
line-height: 1;
}
.star {
font-size: 1rem;
line-height: 1;
transition: transform 0.1s;
}
.star.full { color: #f59e0b; }
.star.half { color: #f59e0b; }
.star.empty { color: #d1d5db; }
.stars-count {
color: var(--blue);
font-size: 0.82rem;
font-weight: 500;
margin-left: 6px;
}
.stars-avg {
font-size: 0.9rem;
font-weight: 700;
color: var(--navy);
margin-right: 4px;
}
/* Version large (sur fiche psy) */
.stars-wrap.lg .star { font-size: 1.25rem; }
/* Version petite (sur cards listing) */
.stars-wrap.sm .star { font-size: 0.85rem; }
/* ── Sélecteur interactif (formulaire avis) ─────────────── */
.star-picker {
display: flex;
flex-direction: row-reverse; /* ordre inversé pour le CSS :hover trick */
justify-content: flex-end;
gap: 4px;
margin: 8px 0;
}
.star-picker input[type="radio"] { display: none; }
.star-picker label {
font-size: 2rem;
color: #d1d5db;
cursor: pointer;
transition: color 0.15s, transform 0.1s;
line-height: 1;
padding: 2px;
user-select: none;
}
.star-picker label:hover,
.star-picker label:hover ~ label,
.star-picker input[type="radio"]:checked ~ label {
color: #f59e0b;
}
.star-picker label:hover { transform: scale(1.15); }
/* ── Résumé rating (bloc en haut de la section avis) ──── */
.rating-summary {
display: flex;
align-items: center;
gap: 28px;
background: var(--cream);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px 28px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.rating-big {
text-align: center;
min-width: 80px;
}
.rating-big__score {
font-size: 3.5rem;
font-weight: 900;
color: var(--navy);
line-height: 1;
}
.rating-big__label {
font-size: 0.78rem;
color: #888;
margin-top: 4px;
}
.rating-bars {
flex: 1;
min-width: 160px;
display: flex;
flex-direction: column;
gap: 5px;
}
.rating-bar-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
color: #555;
}
.rating-bar-row__label { min-width: 28px; text-align: right; }
.rating-bar-row__track {
flex: 1;
height: 7px;
background: var(--beige);
border-radius: 4px;
overflow: hidden;
}
.rating-bar-row__fill {
height: 100%;
background: #f59e0b;
border-radius: 4px;
transition: width 0.4s ease;
}
.rating-bar-row__count { min-width: 20px; color: #999; }
/* ── Card avis individuel ────────────────────────────────── */
.review-card {
background: white;
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px 24px;
margin-bottom: 16px;
transition: box-shadow 0.2s;
}
.review-card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
.review-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 10px;
gap: 12px;
}
.review-card__author {
display: flex;
align-items: center;
gap: 10px;
}
.review-card__avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--beige);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
color: var(--navy);
flex-shrink: 0;
overflow: hidden;
}
.review-card__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.review-card__name {
font-weight: 700;
font-size: 0.92rem;
color: var(--navy);
}
.review-card__meta {
font-size: 0.78rem;
color: #999;
margin-top: 2px;
}
.review-card__verified {
font-size: 0.72rem;
background: #d4edda;
color: #155724;
padding: 2px 8px;
border-radius: 10px;
font-weight: 600;
white-space: nowrap;
}
.review-card__text {
font-size: 0.93rem;
color: #444;
line-height: 1.65;
margin: 8px 0 0;
}
.review-card__footer {
margin-top: 12px;
display: flex;
align-items: center;
gap: 12px;
font-size: 0.8rem;
color: #999;
}
.review-card__helpful-btn {
background: none;
border: 1px solid var(--border);
border-radius: 6px;
padding: 3px 10px;
cursor: pointer;
font-size: 0.8rem;
color: var(--blue);
transition: background 0.15s, border-color 0.15s;
}
.review-card__helpful-btn:hover {
background: var(--beige);
border-color: var(--blue);
}
.review-card__helpful-btn.active {
background: #e8f0fb;
border-color: var(--blue);
color: var(--navy);
font-weight: 600;
}
/* ── Formulaire de dépôt d'avis ─────────────────────────── */
.review-form-box {
background: white;
border: 2px solid var(--beige);
border-radius: 14px;
padding: 24px;
margin-top: 20px;
}
.review-form-box h4 {
color: var(--navy);
margin-bottom: 4px;
font-size: 1rem;
}
.review-form-box .hint {
color: #888;
font-size: 0.83rem;
margin-bottom: 14px;
}
.review-form-box textarea {
width: 100%;
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
font-size: 0.9rem;
resize: vertical;
min-height: 80px;
font-family: inherit;
color: #333;
transition: border-color 0.2s;
}
.review-form-box textarea:focus {
outline: none;
border-color: var(--blue);
}
.review-form-box .checkrow {
display: flex;
align-items: center;
gap: 8px;
margin: 10px 0 4px;
font-size: 0.87rem;
color: #555;
cursor: pointer;
}
.review-form-box .checkrow input { cursor: pointer; }
.review-form-box .submit-btn {
margin-top: 14px;
background: var(--navy);
color: white;
border: none;
border-radius: 8px;
padding: 10px 24px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}
.review-form-box .submit-btn:hover { background: var(--blue); }
.review-form-box .submit-btn:active { transform: scale(0.98); }
.review-form-box .submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
/* ── Tri + pagination avis ───────────────────────────────── */
.reviews-controls {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 12px;
}
.reviews-sort {
display: flex;
gap: 8px;
}
.reviews-sort__btn {
padding: 6px 14px;
border: 1px solid var(--border);
border-radius: 20px;
background: white;
font-size: 0.82rem;
cursor: pointer;
color: var(--blue);
transition: all 0.15s;
}
.reviews-sort__btn.active,
.reviews-sort__btn:hover {
background: var(--navy);
color: white;
border-color: var(--navy);
}
.reviews-pagination {
display: flex;
gap: 6px;
margin-top: 24px;
justify-content: center;
}
.reviews-pagination__btn {
width: 34px; height: 34px;
border: 1px solid var(--border);
border-radius: 8px;
background: white;
cursor: pointer;
font-size: 0.85rem;
color: var(--navy);
transition: all 0.15s;
}
.reviews-pagination__btn.active { background: var(--navy); color: white; border-color: var(--navy); }
.reviews-pagination__btn:hover:not(.active) { background: var(--beige); }
/* Badge "note" sur les cards listing psys */
.psy-card__rating {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
font-size: 0.85rem;
}
.psy-card__rating .stars-wrap { font-size: 0.82rem; }
@media (max-width: 600px) {
.rating-summary { flex-direction: column; gap: 16px; }
.review-card { padding: 16px; }
.reviews-sort { flex-wrap: wrap; }
}