/* style.css — Moule Santé Pro : design tokens + composants */ /* ============ FONTS ============ */ /* Chargées dans le de chaque page : Fraunces (titres, chaleureux/humain) + Plus Jakarta Sans (corps, lisible et amical) */ :root, [data-theme='light'] { /* ---- Échelle typographique fluide (taille de police AUGMENTÉE pour l'accessibilité) ---- */ --text-xs: clamp(0.9rem, 0.86rem + 0.2vw, 1rem); /* 14.4px -> 16px */ --text-sm: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16px -> 18px */ --text-base: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18px -> 20px : corps de texte agrandi */ --text-lg: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); /* 20.8px -> 25.6px */ --text-xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); /* 25.6px -> 36px */ --text-2xl: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem); /* 33.6px -> 54.4px */ --text-3xl: clamp(2.6rem, 1.4rem + 3.6vw, 4.6rem); --text-hero: clamp(2.8rem, 1rem + 5vw, 6rem); /* ---- Espacements (4px base) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* ---- Couleurs — dérivées du logo MSP ---- */ /* Bleu clair logo #B8D7E9, bleu-vert pétrole logo #0E788E */ --color-bg: #fffdf9; /* fond crème très légèrement chaud */ --color-surface: #ffffff; --color-surface-2: #fbfaf6; --color-surface-offset: #eaf3f7; /* teinte bleu clair très diluée */ --color-surface-offset-2: #dcedf2; --color-surface-dynamic: #cfe6ee; --color-section-blue: #e3f0f5; /* fond de section bleu clair, dilué depuis #B8D7E9 */ --color-section-blue-strong: #cfe6ee; --color-divider: #d8e6ea; --color-border: #c3dbe3; /* Texte anthracite très contrasté (accessibilité) */ --color-text: #1c2426; --color-text-muted: #435055; --color-text-faint: #6b7a80; --color-text-inverse: #fffdf9; /* Accent principal — bleu-vert pétrole (CTA) */ --color-primary: #0e788e; --color-primary-hover: #0a5c6d; --color-primary-active: #084854; --color-primary-highlight: #cfe6ee; --color-primary-tint: #b8d7e9; /* bleu clair du logo */ /* Chaleur — accent secondaire terracotta pour touches humaines (badges métiers, accents chaleureux) */ --color-warm: #c9622f; --color-warm-hover: #a94f22; --color-warm-highlight: #f3ded1; /* Urgence (numéros) — rouge sobre, alerte claire */ --color-urgent: #b3261e; --color-urgent-hover: #8f1e18; --color-urgent-highlight: #f8d9d6; /* Succès (confirmations, RDV) */ --color-success: #2f7a4f; --color-success-highlight: #d9ecdf; /* Rayons — arrondis généreux pour la chaleur visuelle */ --radius-sm: 0.5rem; --radius-md: 0.9rem; --radius-lg: 1.4rem; --radius-xl: 2rem; --radius-full: 9999px; --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1); --shadow-sm: 0 1px 3px oklch(0.35 0.04 220 / 0.08); --shadow-md: 0 6px 20px oklch(0.35 0.04 220 / 0.1); --shadow-lg: 0 16px 40px oklch(0.35 0.04 220 / 0.14); --content-narrow: 640px; --content-default: 980px; --content-wide: 1240px; --content-full: 100%; --font-display: 'Fraunces', 'Georgia', serif; --font-body: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; } /* ============ LAYOUT DE BASE ============ */ .container { max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-5); } .container--narrow { max-width: var(--content-narrow); margin-inline: auto; padding-inline: var(--space-5); } .container--default { max-width: var(--content-default); margin-inline: auto; padding-inline: var(--space-5); } section { padding-block: clamp(var(--space-12), 7vw, var(--space-24)); } .section-blue { background: var(--color-section-blue); } h1, h2, h3 { font-family: var(--font-display); color: var(--color-text); font-weight: 600; } h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-lg); } p { color: var(--color-text); } .lede { font-size: var(--text-lg); color: var(--color-text-muted); } /* ============ SKIP LINK ============ */ .skip-link { position: absolute; left: -999px; top: var(--space-2); background: var(--color-primary); color: #fff; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-weight: 700; font-size: var(--text-sm); z-index: 200; } .skip-link:focus { left: var(--space-2); } /* ============ HEADER ============ */ .site-header { position: sticky; top: 0; z-index: 100; background: oklch(from var(--color-bg) l c h / 0.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-divider); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); } .brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-text); } .brand__logo { width: 56px; height: 56px; border-radius: var(--radius-md); background: #fff; padding: var(--space-1); box-shadow: var(--shadow-sm); flex-shrink: 0; } .brand__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.1; } .brand__tagline { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; } .main-nav { display: flex; align-items: center; gap: var(--space-2); } .main-nav__list { display: flex; gap: var(--space-1); align-items: center; } .main-nav__link { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-full); color: var(--color-text); text-decoration: none; font-weight: 600; font-size: var(--text-sm); min-height: 44px; } .main-nav__link:hover { background: var(--color-section-blue); } .main-nav__link[aria-current='page'] { background: var(--color-primary); color: #fff; } .main-nav__link svg { width: 20px; height: 20px; flex-shrink: 0; } .header-emergency { display: flex; align-items: center; gap: var(--space-2); background: var(--color-urgent-highlight); color: var(--color-urgent); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-weight: 700; font-size: var(--text-sm); text-decoration: none; white-space: nowrap; } .header-emergency:hover { background: var(--color-urgent); color: #fff; } .header-emergency svg { width: 20px; height: 20px; flex-shrink: 0; } .header-emergency-mobile { display: none; padding: var(--space-2) var(--space-3); } .nav-toggle { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-section-blue); } .nav-toggle svg { width: 26px; height: 26px; } @media (max-width: 860px) { .main-nav { position: fixed; inset: 76px var(--space-3) auto var(--space-3); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-3); flex-direction: column; align-items: stretch; display: none; z-index: 90; } .main-nav.is-open { display: flex; } .main-nav__list { flex-direction: column; align-items: stretch; width: 100%; } .main-nav__link { width: 100%; padding: var(--space-4); font-size: var(--text-base); } .nav-toggle { display: flex; } .header-emergency-desktop { display: none; } .header-emergency-mobile { display: flex; } } /* ============ BOUTONS ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; padding: var(--space-3) var(--space-6); border-radius: var(--radius-full); font-weight: 700; font-size: var(--text-base); text-decoration: none; border: 2px solid transparent; } .btn svg { width: 22px; height: 22px; flex-shrink: 0; } .btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-md); } .btn-secondary { background: #fff; color: var(--color-primary); border-color: var(--color-primary); } .btn-secondary:hover { background: var(--color-section-blue); } .btn-urgent { background: var(--color-urgent); color: #fff; } .btn-urgent:hover { background: var(--color-urgent-hover); } .btn-lg { min-height: 60px; padding: var(--space-4) var(--space-8); font-size: var(--text-lg); } .btn-block { width: 100%; } /* ============ HERO ============ */ .hero { padding-block: clamp(var(--space-10), 8vw, var(--space-20)); } .hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-12); align-items: center; } .hero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-primary-highlight); color: var(--color-primary-hover); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-5); } .hero h1 { font-size: var(--text-2xl); margin-bottom: var(--space-5); } .hero p.lede { margin-bottom: var(--space-8); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); } .hero__image { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; } .hero__image img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } .hero__image { order: -1; } } /* ============ CARTES ACCÈS RAPIDE ============ */ .quick-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } .quick-card { display: flex; flex-direction: column; gap: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); text-decoration: none; color: var(--color-text); box-shadow: var(--shadow-sm); } .quick-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .quick-card__icon { width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--color-section-blue); display: flex; align-items: center; justify-content: center; color: var(--color-primary); } .quick-card__icon svg { width: 30px; height: 30px; } .quick-card h3 { font-size: var(--text-lg); } .quick-card p { color: var(--color-text-muted); font-size: var(--text-base); } .quick-card__arrow { margin-top: auto; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-primary); font-weight: 700; } .quick-card__arrow svg { width: 20px; height: 20px; } @media (max-width: 700px) { .quick-links { grid-template-columns: 1fr; } } /* ============ BLOC URGENCES ============ */ .emergency-block { background: linear-gradient(135deg, #fdf1ef, #f8d9d6); border: 2px solid var(--color-urgent); border-radius: var(--radius-xl); padding: clamp(var(--space-6), 5vw, var(--space-10)); } .emergency-block__title { display: flex; align-items: center; gap: var(--space-3); color: var(--color-urgent); font-size: var(--text-xl); margin-bottom: var(--space-6); } .emergency-block__title svg { width: 34px; height: 34px; flex-shrink: 0; } .emergency-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .emergency-number { background: #fff; border-radius: var(--radius-lg); padding: var(--space-6); text-align: center; box-shadow: var(--shadow-sm); } .emergency-number__label { font-size: var(--text-base); font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-2); } .emergency-number__value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-urgent); } .emergency-number a { color: inherit; text-decoration: none; } .emergency-number a:hover { text-decoration: underline; } @media (max-width: 760px) { .emergency-numbers { grid-template-columns: 1fr; } } /* ============ SECTION GÉNÉRIQUE ============ */ .section-header { max-width: 720px; margin-bottom: var(--space-10); } .section-header--center { margin-inline: auto; text-align: center; } .eyebrow { display: inline-block; color: var(--color-primary); font-weight: 700; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-3); } .mission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .mission-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-8); border: 1px solid var(--color-border); } .mission-card__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; color: var(--color-primary); margin-bottom: var(--space-4); flex-shrink: 0; } .mission-card__icon svg { width: 32px; height: 32px; } .mission-card h3 { margin-bottom: var(--space-2); } .mission-card p { color: var(--color-text-muted); } @media (max-width: 900px) { .mission-grid { grid-template-columns: 1fr; } } /* ============ ÉQUIPE ============ */ .team-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-10); } .team-filter { min-height: 48px; padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); background: var(--color-surface); border: 2px solid var(--color-border); color: var(--color-text); font-weight: 700; font-size: var(--text-sm); } .team-filter:hover { border-color: var(--color-primary); } .team-filter[aria-pressed='true'] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .team-group { margin-bottom: var(--space-12); } .team-group__title { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); color: var(--color-primary-hover); } .team-group__title svg { width: 28px; height: 28px; } .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--space-6); } .team-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .team-card__photo { aspect-ratio: 1/1; overflow: hidden; background: var(--color-surface-offset); } .team-card__photo img { width: 100%; height: 100%; object-fit: cover; } .team-card__body { padding: var(--space-5); } .team-card__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-1); } .team-card__role { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-primary-hover); background: var(--color-primary-highlight); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-weight: 700; font-size: var(--text-xs); margin-bottom: var(--space-3); } .team-card__role svg { width: 16px; height: 16px; } .team-card__desc { color: var(--color-text-muted); font-size: var(--text-sm); } /* ============ INFOS PRATIQUES ============ */ .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); } .info-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); } .info-card__icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--color-section-blue); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); } .info-card__icon svg { width: 28px; height: 28px; } .info-list { display: flex; flex-direction: column; gap: var(--space-3); } .info-list dt { font-weight: 700; color: var(--color-text-muted); font-size: var(--text-sm); } .info-list dd { font-size: var(--text-lg); margin-bottom: var(--space-3); } .info-list a { color: var(--color-primary); font-weight: 700; text-decoration: none; } .info-list a:hover { text-decoration: underline; } .hours-table { width: 100%; border-collapse: collapse; } .hours-table th, .hours-table td { text-align: left; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-divider); font-size: var(--text-base); } .hours-table th { color: var(--color-text-muted); font-weight: 700; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; } .hours-table tr:last-child td { border-bottom: none; } .map-placeholder { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); aspect-ratio: 16/10; position: relative; } .rdv-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .rdv-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); } .rdv-card__icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-section-blue); color: var(--color-primary); display: flex; align-items: center; justify-content: center; } .rdv-card__icon svg { width: 26px; height: 26px; } .rdv-card p { color: var(--color-text-muted); font-size: var(--text-base); } .steps-list { display: flex; flex-direction: column; gap: var(--space-5); } .step-item { display: flex; gap: var(--space-4); align-items: flex-start; } .step-item__number { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-display); font-size: var(--text-lg); } .step-item__text h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-1); } .step-item__text p { color: var(--color-text-muted); } @media (max-width: 900px) { .info-grid, .rdv-options { grid-template-columns: 1fr; } } /* ============ FIL D'ARIANE ============ */ .breadcrumb { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-text-muted); } .breadcrumb a { color: var(--color-primary-hover); font-weight: 600; text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb [aria-current='page'] { color: var(--color-text-muted); } /* ============ FICHE PRATICIEN ============ */ .praticien-hero { padding-block: clamp(var(--space-8), 6vw, var(--space-16)); } .praticien-grid { display: grid; grid-template-columns: 340px 1fr; gap: var(--space-12); align-items: start; } .praticien-photo { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 1/1; background: var(--color-surface-offset); } .praticien-photo img { width: 100%; height: 100%; object-fit: cover; } .back-link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-primary-hover); font-weight: 700; font-size: var(--text-sm); text-decoration: none; margin-bottom: var(--space-5); } .back-link:hover { text-decoration: underline; } .back-link svg { width: 18px; height: 18px; } .praticien-info h1 { margin-top: var(--space-3); margin-bottom: var(--space-2); } .praticien-fonction { font-size: var(--text-lg); color: var(--color-text-muted); font-weight: 600; margin-bottom: var(--space-5); } /* ============ BLOC RENDEZ-VOUS (fiche praticien) ============ */ .rdv-block { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: clamp(var(--space-6), 5vw, var(--space-10)); text-align: center; box-shadow: var(--shadow-sm); } .rdv-block__icon { width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--color-section-blue); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); } .rdv-block__icon svg { width: 30px; height: 30px; } .rdv-block h2 { margin-bottom: var(--space-6); } .doctolib-btn { background: #1a73e8; } .doctolib-btn:hover { background: #1558b0; } .rdv-note { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-faint); font-style: italic; } @media (max-width: 760px) { .praticien-grid { grid-template-columns: 1fr; } .praticien-photo { max-width: 280px; margin-inline: auto; } } /* Cartes équipe cliquables (deviennent des liens) */ .team-card__link { display: block; color: inherit; text-decoration: none; height: 100%; } .team-card { transition: box-shadow var(--transition-interactive), transform var(--transition-interactive); } a.team-card__link:hover .team-card, a.team-card__link:focus-visible .team-card { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--color-primary); } .team-card__cta { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-primary); font-weight: 700; font-size: var(--text-xs); margin-top: var(--space-3); } .team-card__cta svg { width: 16px; height: 16px; } /* ============ ACCÈS PROFESSIONNELS (footer) ============ */ .footer-pro-link { color: oklch(1 0 0 / 0.55) !important; font-size: var(--text-xs); margin-left: var(--space-3); border-left: 1px solid oklch(1 0 0 / 0.25); padding-left: var(--space-3); } .footer-pro-link:hover { color: #fff !important; } /* ============ FOOTER ============ */ .site-footer { background: var(--color-primary-active); color: #fff; padding-block: var(--space-16); } .site-footer a { color: #fff; } .footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--space-10); } .footer-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .footer-brand__logo { width: 48px; height: 48px; border-radius: var(--radius-md); background: #fff; padding: var(--space-1); } .footer-brand__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); } .site-footer p { color: oklch(1 0 0 / 0.82); } .footer-heading { font-weight: 700; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-4); color: oklch(1 0 0 / 0.7); } .footer-list { display: flex; flex-direction: column; gap: var(--space-3); } .footer-list a { text-decoration: none; font-size: var(--text-base); display: inline-flex; align-items: center; gap: var(--space-2); } .footer-list a:hover { text-decoration: underline; } .footer-list svg { width: 18px; height: 18px; flex-shrink: 0; } .footer-emergency { background: oklch(1 0 0 / 0.1); border-radius: var(--radius-lg); padding: var(--space-5); margin-top: var(--space-6); } .footer-emergency__title { font-weight: 700; margin-bottom: var(--space-2); font-size: var(--text-sm); } .footer-emergency__numbers { display: flex; gap: var(--space-5); flex-wrap: wrap; } .footer-emergency__numbers a { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); text-decoration: none; } .footer-bottom { border-top: 1px solid oklch(1 0 0 / 0.15); margin-top: var(--space-10); padding-top: var(--space-6); font-size: var(--text-sm); color: oklch(1 0 0 / 0.65); } @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); } } /* ============ UTILITAIRES ============ */ .text-center { text-align: center; } .mt-8 { margin-top: var(--space-8); } .mb-0 { margin-bottom: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } /* ============ RESPONSIVE GLOBAL ============ */ @media (max-width: 700px) { section { padding-block: var(--space-10); } .mission-grid, .quick-links { grid-template-columns: 1fr; } } /* Adaptations WordPress */ .team-card__link { color: inherit; text-decoration: none; display: block; } .team-card__link:focus-visible { outline: 4px solid var(--color-accent); outline-offset: 4px; border-radius: var(--radius-lg); } .team-card__photo img { width: 100%; height: 100%; object-fit: cover; } .site-main .page-content { max-width: 58rem; } .praticien-hero { padding-bottom: var(--space-10); } .praticien-hero__grid { display:grid; grid-template-columns: minmax(0,1.1fr) minmax(280px,.9fr); align-items:center; gap:var(--space-10); } .praticien-hero__photo { border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--color-primary-light); } .praticien-hero__photo img { display:block; width:100%; aspect-ratio:1; object-fit:cover; } .praticien-details { padding-top:var(--space-10); } .rdv-card { background:var(--color-primary-dark); color:#fff; padding:var(--space-8); border-radius:var(--radius-xl); margin-top:var(--space-8); } .rdv-card h2 { color:#fff; } .rdv-card .btn { background:#fff; color:var(--color-primary-dark); } .rdv-card .btn:hover { background:var(--color-accent-light); } .notice-empty { padding:var(--space-6); border-radius:var(--radius-md); background:#fff; } @media(max-width: 720px){ .praticien-hero__grid{grid-template-columns:1fr; gap:var(--space-6)} .praticien-hero__photo{max-width:420px} }