/* ===================================================================== Docteur Magalie LE GAL · Médecin Vasculaire & Esthétique Design system v1 DA : « nostalgie heureuse » — bandes roses poudrées (Villa Colette), élégance Didone (Didot → Bodoni Moda), photos à cadre blanc (Haïtza), hero minimal animé (Antoni Calmon). ===================================================================== */ /* ---------- Fonts (Google Fonts, chargées dans le ) ---------- Display : "Bodoni Moda" (Didone, proche Didot) Corps : "Lora" (serif lisible, chaleureuse) Labels : "Jost" (géométrique parisienne, façon Futura) --------------------------------------------------------------------- */ :root { /* Palette — fond éclairci, tendant vers le rose nude (modifs v2) */ --creme: #FCF8F6; --creme-2: #FAF1EE; --nude: #E9C4BF; /* rose nude des carrés titrés */ --rose-pale: #F6E4E2; --rose-poudre: #EFD3D0; --rose: #DFB4B4; --rose-fonce: #A96A72; --rose-nuit: #8C4F58; --encre: #33272A; --encre-doux: #5C4B4F; --blanc: #FFFFFF; --or-doux: #C9A96A; /* Bandes roses façon store Villa Colette */ --stripes: repeating-linear-gradient( 90deg, var(--rose-pale) 0px, var(--rose-pale) 56px, var(--creme) 56px, var(--creme) 112px); --stripes-fines: repeating-linear-gradient( 90deg, var(--rose-poudre) 0px, var(--rose-poudre) 10px, var(--creme) 10px, var(--creme) 20px); /* Typo */ --f-display: "Bodoni Moda", "Didot", "Playfair Display", serif; --f-body: "Lora", "Georgia", serif; --f-label: "Jost", "Futura", sans-serif; --maxw: 1120px; --radius: 2px; --shadow-photo: 0 14px 40px rgba(51, 39, 42, .14); --transition: .35s cubic-bezier(.25, .6, .3, 1); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--f-body); font-size: 17px; line-height: 1.75; color: var(--encre); background: var(--creme); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--rose-fonce); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--rose-nuit); } ::selection { background: var(--rose-poudre); color: var(--encre); } /* ===================================================================== HEADER — double bandeau : marque puis navigation ===================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(252, 248, 246, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rose-poudre); } .brand-band { text-align: center; padding: 1.1rem 1rem .8rem; border-bottom: 1px solid var(--rose-pale); } .brand-band .brand-doctor { font-family: var(--f-label); font-weight: 300; font-size: .74rem; letter-spacing: .55em; text-indent: .55em; /* compense le letter-spacing pour un vrai centrage */ text-transform: uppercase; color: var(--encre-doux); } .brand-band .brand-name { font-family: var(--f-display); /* Didot → Bodoni Moda */ font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 500; letter-spacing: .06em; line-height: 1.25; } .brand-band .brand-name a { color: var(--encre); } /* Navigation — onglets bien visibles : gras, plus grands, fond blanc */ .nav-band { position: relative; background: var(--blanc); } .nav-toggle { display: none; width: 100%; padding: .7rem; background: none; border: none; font-family: var(--f-label); font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--encre); cursor: pointer; } .site-nav ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: .1rem 1.6rem; padding: .65rem 1rem; } .site-nav a { font-family: var(--f-label); font-weight: 600; font-size: .92rem; letter-spacing: .16em; text-transform: uppercase; color: var(--encre); padding: .25rem 0; border-bottom: 1px solid transparent; white-space: nowrap; } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--rose-fonce); border-bottom-color: var(--rose); } @media (max-width: 920px) { .nav-toggle { display: block; } .site-nav { display: none; } .site-nav.open { display: block; } .site-nav ul { flex-direction: column; align-items: center; gap: .2rem; padding-bottom: 1rem; } } /* --------------------------------------------------------------------- MODE « LANDING » (accueil uniquement) — mécanisme Antoni Calmon : au chargement, la marque est seule, centrée plein écran sur les bandes roses ; au scroll (classe .js-scrolled posée par main.js), elle rétrécit et remonte dans le bandeau pendant que la navigation apparaît. --------------------------------------------------------------------- */ .site-header.header--landing { position: fixed; top: 0; left: 0; right: 0; background: transparent; border-bottom-color: transparent; backdrop-filter: none; transition: background .8s ease, border-color .8s ease; } .header--landing .brand-band { border-bottom-color: transparent; transform: translateY(calc(50dvh - 50%)) scale(2.1); transition: transform .8s cubic-bezier(.25, .6, .3, 1), border-color .8s ease; will-change: transform; } .header--landing .nav-band { opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .8s ease, transform .8s ease; } /* Accroches visibles uniquement sur l'écran d'ouverture */ .header--landing .landing-extra { position: absolute; top: calc(50dvh + 8.5rem); left: 0; right: 0; text-align: center; padding: 0 1.5rem; opacity: 1; transition: opacity .5s ease; } .landing-extra .hero-tagline { font-family: var(--f-display); font-style: italic; font-size: clamp(1.15rem, 2.6vw, 1.6rem); color: var(--rose-nuit); } .landing-extra .hero-quote { max-width: 34em; margin: .7rem auto 0; font-size: .98rem; color: var(--encre-doux); } /* Pastille contact masquée sur l'écran d'ouverture */ .site-header.header--landing:not(.js-scrolled) ~ .contact-pastille { opacity: 0; pointer-events: none; } .contact-pastille { transition: transform var(--transition), background var(--transition), opacity .6s ease; } /* État déroulé : retour au bandeau compact */ .site-header.header--landing.js-scrolled { background: rgba(252, 248, 246, .96); border-bottom-color: var(--rose-poudre); backdrop-filter: blur(8px); } .header--landing.js-scrolled .brand-band { transform: none; border-bottom-color: var(--rose-pale); } .header--landing.js-scrolled .nav-band { opacity: 1; transform: none; pointer-events: auto; transition-delay: .25s; } .header--landing.js-scrolled .landing-extra { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; } @media (prefers-reduced-motion: reduce) { .header--landing .brand-band, .header--landing .nav-band, .header--landing .landing-extra { transition: none; } } /* Mobile : morphing plus discret pour que le nom tienne dans l'écran */ .header--landing .brand-band .brand-name { transition: letter-spacing .8s ease; } @media (max-width: 700px) { .header--landing .brand-band { transform: translateY(calc(50dvh - 50%)) scale(1.15); } .header--landing:not(.js-scrolled) .brand-band .brand-name { letter-spacing: .05em; } } /* ===================================================================== HERO ACCUEIL — bandes roses pleine hauteur, façon Villa Colette ===================================================================== */ /* Avec le header en mode landing (fixe et transparent), le hero occupe tout l'écran et sert de décor aux bandes roses derrière la marque. */ .header--landing ~ main .hero { min-height: 100vh; min-height: 100dvh; } .hero { position: relative; min-height: calc(100vh - 130px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--stripes); overflow: hidden; padding: 4rem 1.5rem 6rem; } .hero::after { /* voile crème central pour la lisibilité */ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 62% 55% at 50% 48%, rgba(251, 247, 241, .94) 0%, rgba(251, 247, 241, .78) 55%, rgba(251, 247, 241, 0) 100%); } .hero > * { position: relative; z-index: 1; } .hero .hero-logo { width: 108px; height: auto; margin-bottom: 2rem; opacity: .92; } .hero .hero-doctor { font-family: var(--f-label); font-weight: 300; font-size: .85rem; letter-spacing: .6em; text-indent: .6em; text-transform: uppercase; color: var(--rose-fonce); margin-bottom: .8rem; } .hero h1 { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.6rem, 7vw, 4.6rem); letter-spacing: .06em; line-height: 1.1; } .hero .hero-spec { font-family: var(--f-label); font-weight: 300; font-size: .85rem; letter-spacing: .4em; text-transform: uppercase; color: var(--encre-doux); margin-top: 1.1rem; } .hero .hero-tagline { font-family: var(--f-display); font-style: italic; font-size: clamp(1.15rem, 2.6vw, 1.6rem); color: var(--rose-nuit); margin-top: 2.4rem; } .hero .hero-quote { max-width: 34em; font-size: .98rem; color: var(--encre-doux); margin-top: .9rem; } /* Flèche d'invitation au scroll (façon Antoni Calmon) */ .scroll-cue { position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .4rem; font-family: var(--f-label); font-size: .65rem; letter-spacing: .35em; text-transform: uppercase; color: var(--rose-fonce); } .scroll-cue .cue-line { width: 1px; height: 44px; background: var(--rose-fonce); animation: cue 2.2s ease-in-out infinite; transform-origin: top; } @keyframes cue { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(10px); opacity: 0; } } /* ===================================================================== BANDEAU DE PAGE (pages intérieures) — fines rayures + titre bicolore ===================================================================== */ .page-hero { background: var(--stripes-fines); border-bottom: 1px solid var(--rose-poudre); text-align: center; padding: 3.6rem 1.5rem 3.2rem; } .page-hero .kicker, .kicker { display: block; font-family: var(--f-label); font-weight: 300; font-size: .72rem; letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; color: var(--rose-fonce); margin-bottom: .9rem; } /* Titre bicolore :

Vos Besoins

*/ .title-duo { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.1rem, 5.5vw, 3.4rem); line-height: 1.12; letter-spacing: .04em; } .title-duo em { font-style: italic; font-weight: 400; font-size: .62em; color: var(--rose-fonce); display: block; margin-bottom: .1em; } .title-duo span { text-transform: uppercase; } .page-hero .lead { max-width: 42em; margin: 1.4rem auto 0; font-style: italic; color: var(--encre-doux); } /* ===================================================================== STRUCTURE ===================================================================== */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; } section[id] { scroll-margin-top: 180px; } /* ancres sous le header fixe/sticky */ section.block { padding: 4.5rem 0; } section.block.tinted { background: var(--creme-2); } section.block.rose { background: var(--rose-pale); } .section-head { text-align: center; margin-bottom: 3rem; } .section-head .title-duo { font-size: clamp(1.7rem, 4vw, 2.5rem); } .section-head .lead { max-width: 44em; margin: 1rem auto 0; font-style: italic; color: var(--encre-doux); } /* Filet décoratif */ .rule { width: 64px; height: 1px; background: var(--rose); margin: 1.6rem auto; position: relative; } .rule::after { content: "✢"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%); background: inherit; color: var(--rose-fonce); font-size: .8rem; background: transparent; padding: 0 .5rem; } /* ===================================================================== PROSE — corps de texte des pages de contenu ===================================================================== */ .prose { max-width: 46em; margin: 0 auto; } .prose > * + * { margin-top: 1.2em; } .prose h2 { font-family: var(--f-display); font-weight: 500; font-size: 1.65rem; letter-spacing: .04em; margin-top: 2.2em; color: var(--encre); } .prose h2 em { font-style: italic; color: var(--rose-fonce); font-weight: 400; } .prose h3 { font-family: var(--f-label); font-weight: 400; font-size: .95rem; letter-spacing: .22em; text-transform: uppercase; color: var(--rose-nuit); margin-top: 1.8em; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li + li { margin-top: .45em; } .prose li::marker { color: var(--rose-fonce); } .prose blockquote { font-family: var(--f-display); font-style: italic; font-size: 1.25rem; color: var(--rose-nuit); border-left: 2px solid var(--rose); padding-left: 1.2em; margin: 2em 0; } .prose strong { color: var(--rose-nuit); } /* Phrase-manifeste bien visible (ex. « Prenez votre ménopause en main. ») */ .prose blockquote.statement { font-size: clamp(1.5rem, 3.2vw, 2.1rem); text-align: center; border-left: none; padding: .4em 0; } /* Note « échographie » récurrente */ .note-echo { display: flex; gap: .9rem; align-items: flex-start; background: var(--blanc); border: 1px solid var(--rose-poudre); border-left: 3px solid var(--rose-fonce); padding: 1.1rem 1.3rem; font-size: .92rem; color: var(--encre-doux); } .note-echo::before { content: "✢"; color: var(--rose-fonce); font-size: 1.1rem; line-height: 1.4; } /* ===================================================================== PHOTOS — cadre blanc épais façon Haïtza / polaroid ===================================================================== */ .photo-frame { background: var(--blanc); padding: 14px 14px 18px; box-shadow: var(--shadow-photo); transform: rotate(-1.2deg); transition: transform var(--transition), box-shadow var(--transition); } .photo-frame.tilt-r { transform: rotate(1.2deg); } .photo-frame:hover { transform: rotate(0deg) translateY(-4px); } .photo-frame img { width: 100%; height: 100%; object-fit: cover; } .photo-frame figcaption { font-family: var(--f-label); font-weight: 300; font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; text-align: center; color: var(--encre-doux); padding-top: .8rem; } /* Bord de carte postale dentelé (modèle Haïtza) — appliqué au portrait */ .photo-frame.postcard { --dent: 9px; padding: 20px 20px 24px; transform: rotate(-1.2deg); -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - var(--dent) * 2) calc(100% - var(--dent) * 2) no-repeat, radial-gradient(var(--dent), #000 97%, #0000) 0 0 / calc(var(--dent) * 2) calc(var(--dent) * 2) round; mask: linear-gradient(#000 0 0) center / calc(100% - var(--dent) * 2) calc(100% - var(--dent) * 2) no-repeat, radial-gradient(var(--dent), #000 97%, #0000) 0 0 / calc(var(--dent) * 2) calc(var(--dent) * 2) round; } /* Encart « Good to know » — accent signature des fiches */ .good-to-know { background: var(--blanc); border: 1px solid var(--rose-poudre); border-left: 3px solid var(--rose-fonce); padding: 1.3rem 1.5rem; margin: 2em 0; } .good-to-know .gtk-label { display: block; font-family: var(--f-display); font-style: italic; font-size: 1.15rem; color: var(--rose-nuit); margin-bottom: .4rem; } .good-to-know p { font-size: .97rem; color: var(--encre-doux); } /* Placeholder en attendant les vraies photos */ .photo-ph { aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.55), transparent 60%), linear-gradient(160deg, var(--rose-pale), var(--rose-poudre) 60%, var(--rose)); position: relative; } .photo-ph.landscape { aspect-ratio: 16 / 10; } .photo-ph .ph-mono { font-family: var(--f-display); font-size: 3rem; font-style: italic; color: rgba(140, 79, 88, .4); } .photo-ph::after { content: attr(data-label); position: absolute; bottom: .8rem; font-family: var(--f-label); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(140, 79, 88, .55); } /* ===================================================================== GRILLES DE CARTES — Vos besoins (9) / Nos solutions (14) ===================================================================== */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); /* photos +20 % */ gap: 1.6rem; } /* Variante hub Besoins : 4 lignes de 3 grands carrés */ .card-grid.grid-3 { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 860px) { .card-grid.grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .card-grid.grid-3 { grid-template-columns: 1fr; } } .card-grid.grid-4 { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; } @media (max-width: 1100px) { .card-grid.grid-4 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .card-grid.grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .card-grid.grid-4 { grid-template-columns: 1fr; } } .card { display: flex; flex-direction: column; background: var(--blanc); padding: 14px 14px 0; /* bordure blanche généreuse autour de la photo */ box-shadow: 0 8px 26px rgba(51, 39, 42, .08); transition: transform var(--transition), box-shadow var(--transition); } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-photo); } .card .card-visual { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; background: radial-gradient(ellipse at 70% 20%, rgba(255,255,255,.5), transparent 55%), linear-gradient(150deg, var(--rose-pale), var(--rose-poudre)); } .card .card-visual.plain { background: var(--creme-2); } /* carré blanc/crème : items sans photo */ .card .card-visual.deep { background: var(--nude); } /* carré rose nude titré, lettres blanches */ .card .card-visual.noir { background: var(--encre); } /* carré noir titré, lettres blanches Didot */ .card .card-visual.deep .didot-text, .card .card-visual.noir .didot-text { color: var(--blanc); font-style: italic; } /* Cartes sans légende (carrés noirs/roses seuls, batch 3) : le carré remplit toute la hauteur de la carte, cadre blanc régulier */ .card .card-visual:only-child { flex: 1 0 auto; margin-bottom: 14px; } /* Visuel double (SKINFLASH PLUS) : deux photos séparées d'une ligne blanche */ .card .card-visual.duo { display: flex; gap: 4px; background: var(--blanc); padding: 0; } .card .card-visual.duo img { width: calc(50% - 2px); height: 100%; object-fit: cover; } .card .card-visual .ph-mono { font-family: var(--f-display); font-style: italic; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.2; text-align: center; padding: 0 .5rem; color: rgba(140, 79, 88, .85); } .card .card-visual img { width: 100%; height: 100%; object-fit: cover; } /* Tonalité rosée pour accorder une image beige au reste du site */ .card .card-visual img.tint-rose { filter: sepia(.14) hue-rotate(-14deg) saturate(1.02); } /* Carte sans image : intitulé écrit en toutes lettres, police Didot */ .card .card-visual .didot-text { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-style: normal; line-height: 1.35; color: var(--encre); padding: .5rem; } .card .card-label { font-family: var(--f-display); /* police élégante (Didot) demandée pour les titres */ font-weight: 650; font-size: 1.05rem; letter-spacing: .09em; text-transform: uppercase; text-align: center; color: var(--encre); padding: .95rem .6rem 1rem; /* fond blanc sous la photo réduit de ~10 % */ line-height: 1.45; } .card:hover .card-label { color: var(--rose-fonce); } a.card { color: inherit; } /* ===================================================================== ENCADRÉ « AVANT TOUTE CONSULTATION » + CTA Doctolib / contact ===================================================================== */ /* Encadré compact façon carte d'invitation : fond rose pastel, fin cadre noir, badge noir pour l'adresse mail (modèle fourni). */ .cta-rdv { background: var(--stripes-fines); padding: 3.2rem 1.5rem; } .cta-rdv .cta-box { max-width: 400px; /* -20 % (modifs v2) */ margin: 0 auto; background: var(--rose-poudre); border: 1px solid var(--encre); outline: 1px solid var(--encre); outline-offset: 4px; text-align: center; padding: 1.5rem 1.3rem 1.4rem; } .cta-rdv .cta-title { font-family: var(--f-display); font-size: 1.08rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; } .cta-rdv ul { list-style: none; margin: 1rem 0 1.3rem; display: grid; gap: .35rem; font-size: .86rem; color: var(--encre-doux); } .cta-rdv ul li::before { content: "✢ "; color: var(--rose-fonce); } .cta-rdv .cta-mail { display: inline-block; background: var(--encre); color: var(--creme); font-family: var(--f-label); font-weight: 400; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; padding: .7rem 1.4rem; margin-bottom: 1.2rem; } .cta-rdv .cta-mail:hover { background: var(--rose-nuit); color: var(--creme); } .btn { display: inline-block; font-family: var(--f-label); font-weight: 400; font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; padding: .95rem 2.2rem; border: 1px solid var(--rose-fonce); color: var(--rose-nuit); background: transparent; transition: background var(--transition), color var(--transition); } .btn:hover { background: var(--rose-fonce); color: var(--creme); } .btn.solid { background: var(--rose-fonce); color: var(--creme); } .btn.solid:hover { background: var(--rose-nuit); } .cta-rdv .cta-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; } .cta-rdv .btn { padding: .7rem 1.4rem; font-size: .72rem; letter-spacing: .22em; } /* Pastille CONTACT flottante (pages de traitements) */ .contact-pastille { position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 90; width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--rose-fonce); color: var(--creme); font-family: var(--f-label); font-weight: 400; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; box-shadow: 0 10px 26px rgba(140, 79, 88, .4); transition: transform var(--transition), background var(--transition); } .contact-pastille:hover { transform: scale(1.08); background: var(--rose-nuit); color: var(--creme); } /* ===================================================================== TARIFS — « page de livre » ===================================================================== */ /* Page de livre façon « Nos Formules » de l'hôtel Haïtza : fond rose, DOUBLE bordure fine tout autour. */ .price-book { max-width: 720px; margin: 0 auto; background: #FBEDEE; border: 1px solid var(--or-doux); box-shadow: inset 0 0 0 6px #FBEDEE, inset 0 0 0 7px var(--or-doux), var(--shadow-photo); padding: 3.4rem clamp(1.8rem, 5vw, 4rem); } .price-group + .price-group { margin-top: 2.6rem; } .price-group h2 { font-family: var(--f-display); font-size: 1.25rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-nuit); border-bottom: 1px solid var(--rose-poudre); padding-bottom: .5rem; margin-bottom: 1.1rem; } .price-row { display: flex; align-items: baseline; gap: .8rem; padding: .4rem 0; font-size: .97rem; } .price-row .p-name { flex-shrink: 0; } .price-row .p-dots { flex: 1; border-bottom: 1px dotted var(--rose); transform: translateY(-4px); } .price-row .p-val { flex-shrink: 0; font-family: var(--f-label); font-weight: 400; color: var(--rose-nuit); white-space: nowrap; } .price-note { font-size: .85rem; font-style: italic; color: var(--encre-doux); margin-top: .6rem; } /* ===================================================================== ACCORDÉONS (médecine vasculaire, précautions) ===================================================================== */ details.fold { background: var(--blanc); border: 1px solid var(--rose-poudre); margin-bottom: .9rem; } details.fold summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 1.4rem; font-family: var(--f-display); font-size: 1.12rem; font-weight: 500; letter-spacing: .05em; transition: color var(--transition); } details.fold summary::-webkit-details-marker { display: none; } details.fold summary::after { content: "+"; font-family: var(--f-label); font-weight: 300; font-size: 1.4rem; color: var(--rose-fonce); transition: transform var(--transition); } details.fold[open] summary { color: var(--rose-nuit); } details.fold[open] summary::after { transform: rotate(45deg); } details.fold .fold-body { padding: 0 1.4rem 1.5rem; color: var(--encre-doux); } details.fold .fold-body > * + * { margin-top: .9em; } details.fold .fold-body ul { padding-left: 1.2em; } /* ===================================================================== MISE EN PAGE À PROPOS — texte + portrait ===================================================================== */ .split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3.5rem; align-items: start; } .split .photo-frame { position: sticky; top: 150px; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split .photo-frame { position: static; max-width: 380px; margin: 0 auto; } } /* Liste de diplômes */ .diplomas { list-style: none; } .diplomas li { padding: .8rem 0 .8rem 1.9rem; border-bottom: 1px solid var(--rose-pale); position: relative; font-size: .95rem; } .diplomas li::before { content: "✢"; position: absolute; left: 0; color: var(--rose-fonce); } /* Chips « solutions associées » */ .chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; } .chips a { font-family: var(--f-label); font-weight: 400; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; padding: .5rem 1rem; border: 1px solid var(--rose); color: var(--rose-nuit); background: var(--blanc); transition: background var(--transition), color var(--transition); } .chips a:hover { background: var(--rose-fonce); border-color: var(--rose-fonce); color: var(--creme); } /* Éléments fondamentaux (accueil) */ .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.6rem; } .pillar { background: var(--blanc); border-top: 2px solid var(--rose-fonce); padding: 1.7rem 1.4rem; box-shadow: 0 8px 26px rgba(51, 39, 42, .06); } .pillar .pillar-num { font-family: var(--f-display); font-style: italic; font-size: 1.6rem; color: var(--rose); display: block; margin-bottom: .6rem; } .pillar p { font-size: .92rem; color: var(--encre-doux); } /* ===================================================================== FOOTER ===================================================================== */ .site-footer { background: var(--encre); color: var(--creme-2); padding: 3.6rem 1.5rem 2.4rem; margin-top: 0; } .site-footer .foot-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.4rem; align-items: start; } .site-footer .foot-brand img { width: 84px; opacity: .9; margin-bottom: 1rem; } .site-footer h4 { font-family: var(--f-label); font-weight: 400; font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; color: var(--rose); margin-bottom: 1rem; } .site-footer p, .site-footer li { font-size: .88rem; color: rgba(247, 240, 232, .75); } .site-footer ul { list-style: none; } .site-footer li + li { margin-top: .4rem; } .site-footer a { color: rgba(247, 240, 232, .85); } .site-footer a:hover { color: var(--rose); } .site-footer .foot-legal { max-width: var(--maxw); margin: 2.8rem auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(247, 240, 232, .14); font-size: .75rem; color: rgba(247, 240, 232, .45); text-align: center; letter-spacing: .06em; } /* ===================================================================== RÉVÉLATION AU SCROLL (main.js — IntersectionObserver) ===================================================================== */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.22, .6, .28, 1); } .reveal.visible { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .1s; } .reveal.d2 { transition-delay: .2s; } .reveal.d3 { transition-delay: .3s; } .reveal.d4 { transition-delay: .4s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .scroll-cue .cue-line { animation: none; } } /* Divers */ .center { text-align: center; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } /* ===================================================================== FLUIDITÉ — transitions de page, entrées cinématiques, micro-interactions (progressif : tout se dégrade proprement sur les anciens navigateurs) ===================================================================== */ /* ---- Transitions entre pages (View Transitions API) ---- Le bandeau et la pastille gardent leur continuité, le contenu glisse en fondu : le site multi-pages se ressent comme une app. */ @view-transition { navigation: auto; } .site-header { view-transition-name: site-header; } .contact-pastille { view-transition-name: contact-pastille; } @media (prefers-reduced-motion: no-preference) { @keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } } @keyframes vt-in { from { opacity: 0; transform: translateY(16px); } } ::view-transition-old(root) { animation: vt-out .25s ease both; } ::view-transition-new(root) { animation: vt-in .45s cubic-bezier(.22, .6, .28, 1) both; } } @media (prefers-reduced-motion: no-preference) { /* ---- Entrée cinématique de la page de garde ---- fill "backwards" uniquement : une fois l'entrée jouée, les transitions du morphing landing→bandeau reprennent la main. */ @keyframes rise-in { from { opacity: 0; transform: translateY(20px); filter: blur(10px); } } .header--landing .brand-doctor { animation: rise-in 1s .2s cubic-bezier(.22, .6, .28, 1) backwards; } .header--landing .brand-name { animation: rise-in 1.15s .45s cubic-bezier(.22, .6, .28, 1) backwards; } .header--landing .landing-extra { animation: rise-in 1.15s .95s cubic-bezier(.22, .6, .28, 1) backwards; } .hero .scroll-cue { animation: rise-in 1s 1.6s ease backwards; } /* ---- Bandes roses vivantes : dérive imperceptible façon store ---- */ .hero { background: var(--creme); } .hero::before { content: ""; position: absolute; top: 0; bottom: 0; left: -112px; right: 0; background: var(--stripes); animation: awning 90s linear infinite; pointer-events: none; } @keyframes awning { to { transform: translateX(112px); } } /* ---- Pastille contact : arrivée en douceur ---- */ @keyframes pastille-in { from { opacity: 0; transform: scale(.5) translateY(20px); } } .contact-pastille { animation: pastille-in .7s 1.1s cubic-bezier(.22, .6, .28, 1) backwards; } } /* ---- Zoom lent des photos au survol des cartes ---- */ .card .card-visual { overflow: hidden; } .card .card-visual img { transition: transform .8s cubic-bezier(.22, .6, .28, 1); } .card:hover .card-visual img { transform: scale(1.055); } .card .card-visual img.tint-rose { transition: transform .8s cubic-bezier(.22, .6, .28, 1); } .card:hover .card-visual img.tint-rose { transform: scale(1.055); } /* ---- Souligné animé de la navigation ---- */ .site-nav a { border-bottom: none; padding-bottom: .3rem; background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0% 1px; transition: background-size .35s ease, color var(--transition); } .site-nav a:hover, .site-nav a[aria-current="page"] { background-size: 100% 1px; } /* ---- Révélation au scroll : course plus ample, easing plus doux ---- */ .reveal { transform: translateY(32px); transition: opacity .9s ease, transform .9s cubic-bezier(.19, .6, .22, 1); } /* ---- Boutons : léger soulèvement ---- */ .btn { transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition); } .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(140, 79, 88, .25); } /* ---- Cadres photo : zoom discret de l'image ---- */ .photo-frame { overflow: hidden; } .photo-frame img { transition: transform .9s cubic-bezier(.22, .6, .28, 1); } .photo-frame:hover img { transform: scale(1.03); } /* ---- Header auto-masquant (classe .header-hidden posée par main.js) : libère l'écran quand on descend, revient dès qu'on remonte ---- */ .site-header { transition: transform .55s cubic-bezier(.22, .6, .28, 1); } .site-header.header--landing { transition: background .8s ease, border-color .8s ease, transform .55s cubic-bezier(.22, .6, .28, 1); } .site-header.header-hidden { transform: translateY(-101%); } @media (prefers-reduced-motion: reduce) { .site-header, .site-header.header--landing { transition: none; } }