/* ========================================================================= MOUVinnov — Design system "Playful & Bold" (pastel) Papier crème, navbar bande bleu pastel, titres sérif (Fraunces) en casse normale avec surlignage marqueur pastel, pills-étiquettes pleines, cartes crème plates très arrondies, CTA saumon en petites capitales, doodles dessinés à la main (étoiles, flèches, annotations). Light + dark via [data-theme] sur . ========================================================================= */ /* ------------------------------------------------------------------------- 1. VARIABLES — palette light (défaut) puis dark ------------------------------------------------------------------------- */ :root { /* Base "Médico" : encre bleu pétrole sur blanc bleuté très clair */ --ink: #14333E; --ink-soft: #3A5A64; --paper: #F4FBFC; --surface: #FFFFFF; --surface-2: #E2F4F7; /* teal très clair (pastilles, fonds doux) */ /* Palette teal : turquoise vif + bleu pétrole profond */ --black-card: #0A586B; /* teal profond : footer, contact, stats */ --teal-1: #17B8CB; /* turquoise vif (dégradés) */ --teal-2: #0789A2; /* turquoise foncé (dégradés) */ --accent: #0FA3B6; /* turquoise : CTA, étoiles, accents */ --accent-soft:#8FE3EC; /* turquoise clair : détails sur fond sombre */ --lime-pop: #0FA3B6; /* CTA */ --lime-pop-2: #12B5C6; /* hover CTA */ --pink-pop: #0FA3B6; /* aligné sur l'accent */ --pastel-blue: #E0F4F7; /* chips teal très clair */ --pastel-mint: #E0F4F7; --pastel-yellow: #BCEDF3; /* surlignage marqueur (teal clair) */ --pastel-pink: #E0F4F7; --text: var(--ink); --text-soft: #3A5A64; --muted: #66838C; --border: rgba(20, 51, 62, 0.12); --border-strong: rgba(20, 51, 62, 0.35); --shadow: 0 20px 45px -20px rgba(7, 137, 162, 0.35); --shadow-soft: 0 12px 30px -16px rgba(7, 137, 162, 0.22); /* Alias historiques (fonds de cartes, styles inline) */ --rose: var(--ink); --lilas: var(--ink); --lime: var(--ink); --orange: var(--ink); --rose-soft: var(--surface); --lilas-soft: var(--surface-2); --lime-soft: var(--surface); --orange-soft: var(--surface); --on-accent: var(--ink); --on-lilas: #FFFFFF; --bg: var(--paper); /* Rayons */ --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --r-pill: 999px; /* Espacements (héritage : utilisés aussi par des styles inline) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* Tailles de texte (héritage inline) */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.2rem; --text-xl: 1.45rem; /* ---- Alias héritage (anciens noms utilisés dans les styles inline) ---- */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --color-border: var(--border); --color-text-muted: var(--muted); --color-white: #FFFFFF; --color-accent-dark: var(--ink); --color-green-400: var(--accent-soft); --color-gray-100: var(--surface-2); /* Divers */ --nav-h: 74px; --transition: 0.25s ease; } /* Palette dark : prune profond, pastels assombris, mêmes accents */ [data-theme="dark"] { --ink: #EAF7F9; --ink-soft: #BFDFE5; --paper: #07242B; --surface: #0E323B; --surface-2: #14424D; --black-card: #052E38; --teal-1: #14A4B6; --teal-2: #066476; --accent: #2BC5D4; --accent-soft:#8FE3EC; --lime-pop: #0FA3B6; --lime-pop-2: #12B5C6; --pink-pop: #2BC5D4; --pastel-blue: #11505C; --pastel-mint: #11505C; --pastel-yellow: #0F5B68; --pastel-pink: #11505C; --text: var(--ink); --text-soft: #BFDFE5; --muted: #7FA6AE; --border: rgba(234, 247, 249, 0.14); --border-strong: rgba(234, 247, 249, 0.4); --shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.6); --shadow-soft: 0 12px 30px -16px rgba(0, 0, 0, 0.5); --on-lilas: #14333E; --color-accent-dark: var(--ink); } /* ------------------------------------------------------------------------- 2. RESET + BASE ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; font-family: 'Manrope', system-ui, -apple-system, sans-serif; font-size: 1rem; line-height: 1.65; color: var(--text); background-color: var(--paper); transition: background-color 0.4s ease, color 0.4s ease; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--text); text-decoration: none; transition: color var(--transition), opacity var(--transition); } a:hover { opacity: 0.65; } ::selection { background: var(--accent); color: #fff; } /* Typographie : sérif élégante en casse normale */ h1, h2, h3, h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.01em; line-height: 1.12; text-transform: none; color: var(--text); margin: 0 0 var(--space-4); } h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); } h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); } h3 { font-size: clamp(1.08rem, 2.2vw, 1.3rem); } p { margin: 0 0 var(--space-4); color: var(--text-soft); } strong { color: var(--text); } /* Mot accentué : surlignage "marqueur" pastel */ .hl, .hero__title-highlight { color: inherit; background-image: linear-gradient(transparent 38%, var(--pastel-yellow) 38%, var(--pastel-yellow) 92%, transparent 92%); padding: 0 0.12em; border-radius: 4px; } h2 .hl { background-image: linear-gradient(transparent 38%, var(--pastel-mint) 38%, var(--pastel-mint) 92%, transparent 92%); } .container { width: min(1200px, 100% - 2.5rem); margin-inline: auto; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff; padding: 0.6rem 1.2rem; border-radius: var(--r-pill); z-index: 999; } .skip-link:focus { left: 1rem; top: 1rem; } /* ------------------------------------------------------------------------- 3. BOUTONS — pills saumon, petites capitales espacées ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.45rem; border-radius: var(--r-pill); border: none; font-family: 'Manrope', sans-serif; font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), opacity var(--transition); text-decoration: none; } .btn--primary { background: var(--lime-pop); color: #3A1F16; } .btn--primary:hover { transform: translateY(-2px) scale(1.02); opacity: 1; background: var(--lime-pop-2); color: #3A1F16; } /* Pastille ronde autour de la flèche */ .btn--primary .btn__arrow { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: var(--accent); font-size: 0.85em; } .btn--ghost { background: var(--surface); color: var(--text); border: 1.5px solid var(--border-strong); } .btn--ghost:hover { opacity: 1; transform: translateY(-2px); box-shadow: var(--shadow-soft); } .btn__arrow { display: inline-block; transition: transform var(--transition); } .btn:hover .btn__arrow { transform: translateX(3px); } /* ------------------------------------------------------------------------- 4. PILLS / BADGES — étiquettes pastel pleines avec étoile ✦ ------------------------------------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--surface-2); border: none; border-radius: var(--r-pill); padding: 0.45rem 1.05rem; font-size: 0.83rem; font-weight: 700; color: var(--text); white-space: nowrap; } .pill::before { content: '✦'; font-size: 0.85em; color: var(--ink); opacity: 0.55; } .pill--plain::before { content: none; } /* Bannière-pill flottante : étiquette rose, sérif */ .floating-pill { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--pastel-pink); border: none; border-radius: var(--r-pill); padding: 0.5rem 1.3rem; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 0.95rem; color: var(--ink); } .floating-pill::before { content: '✦'; color: var(--accent); } /* Eyebrow de section : petit label letterspacé, sans cadre */ .section__eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; background: transparent; border: none; border-radius: var(--r-pill); padding: 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-soft); margin-bottom: var(--space-4); } .section__eyebrow::before { content: '✦'; color: var(--accent); font-size: 0.9em; } /* ------------------------------------------------------------------------- 5. HEADER / NAVBAR — bande bleu pastel arrondie ------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0.9rem; z-index: 100; width: min(1240px, 100% - 1.6rem); margin: 0.9rem auto 0; } .site-header__inner { position: relative; display: flex; align-items: center; gap: 1rem; background: var(--pastel-blue); border: none; border-radius: var(--r-pill); padding: 0.55rem 1.1rem; box-shadow: var(--shadow-soft); } .logo { display: inline-flex; align-items: center; flex-shrink: 0; } .logo__image { height: 42px; width: auto; border-radius: 10px; } .main-nav { display: flex; align-items: center; gap: 0.8rem; margin-left: auto; } .nav-list { display: flex; list-style: none; margin: 0; padding: 0; gap: 0.1rem; } .nav-link { display: inline-block; padding: 0.5rem 0.8rem; border-radius: var(--r-pill); font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); transition: background var(--transition), color var(--transition); } .nav-link:hover { background: rgba(255, 255, 255, 0.45); opacity: 1; } .nav-link--active { background: var(--surface); color: var(--ink); } .nav-link--active:hover { background: var(--surface); color: var(--ink); } .nav-cta { padding: 0.55rem 1.25rem; } /* --- Contrôles : recherche, langue, thème --- */ .nav-tools { display: flex; align-items: center; gap: 0.45rem; } .tool-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--surface); color: var(--ink); cursor: pointer; transition: all var(--transition); padding: 0; } .tool-btn:hover { background: var(--accent); color: #fff; transform: translateY(-1px); } .tool-btn svg { width: 17px; height: 17px; } /* Toggle langue FR / EN */ .lang-toggle { display: inline-flex; border: none; border-radius: var(--r-pill); background: var(--surface); overflow: hidden; } .lang-toggle button { border: none; background: transparent; font-family: inherit; font-size: 0.72rem; font-weight: 800; padding: 0.42rem 0.65rem; cursor: pointer; color: var(--muted); transition: all var(--transition); } .lang-toggle button.is-active { background: var(--ink); color: var(--paper); } /* Icônes thème : soleil OU lune */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* --- Recherche déroulante --- */ .search-wrap { position: relative; } .search-box { position: absolute; top: calc(100% + 0.9rem); right: 0; width: min(420px, 92vw); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 0.9rem; display: none; z-index: 50; } .search-box.is-open { display: block; animation: pop 0.18s ease; } @keyframes pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .search-box__input { width: 100%; border: 1.5px solid var(--border-strong); border-radius: var(--r-pill); background: var(--paper); color: var(--text); font-family: inherit; font-size: 0.95rem; padding: 0.7rem 1.1rem; outline: none; } .search-box__input:focus { border-color: var(--accent); } .search-box__results { list-style: none; margin: 0.6rem 0 0; padding: 0; max-height: 320px; overflow-y: auto; } .search-box__results li a { display: block; padding: 0.55rem 0.8rem; border-radius: var(--r-sm); color: var(--text); font-size: 0.88rem; font-weight: 600; } .search-box__results li a:hover { background: var(--surface-2); opacity: 1; } .search-box__results li a small { display: block; color: var(--muted); font-weight: 500; } .search-box__empty { padding: 0.6rem 0.8rem; color: var(--muted); font-size: 0.85rem; margin: 0; } /* Burger mobile */ .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; margin-left: auto; } .nav-toggle__bar { width: 24px; height: 2.5px; background: var(--ink); border-radius: 3px; transition: all var(--transition); } /* ------------------------------------------------------------------------- 6. HERO ACCUEIL — split : badge + grand titre sérif à gauche, photo en arche à droite, rangée de cartes crème dessous ------------------------------------------------------------------------- */ .hero-eway { position: relative; z-index: 0; overflow: visible; padding: 3rem 0 3.5rem; } /* Vagues concentriques en coin, très discrètes */ .hero-eway::before { content: ''; position: absolute; top: -120px; right: -60px; width: 320px; height: 320px; border-radius: 50%; background: repeating-radial-gradient(circle at center, transparent 0 16px, var(--border) 16px 18px); opacity: 0.4; pointer-events: none; z-index: -1; } .hero-eway__pill-row { display: flex; justify-content: flex-start; margin-bottom: 1.4rem; } .hero-split { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; margin-bottom: 3rem; } .hero-split__media { position: relative; border-radius: var(--r-xl); overflow: visible; transform: rotate(1.5deg); transition: transform 0.3s ease; } .hero-split__media:hover { transform: rotate(0); } /* Photo en arche douce */ .hero-split__photo { aspect-ratio: 4 / 3; border-radius: 130px 130px var(--r-xl) var(--r-xl); background-color: var(--surface-2); background-size: cover; background-position: center; box-shadow: var(--shadow); } .hero-split__badge { position: absolute; top: -16px; left: -10px; background: var(--pastel-yellow); border: none; border-radius: var(--r-pill); padding: 0.45rem 1.05rem; font-size: 0.8rem; font-weight: 800; color: var(--ink); transform: rotate(-4deg); box-shadow: var(--shadow-soft); z-index: 3; } .hero-split__badge::before { content: '✦ '; color: var(--accent); } .hero-eway__title { margin-bottom: var(--space-4); } .hero-eway__lead { max-width: 540px; margin: 0 0 var(--space-5); font-size: 1.05rem; color: var(--text-soft); } .hero-eway__actions { display: flex; gap: 0.8rem; justify-content: flex-start; flex-wrap: wrap; } /* Rangée de cartes crème, légèrement inclinées */ .hero-cards { position: relative; display: flex; justify-content: center; align-items: stretch; gap: 1.2rem; flex-wrap: wrap; } /* Connecteur pointillé discret derrière les cartes */ .hero-cards::before { content: ''; position: absolute; left: 4%; right: 4%; top: 50%; height: 2px; background-image: linear-gradient(to right, var(--border-strong) 50%, transparent 50%); background-size: 12px 2px; opacity: 0.5; z-index: -1; } .hero-card { position: relative; width: 218px; min-height: 165px; border-radius: var(--r-lg); padding: 1.3rem 1.2rem; text-align: left; display: flex; flex-direction: column; justify-content: space-between; gap: 0.8rem; background: var(--surface-2); border: none; box-shadow: none; transition: transform 0.3s ease; color: var(--text); } .hero-card--rose { transform: rotate(-1.5deg); } .hero-card--lilas { transform: rotate(1deg); } .hero-card--lime { transform: rotate(-1deg); } .hero-card--orange { transform: rotate(1.5deg); } .hero-card:hover { transform: rotate(0deg) translateY(-6px); } .hero-card__dot { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hero-card__dot svg, .hero-card__dot img { width: 22px; height: 22px; } [data-theme="dark"] .hero-card__dot { background: #FAEDD9; } .hero-card__label { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.05rem; line-height: 1.25; text-transform: none; } .hero-card__sub { font-size: 0.78rem; font-weight: 600; opacity: 0.7; margin-top: 0.3rem; } /* Connecteur pointillé vertical décoratif */ .dotted-connector { width: 2px; height: 56px; margin: 0 auto; background-image: linear-gradient(to bottom, var(--border-strong) 45%, transparent 45%); background-size: 2px 10px; } /* ------------------------------------------------------------------------- 7. NUAGE DE PILLS pastel autour d'un grand titre ------------------------------------------------------------------------- */ .pills-cloud-section { text-align: center; padding: 4rem 0; } .pills-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; max-width: 760px; margin: 0 auto; } .pills-cloud .pill:nth-child(4n+1) { background: var(--pastel-pink); } .pills-cloud .pill:nth-child(4n+2) { background: var(--pastel-blue); } .pills-cloud .pill:nth-child(4n+3) { background: var(--pastel-mint); } .pills-cloud .pill:nth-child(4n+4) { background: var(--pastel-yellow); } .pills-cloud .pill:nth-child(odd) { transform: rotate(-1.5deg); } .pills-cloud .pill:nth-child(even) { transform: rotate(1.5deg); } .pills-cloud--top { margin-bottom: 1.8rem; } .pills-cloud--bottom { margin-top: 1.8rem; } /* ------------------------------------------------------------------------- 8. SECTIONS GÉNÉRIQUES ------------------------------------------------------------------------- */ .section { padding: 4rem 0; } .section--alt { background: transparent; } .section__header { text-align: center; max-width: 720px; margin: 0 auto var(--space-7); } .section__subtitle { color: var(--muted); font-size: 1rem; } /* ------------------------------------------------------------------------- 9. CARTES EXPERTISES (accueil) — cartes crème plates ------------------------------------------------------------------------- */ .expertises-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; } .expertise-card { position: relative; border-radius: var(--r-lg); padding: 1.8rem 1.5rem 1.6rem; background: var(--surface-2); border: none; box-shadow: none; transition: transform 0.3s ease, box-shadow 0.3s ease; } .expertise-card:nth-child(1) { transform: rotate(-1deg); } .expertise-card:nth-child(2) { transform: rotate(1deg); } .expertise-card:nth-child(3) { transform: rotate(-1deg); } .expertise-card:nth-child(4) { transform: rotate(1deg); } .expertise-card:hover { transform: rotate(0) translateY(-6px); box-shadow: var(--shadow-soft); } .expertise-card__icon { width: 54px; height: 54px; border-radius: 50%; background: var(--surface); border: none; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); } .expertise-card__icon svg { width: 27px; height: 27px; color: var(--accent); } .expertise-card__title { margin-bottom: var(--space-2); } .expertise-card__text { font-size: 0.9rem; color: var(--text-soft); margin: 0; } /* ------------------------------------------------------------------------- 10. CARTES PROJETS — image encadrée + pastille flèche + badge pastel ------------------------------------------------------------------------- */ .projects-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .project-card { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; border: none; box-shadow: var(--shadow-soft); transition: transform 0.3s ease, box-shadow 0.3s ease; color: var(--text); padding: 0.85rem; } .project-card:hover { transform: translateY(-6px) rotate(-0.5deg); box-shadow: var(--shadow); color: var(--text); opacity: 1; } /* Image encadrée dans la carte */ .project-card__media { position: relative; aspect-ratio: 16 / 10; background-color: var(--surface-2); background-size: cover; background-position: center; border-radius: var(--r-md); } /* Pastille flèche ronde : pivote au survol */ .project-card__media::after { content: '\2192'; position: absolute; top: 0.8rem; right: 0.8rem; width: 38px; height: 38px; border-radius: 50%; background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; box-shadow: var(--shadow-soft); transition: all 0.25s ease; } .project-card:hover .project-card__media::after { background: var(--accent); color: #fff; transform: rotate(-45deg); } .project-card__category { position: absolute; top: 0.8rem; left: 0.8rem; background: var(--pastel-mint); color: var(--ink); border: none; border-radius: var(--r-pill); padding: 0.3rem 0.85rem; font-size: 0.72rem; font-weight: 800; text-transform: lowercase; } .project-card__category::before { content: '✦ '; color: var(--accent); } .project-card__body { padding: 1rem 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; } .project-card__title { margin: 0; font-size: 1.12rem; } .project-card__client { font-size: 0.8rem; font-weight: 700; color: var(--muted); } .project-card__cta { margin-top: 0.6rem; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: underline; text-underline-offset: 4px; } .project-card:hover .project-card__cta { color: var(--accent); } /* Filtres projets */ .projects-filter { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; margin-bottom: var(--space-7); } .filter-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; font-size: 0.84rem; font-weight: 700; text-transform: lowercase; padding: 0.48rem 1.1rem; border-radius: var(--r-pill); cursor: pointer; transition: all var(--transition); } .filter-btn:hover { background: var(--surface-2); } .filter-btn--active { background: var(--ink); border-color: var(--ink); color: var(--paper); } .filter-btn--active:hover { background: var(--ink); color: var(--paper); } /* ------------------------------------------------------------------------- 11. ACTUALITÉS ------------------------------------------------------------------------- */ .news-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .news-card { background: var(--surface); border: none; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; } .news-card:nth-child(odd):hover { transform: translateY(-6px) rotate(-0.5deg); box-shadow: var(--shadow); } .news-card:nth-child(even):hover { transform: translateY(-6px) rotate(0.5deg); box-shadow: var(--shadow); } .news-card__media { aspect-ratio: 16 / 9; background-color: var(--surface-2); background-size: cover; background-position: center; } .news-card__body { padding: 1.2rem 1.3rem 1.5rem; } .news-card__meta { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 800; color: var(--ink); background: var(--pastel-blue); border: none; padding: 0.28rem 0.8rem; border-radius: var(--r-pill); margin-bottom: var(--space-3); } .news-card__meta::before { content: '✦'; color: var(--accent); } .news-card__body a { text-decoration: underline; text-underline-offset: 4px; } /* ------------------------------------------------------------------------- 12. MARQUEE + PARTENAIRES ------------------------------------------------------------------------- */ .marquee { overflow: hidden; padding: 0.85rem 0; background: var(--pastel-blue); transform: rotate(0deg); margin: 1.5rem 0; border-radius: 0; } .marquee__track { display: flex; gap: 2.5rem; width: max-content; animation: marquee 28s linear infinite; } .marquee__item { color: var(--ink); font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1rem; text-transform: none; white-space: nowrap; } .marquee__item::after { content: ' ✦'; color: var(--accent); } @keyframes marquee { to { transform: translateX(-50%); } } .partners { padding: 3.2rem 0 2.2rem; } .partners__title { text-align: center; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); margin-bottom: var(--space-5); } .partners__track-wrapper { overflow: hidden; } .partners__track { display: flex; align-items: center; gap: 2.2rem; width: max-content; animation: marquee 45s linear infinite; } .partner { position: relative; display: flex; align-items: center; font-weight: 800; color: var(--muted); background: #FFFFFF; padding: 0.7rem 1.3rem; border-radius: var(--r-md); border: 1px solid var(--border); } /* "+" entre les logos */ .partner:not(:first-child)::before { content: '+'; position: absolute; left: -1.55rem; top: 50%; transform: translateY(-50%); font-weight: 800; font-size: 1.1rem; color: var(--accent); pointer-events: none; } /* ------------------------------------------------------------------------- 13. STATS — trio pastel rose / menthe / bleu ------------------------------------------------------------------------- */ .stats { padding: 0.5rem 0; } .stats__inner { display: grid; grid-template-columns: 1fr; gap: 1.2rem; } .stat { border-radius: var(--r-lg); padding: 1.8rem 1.4rem; text-align: center; box-shadow: none; border: none; transition: transform 0.3s ease; } .stat:nth-child(1) { background: var(--pastel-pink); transform: rotate(-1.5deg); } .stat:nth-child(2) { background: var(--pastel-mint); transform: rotate(1deg); } .stat:nth-child(3) { background: var(--pastel-blue); transform: rotate(-1deg); } .stat:hover { transform: rotate(0); } .stat__number { font-family: 'Fraunces', Georgia, serif; font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 600; line-height: 1; color: var(--ink); } .stat__label { font-weight: 700; font-size: 0.9rem; margin-top: 0.4rem; color: var(--ink); opacity: 0.75; } /* ------------------------------------------------------------------------- 14. CONTACT (accueil) — grande carte prune arrondie ------------------------------------------------------------------------- */ .contact-home { background: var(--black-card); border-radius: var(--r-xl); padding: 2.6rem 1.8rem; display: grid; grid-template-columns: 1fr; gap: 2rem; box-shadow: var(--shadow); transform: rotate(-0.5deg); } .contact-home h2, .contact-home p { color: #FFFFFF; } .contact-home p { opacity: 0.85; } .contact-home .section__eyebrow { color: var(--accent-soft); } .contact-home .section__eyebrow::before { color: var(--accent-soft); } /* ------------------------------------------------------------------------- 15. PAGE HEADER (pages internes) — étiquette rose + titre sérif ------------------------------------------------------------------------- */ .page-header { position: relative; padding: 3.2rem 0 2.2rem; text-align: center; } .page-header__breadcrumb { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--pastel-pink); border: none; border-radius: var(--r-pill); padding: 0.4rem 1.05rem; font-family: 'Fraunces', Georgia, serif; font-size: 0.88rem; font-weight: 600; color: var(--ink); margin-bottom: var(--space-5); } .page-header__breadcrumb::before { content: '✦'; color: var(--accent); } .page-header__breadcrumb a { color: inherit; } .page-header__lead { max-width: 660px; margin: 0 auto; font-size: 1.02rem; color: var(--text-soft); } /* Mini-cartes pastel décoratives */ .page-header__cards { display: flex; justify-content: center; gap: 0.8rem; margin-bottom: 2rem; } .mini-card { position: relative; width: 68px; height: 68px; border-radius: var(--r-md); border: none; box-shadow: none; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; transition: transform 0.3s ease; } .mini-card--rose { background: var(--pastel-pink); transform: rotate(-7deg); } .mini-card--lilas { background: var(--pastel-blue); transform: rotate(4deg); } .mini-card--lime { background: var(--pastel-mint); transform: rotate(-4deg); } .mini-card--orange { background: var(--pastel-yellow); transform: rotate(7deg); } .mini-card:hover { transform: rotate(0) scale(1.06); } /* ------------------------------------------------------------------------- 16. PORTRAIT (qui-sommes-nous) — photo en arche + sticker rose ------------------------------------------------------------------------- */ .portrait { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } .portrait__visual { position: relative; max-width: 360px; margin: 0 auto; } .portrait__polaroid { position: relative; background: var(--surface); border-radius: 120px 120px var(--r-md) var(--r-md); padding: 0.9rem 0.9rem 1.1rem; box-shadow: var(--shadow); transform: rotate(-2deg); border: none; transition: transform 0.3s ease; } .portrait__polaroid:hover { transform: rotate(0); } .portrait__photo { aspect-ratio: 4 / 5; border-radius: 110px 110px var(--r-sm) var(--r-sm); background-color: var(--surface-2); } .portrait__caption { text-align: center; font-family: 'Fraunces', Georgia, serif; font-weight: 600; margin: 0.8rem 0 0; font-size: 0.95rem; color: var(--text); } .portrait__sticker { position: absolute; top: -14px; right: -10px; background: var(--pink-pop); color: #4A1F2C; font-size: 0.76rem; font-weight: 800; padding: 0.5rem 1rem; border-radius: var(--r-pill); transform: rotate(6deg); box-shadow: var(--shadow-soft); z-index: 3; } .portrait__content p { font-size: 0.98rem; } /* ------------------------------------------------------------------------- 17. TIMELINE — fil pointillé + étoiles saumon ------------------------------------------------------------------------- */ .timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; position: relative; } .timeline::before { content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background-image: linear-gradient(to bottom, var(--border-strong) 50%, transparent 50%); background-size: 2px 10px; } .timeline__item { position: relative; padding: 0 0 2rem 2.4rem; } .timeline__item::before { content: '✦'; position: absolute; left: 0; top: 0; color: var(--accent); font-size: 1.2rem; line-height: 1; } .timeline__year { display: inline-block; background: var(--pastel-blue); border: none; border-radius: var(--r-pill); font-weight: 800; font-size: 0.78rem; padding: 0.28rem 0.9rem; margin-bottom: 0.5rem; color: var(--ink); } .timeline__item--highlight .timeline__year { background: var(--accent); color: #fff; } .timeline__body h3 { margin-bottom: 0.3rem; } .timeline__body p { font-size: 0.92rem; margin: 0; color: var(--text-soft); } /* ------------------------------------------------------------------------- 18. VALEURS — cartes crème numérotées ------------------------------------------------------------------------- */ .values { display: grid; grid-template-columns: 1fr; gap: 1.3rem; } .value { position: relative; border-radius: var(--r-lg); padding: 1.7rem 1.4rem 1.5rem; background: var(--surface-2); border: none; box-shadow: none; transition: transform 0.3s ease; } .value:nth-child(1) { transform: rotate(-1deg); } .value:nth-child(2) { transform: rotate(1deg); } .value:nth-child(3) { transform: rotate(-1deg); } .value:nth-child(4) { transform: rotate(1deg); } .value:hover { transform: rotate(0) translateY(-4px); } .value__number { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 0.95rem; color: var(--accent); margin-bottom: var(--space-3); } .value p { font-size: 0.92rem; margin: 0; } /* ------------------------------------------------------------------------- 19. EXPERTISES (page) — fiches image + texte ------------------------------------------------------------------------- */ .expertise-detail { display: grid; grid-template-columns: 1fr; gap: 1.8rem; align-items: center; margin-bottom: 3rem; background: var(--surface); border: none; border-radius: var(--r-xl); padding: 1.4rem; box-shadow: var(--shadow-soft); transition: transform 0.3s ease; } .expertise-detail:nth-child(odd) { transform: rotate(-0.4deg); } .expertise-detail:nth-child(even) { transform: rotate(0.4deg); } .expertise-detail:hover { transform: rotate(0); } .expertise-detail__visual { aspect-ratio: 4 / 3; border-radius: var(--r-lg); background-color: var(--surface-2); background-size: cover; background-position: center; } .expertise-detail > div:last-child { padding: 0.4rem 0.6rem 0.8rem; } .expertise-detail__tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: var(--space-4); } .expertise-detail__tag { background: var(--pastel-mint); border: none; border-radius: var(--r-pill); font-size: 0.74rem; font-weight: 700; padding: 0.28rem 0.8rem; color: var(--ink); } .expertise-detail__tag::before { content: '✦ '; color: var(--accent); } .expertise-detail__tag:nth-child(even) { background: var(--pastel-yellow); } /* ------------------------------------------------------------------------- 20. FICHE PROJET ------------------------------------------------------------------------- */ .project-hero { padding: 2.8rem 0 1rem; } .project-hero .container { position: relative; text-align: center; } /* Étoile décorative */ .project-hero .container::before { content: '✦'; position: absolute; top: -6px; right: 6%; font-size: 2rem; transform: rotate(18deg); color: var(--pink-pop); pointer-events: none; } .project-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-bottom: var(--space-5); } .project-hero__meta span { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--pastel-mint); border: none; border-radius: var(--r-pill); padding: 0.42rem 1rem; font-size: 0.8rem; font-weight: 600; color: var(--ink); } .project-hero__meta span:nth-child(2) { background: var(--pastel-pink); } .project-hero__meta span:nth-child(3) { background: var(--pastel-yellow); } .project-hero__meta span::before { content: '✦'; color: var(--accent); } .project-hero__meta strong { color: var(--ink); } .project-hero h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); max-width: 880px; margin-inline: auto; } .project-hero__visual { margin-top: var(--space-6); aspect-ratio: 16 / 7; border-radius: var(--r-xl); background-color: var(--surface-2); background-size: cover; background-position: center; box-shadow: var(--shadow); border: none; transform: rotate(-0.6deg); transition: transform 0.35s ease; } .project-hero__visual:hover { transform: rotate(0); } .project-content { display: grid; grid-template-columns: 1fr; gap: 2.2rem; padding: 2.5rem 0 4rem; } .project-content__main h2 { font-size: 1.4rem; margin-top: var(--space-6); } .project-content__main h2:first-child { margin-top: 0; } .project-content__main h2::before { content: '✦ '; font-size: 0.85em; color: var(--accent); } .project-content__main ul { color: var(--text-soft); padding-left: 1.2rem; } .project-content__main li { margin-bottom: 0.35rem; } .project-content__main a { text-decoration: underline; text-underline-offset: 4px; } .project-sidebar { position: sticky; top: calc(var(--nav-h) + 2rem); background: var(--surface-2); border: none; border-radius: var(--r-lg); box-shadow: none; padding: 1.7rem 1.5rem 1.6rem; height: fit-content; transform: rotate(0.6deg); transition: transform 0.3s ease; } .project-sidebar:hover { transform: rotate(0); } .project-sidebar dt { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink); opacity: 0.6; margin-top: var(--space-4); } .project-sidebar dt::before { content: '✦ '; color: var(--accent); } .project-sidebar dd { margin: 0.2rem 0 0; font-size: 0.92rem; color: var(--text-soft); } .project-sidebar dl { margin: 0; } /* ------------------------------------------------------------------------- 21. CONTACT (page) — carte info prune + formulaire arrondi ------------------------------------------------------------------------- */ .contact-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; } .contact-info { background: var(--black-card); border-radius: var(--r-xl); padding: 2rem 1.7rem; color: #FFFFFF; box-shadow: var(--shadow); transform: rotate(-1deg); transition: transform 0.3s ease; } .contact-info:hover { transform: rotate(0); } .contact-info h2, .contact-info strong { color: #FFFFFF; } .contact-info p { color: rgba(255,255,255,0.82); } .contact-info a { color: #FFFFFF; } .contact-info a:hover { opacity: 0.7; } .contact-info__item { display: flex; gap: 0.9rem; align-items: flex-start; margin-top: var(--space-5); font-size: 0.95rem; color: rgba(255,255,255,0.82); } .contact-info__icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: rgba(255,255,255,0.14); border: none; display: flex; align-items: center; justify-content: center; color: var(--accent-soft); } .form { display: flex; flex-direction: column; gap: 1.1rem; } .form__field { display: flex; flex-direction: column; gap: 0.35rem; } .form__label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text); } .form__input, .form__textarea { border: 1.5px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-family: inherit; font-size: 0.95rem; padding: 0.85rem 1.1rem; outline: none; transition: border-color var(--transition), box-shadow var(--transition); } .form__input:focus, .form__textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } .form__textarea { resize: vertical; min-height: 140px; } .form__status { border-radius: var(--r-md); padding: 0.9rem 1.2rem; font-weight: 700; font-size: 0.92rem; margin-bottom: 1rem; } .form__status--ok { background: var(--pastel-mint); color: #2E2126; border: none; } .form__status--err { background: var(--pastel-pink); color: #2E2126; border: none; } /* ------------------------------------------------------------------------- 22. FOOTER — grande carte prune arrondie ------------------------------------------------------------------------- */ .site-footer { margin: 3rem auto 1.2rem; width: min(1240px, 100% - 1.6rem); background: var(--black-card); color: #E3D3DA; border-radius: var(--r-xl); padding: 3rem 0 1.5rem; box-shadow: var(--shadow); } [data-theme="dark"] .site-footer { border: 1px solid var(--border); } .site-footer__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2.5rem; } .logo-footer { display: inline-flex; align-items: center; gap: 0.5rem; } .logo-footer__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent-soft); } .logo-footer__text { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.3rem; color: #FFFFFF; } .site-footer__baseline { font-size: 0.9rem; color: #BBA3AD; margin-top: 0.7rem; } .site-footer__title { color: #FFFFFF; font-size: 0.95rem; margin-bottom: 0.8rem; } .site-footer__title::before { content: '✦ '; color: var(--accent-soft); } .site-footer__address { font-style: normal; font-size: 0.92rem; } .site-footer__col p { margin: 0.25rem 0; font-size: 0.92rem; color: #E3D3DA; } .site-footer__col a { color: #E3D3DA; } .site-footer__col a:hover { color: #FFFFFF; opacity: 1; } .site-footer__list { list-style: none; margin: 0; padding: 0; } .site-footer__list li { margin-bottom: 0.45rem; } .site-footer__list a { font-size: 0.92rem; color: #E3D3DA; } .site-footer__list a:hover { color: #FFFFFF; opacity: 1; } .site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.14); padding-top: 1.2rem; display: flex; flex-direction: column; gap: 0.8rem; font-size: 0.82rem; color: #BBA3AD; } .site-footer__bottom p { margin: 0; color: inherit; } .site-footer__legal { list-style: none; display: flex; gap: 1.2rem; margin: 0; padding: 0; flex-wrap: wrap; } .site-footer__legal a { color: #BBA3AD; } .site-footer__legal a:hover { color: #FFFFFF; opacity: 1; } /* ------------------------------------------------------------------------- 22 bis. DOODLES — étoiles, flèches, annotations manuscrites ------------------------------------------------------------------------- */ /* Annotation manuscrite (police Caveat) */ .hand-note { font-family: 'Caveat', 'Segoe Script', cursive; font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 600; color: var(--accent); transform: rotate(-3deg); display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; } /* Doodle SVG inline : saumon, ne capte pas la souris */ .doodle { position: absolute; pointer-events: none; color: var(--accent); z-index: 2; } .doodle svg { width: 100%; height: 100%; display: block; } /* Étoiles autour des bandeaux de titre des pages internes */ .page-header::before, .page-header::after { position: absolute; font-size: 2.3rem; line-height: 1; opacity: 0.9; pointer-events: none; } .page-header::before { content: '✦'; top: 24%; left: 10%; transform: rotate(-15deg); color: var(--pink-pop); } .page-header::after { content: '✺'; bottom: 18%; right: 9%; font-size: 2.7rem; transform: rotate(12deg); color: var(--accent); } /* ------------------------------------------------------------------------- 23. ANIMATION D'APPARITION DOUCE ------------------------------------------------------------------------- */ /* Par défaut, tout est VISIBLE (même si le JS ne tourne pas). Le JS ajoute .reveal-armed juste avant d'observer : c'est cette classe qui masque l'élément, puis .is-visible le fait apparaître en douceur. */ .reveal-armed { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal-armed.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal-armed { opacity: 1; transform: none; transition: none; } .marquee__track, .partners__track { animation: none; } } /* ------------------------------------------------------------------------- 24. RESPONSIVE — mobile-first : burger < 768px, ≥768px, ≥1200px ------------------------------------------------------------------------- */ /* Mobile : nav cachée derrière le burger, outils dans le menu */ @media (max-width: 767.98px) { .nav-toggle { display: flex; } .main-nav { display: none; position: absolute; top: calc(100% + 0.6rem); left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 1rem; gap: 0.6rem; margin-left: 0; } .main-nav--open { display: flex; } .nav-list { flex-direction: column; } .nav-link { display: block; } .nav-cta { justify-content: center; } .nav-tools { justify-content: center; padding-top: 0.6rem; border-top: 1px solid var(--border); } .search-wrap { position: static; } .search-box { position: static; width: 100%; margin-top: 0.5rem; box-shadow: none; } .hero-cards { gap: 1rem; } .hero-card { width: calc(50% - 0.6rem); min-height: 150px; } /* Doodles allégés sur mobile (les flottants sont masqués) */ .doodle { display: none; } .page-header::before { left: 4%; font-size: 1.7rem; } .page-header::after { right: 4%; font-size: 2rem; } .hero-eway::before { width: 220px; height: 220px; top: -80px; right: -50px; } } /* Tablette / desktop ≥ 768px */ @media (min-width: 768px) { .hero-split { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; } .expertises-grid { grid-template-columns: repeat(2, 1fr); } .projects-grid { grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; } /* Page Projets : 1re carte "a la une" pleine largeur */ .container:has(.projects-filter) .projects-grid .project-card:first-child { grid-column: 1 / -1; } .container:has(.projects-filter) .projects-grid .project-card:first-child .project-card__media { aspect-ratio: 16 / 7; } .news-grid { grid-template-columns: repeat(2, 1fr); } .values { grid-template-columns: repeat(2, 1fr); } .stats__inner { grid-template-columns: repeat(3, 1fr); } .contact-home { grid-template-columns: 1.4fr 1fr; padding: 3.2rem 3rem; } .contact-layout { grid-template-columns: 1fr 1.4fr; } .portrait { grid-template-columns: 360px 1fr; } .expertise-detail { grid-template-columns: 1fr 1fr; padding: 1.8rem; } .expertise-detail--reverse .expertise-detail__visual { order: 2; } .project-content { grid-template-columns: 1fr 320px; } } /* Large ≥ 1200px */ @media (min-width: 1200px) { .expertises-grid { grid-template-columns: repeat(4, 1fr); } .projects-grid { grid-template-columns: repeat(3, 1fr); } .news-grid { grid-template-columns: repeat(3, 1fr); } .values { grid-template-columns: repeat(4, 1fr); } .hero-eway { padding: 3.5rem 0 4.5rem; } /* Page Projets : carte "a la une" sur 2 colonnes + respiration reguliere */ .container:has(.projects-filter) .projects-grid .project-card:first-child { grid-column: span 2; } .container:has(.projects-filter) .projects-grid .project-card:nth-child(9n+6) { grid-column: span 2; } .container:has(.projects-filter) .projects-grid .project-card:nth-child(9n+6) .project-card__media { aspect-ratio: 16 / 8; } } /* ========================================================================= 25. THÈME "MÉDICO" — teal épuré et droit. Titres sans-serif très gras, hero en panneau dégradé turquoise, cartes blanches droites, chips teal clair, zéro fantaisie manuscrite. ========================================================================= */ /* Titres : retour au sans-serif géométrique très gras */ h1, h2, h3, h4, .hero-card__label, .stat__number, .value__number, .portrait__caption, .logo-footer__text, .marquee__item, .floating-pill, .page-header__breadcrumb { font-family: 'Manrope', system-ui, sans-serif; } h1, h2 { font-weight: 800; letter-spacing: -0.025em; } h3, h4 { font-weight: 800; letter-spacing: -0.01em; } .floating-pill, .page-header__breadcrumb { font-weight: 700; font-size: 0.85rem; } /* Surlignage du mot accentué : teal clair */ .hl, .hero__title-highlight { background-image: linear-gradient(transparent 38%, var(--pastel-yellow) 38%, var(--pastel-yellow) 92%, transparent 92%); } h2 .hl { background-image: linear-gradient(transparent 38%, var(--pastel-yellow) 38%, var(--pastel-yellow) 92%, transparent 92%); } /* Hero : panneau dégradé turquoise, texte blanc, photo intégrée */ .hero-split { background: linear-gradient(120deg, var(--teal-2) 0%, var(--teal-1) 100%); border-radius: var(--r-xl); padding: 2rem 1.6rem; box-shadow: var(--shadow); } .hero-split > div:first-child { padding: 0.5rem 0.3rem; } .hero-split .hero-eway__title { color: #FFFFFF; } .hero-split .hero-eway__title .hl { color: #CDF5FA; background-image: none; padding: 0; } .hero-split .hero-eway__lead { color: rgba(255, 255, 255, 0.92); } /* CTA inversés sur le dégradé */ .hero-split .btn--primary { background: #FFFFFF; color: var(--teal-2); } .hero-split .btn--primary .btn__arrow { background: var(--teal-2); color: #FFFFFF; } .hero-split .btn--ghost { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.65); } .hero-split__photo { border-radius: var(--r-lg); box-shadow: 0 14px 35px -14px rgba(0,0,0,0.45); } .hero-split__badge { background: #FFFFFF; color: var(--teal-2); transform: rotate(-3deg); } .hero-split__badge::before { color: var(--accent); } /* Cartes hero : blanches, droites, pastille teal clair */ .hero-card--rose, .hero-card--lilas, .hero-card--lime, .hero-card--orange { transform: none; } .hero-card { background: var(--surface); box-shadow: var(--shadow-soft); border: 1px solid var(--border); } .hero-card__dot { background: var(--surface-2); } [data-theme="dark"] .hero-card__dot { background: #14424D; } .hero-card__dot img, .hero-card__dot svg { filter: none; } /* Tout est droit (style clinique) */ .expertise-card:nth-child(odd), .expertise-card:nth-child(even), .value:nth-child(odd), .value:nth-child(even), .stat:nth-child(1), .stat:nth-child(2), .stat:nth-child(3), .pills-cloud .pill:nth-child(odd), .pills-cloud .pill:nth-child(even), .expertise-detail:nth-child(odd), .expertise-detail:nth-child(even), .portrait__polaroid, .project-sidebar, .project-hero__visual, .hero-split__media, .contact-home, .contact-info, .marquee { transform: none; } .hero-card:hover, .expertise-card:hover, .value:hover, .stat:hover { transform: translateY(-5px); } /* Pas d'éléments manuscrits ni d'émojis ni de décor griffonné */ .doodle, .hand-note, .page-header__cards { display: none !important; } .page-header::before, .page-header::after, .project-hero .container::before, .hero-eway::before, .hero-cards::before { content: none; } /* Cartes expertises / valeurs : blanches, ombre douce */ .expertise-card, .value { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-soft); } .expertise-card__icon, .value__number { background: var(--surface-2); } .value__number { color: var(--teal-2); } .portrait__photo, .portrait__polaroid { border-radius: var(--r-md); } .portrait__sticker { background: var(--accent); color: #fff; transform: rotate(0); } /* Chips et étiquettes : teal très clair, sans bordure */ .floating-pill, .page-header__breadcrumb, .pill, .project-card__category, .news-card__meta, .project-hero__meta span, .expertise-detail__tag, .timeline__year { background: var(--surface-2); border: none; color: var(--text); } .pills-cloud .pill:nth-child(4n+1), .pills-cloud .pill:nth-child(4n+2), .pills-cloud .pill:nth-child(4n+3), .pills-cloud .pill:nth-child(4n+4) { background: var(--surface-2); } .pill::before { color: var(--accent); opacity: 1; } /* Bandeau défilant + stats + contact + footer : teal profond / dégradé */ .marquee { background: linear-gradient(100deg, var(--teal-2), var(--teal-1)); } .marquee__item { color: #FFFFFF; font-weight: 800; } .marquee__item::after { color: rgba(255, 255, 255, 0.75); } .stat:nth-child(1), .stat:nth-child(2), .stat:nth-child(3) { background: linear-gradient(135deg, var(--teal-2), var(--teal-1)); } .stat__number { color: #FFFFFF; } .stat__label { color: #FFFFFF; opacity: 0.9; } .contact-home, .contact-info { background: linear-gradient(120deg, var(--teal-2), var(--teal-1)); } .contact-home .btn--primary { background: #FFFFFF; color: var(--teal-2); } .contact-home .btn--primary .btn__arrow { background: var(--teal-2); color: #FFFFFF; } .site-footer { background: var(--black-card); } .site-footer__title::before { color: var(--accent-soft); } .logo-footer__dot { background: var(--accent-soft); } /* Navbar : blanche, page active en turquoise */ .site-header__inner { background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--border); } .nav-link:hover { background: var(--surface-2); } .nav-link--active { background: var(--accent); color: #fff; } .nav-link--active:hover { background: var(--accent); color: #fff; } .tool-btn, .lang-toggle { border: 1px solid var(--border); } .lang-toggle button.is-active { background: var(--accent); color: #fff; } /* CTA : turquoise, texte blanc */ .btn--primary { color: #FFFFFF; } .btn--primary:hover { color: #FFFFFF; } .btn--primary .btn__arrow { background: #FFFFFF; color: var(--accent); } /* Statuts du formulaire */ .form__status--ok { background: var(--surface); border: 1.5px solid var(--accent); color: var(--text); } .form__status--err { background: var(--surface); border: 1.5px solid var(--ink); color: var(--text); } /* ========================================================================= 25 bis. CARTE INTERACTIVE DES PROJETS (Leaflet) ========================================================================= */ .map-section { padding: 0 0 3rem; } .map-shell { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); } #projects-map { width: 100%; height: min(540px, 70vh); background: var(--surface-2); z-index: 1; } /* Boutons de vue (France / Réunion / Monde) */ .map-views { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 1.1rem 0 1.4rem; } .map-view-btn { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-family: inherit; font-size: 0.82rem; font-weight: 700; padding: 0.45rem 1.1rem; border-radius: var(--r-pill); cursor: pointer; transition: all var(--transition); } .map-view-btn:hover { background: var(--surface-2); } .map-view-btn--active { background: var(--accent); border-color: var(--accent); color: #fff; } /* Popups Leaflet aux couleurs du site */ .leaflet-popup-content-wrapper { border-radius: var(--r-md); font-family: 'Manrope', sans-serif; box-shadow: var(--shadow); } .leaflet-popup-content { margin: 0.9rem 1rem; font-size: 0.85rem; line-height: 1.5; } .leaflet-popup-content strong { display: block; font-size: 0.92rem; margin-bottom: 0.15rem; color: #14333E; } .leaflet-popup-content .map-pop-meta { color: #66838C; display: block; margin-bottom: 0.4rem; } .leaflet-popup-content a { color: #0FA3B6; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================= 26. ACCUEIL+ — carte vitrine façon "Médico", compteurs, micro-interactions ========================================================================= */ /* --- Section carte de l'accueil : faits à gauche, carte à droite --- */ .map-feature__grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: stretch; } .map-feature__facts { display: flex; flex-direction: column; gap: 0.9rem; justify-content: center; } .map-fact { display: flex; align-items: center; gap: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.95rem 1.2rem; box-shadow: var(--shadow-soft); } .map-fact__num { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--accent); min-width: 64px; text-align: center; background: var(--surface-2); border-radius: var(--r-sm); padding: 0.35rem 0.5rem; } .map-fact__label { font-weight: 700; font-size: 0.92rem; color: var(--text); } .map-feature__cta { margin-top: 0.4rem; } /* La carte de l'accueil : un peu moins haute */ .map-feature .map-shell #projects-map { height: min(440px, 60vh); } /* --- Points pulsants sur la carte (style "Médico") --- */ .map-pin { background: transparent; border: none; } .map-pin__dot { display: block; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); border: 2.5px solid #FFFFFF; box-shadow: 0 2px 8px rgba(7, 137, 162, 0.45); transition: transform 0.2s ease; animation: pin-pulse 2.4s ease-out infinite; } .map-pin:hover .map-pin__dot { transform: scale(1.35); animation-play-state: paused; } @keyframes pin-pulse { 0% { box-shadow: 0 0 0 0 rgba(15, 163, 182, 0.45); } 70% { box-shadow: 0 0 0 14px rgba(15, 163, 182, 0); } 100% { box-shadow: 0 0 0 0 rgba(15, 163, 182, 0); } } @media (prefers-reduced-motion: reduce) { .map-pin__dot { animation: none; } } /* --- Micro-interactions --- */ .marquee:hover .marquee__track, .partners__track-wrapper:hover .partners__track { animation-play-state: paused; } .hero-split__photo { transition: transform 0.5s ease; } .hero-split__media:hover .hero-split__photo { transform: scale(1.025); } @media (min-width: 768px) { .map-feature__grid { grid-template-columns: 0.85fr 1.4fr; gap: 2rem; } } /* ========================================================================= 27. RESPONSIVE RENFORCÉ ========================================================================= */ /* Le burger couvre aussi les tablettes (768-991px) : la barre complète (6 liens + outils + CTA) ne tient pas sur ces largeurs */ @media (min-width: 768px) and (max-width: 991.98px) { .nav-toggle { display: flex; } .main-nav { display: none; position: absolute; top: calc(100% + 0.6rem); left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 1rem; gap: 0.6rem; margin-left: 0; } .main-nav--open { display: flex; } .nav-list { flex-direction: column; } .nav-link { display: block; } .nav-cta { justify-content: center; } .nav-tools { justify-content: center; padding-top: 0.6rem; border-top: 1px solid var(--border); } .search-wrap { position: static; } .search-box { position: static; width: 100%; margin-top: 0.5rem; box-shadow: none; } /* Hero en une colonne pour respirer sur tablette */ .hero-split { grid-template-columns: 1fr; } } /* Footer : colonnes sur desktop (au lieu d'une pile) */ @media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; } .site-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; } } /* Petits écrans : galeries des fiches en 1 colonne (prime sur le style inline), panneaux moins rembourrés, carte moins haute */ @media (max-width: 599.98px) { .project-content__main .projects-grid[style] { grid-template-columns: 1fr !important; } .hero-split { padding: 1.4rem 1.1rem; } .contact-home { padding: 2rem 1.3rem; } .contact-info { padding: 1.6rem 1.2rem; } #projects-map { height: 380px; } .map-feature .map-shell #projects-map { height: 360px; } .map-views { justify-content: center !important; } .project-sidebar { position: static; } } /* Très petits écrans : cartes hero en pleine largeur */ @media (max-width: 419.98px) { .hero-card { width: 100%; } } /* ========================================================================= 28. CARTES PROJETS "OVERLAY" — image plein cadre, titre sur dégradé, résumé révélé au survol. Les visuels pictos (SVG) posent sur un panneau dégradé teal pour rester élégants. ========================================================================= */ .project-card { position: relative; padding: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--black-card); } /* L'image remplit la carte */ .project-card__media { aspect-ratio: 4 / 3.4; border-radius: 0; transition: transform 0.5s ease; } .project-card:hover .project-card__media { transform: scale(1.05); } /* Dégradé sombre porteur du texte */ .project-card__media::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(3, 36, 46, 0.92) 0%, rgba(3, 36, 46, 0.55) 38%, rgba(3, 36, 46, 0.05) 68%, transparent 100%); pointer-events: none; } /* Visuels pictos (fichiers .svg) : picto centré sur panneau teal profond */ .project-card__media[style*=".svg"] { background-size: 36% !important; background-repeat: no-repeat; background-position: center 36%; background-color: var(--teal-2); } /* Texte par-dessus l'image */ .project-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.05rem 1.2rem 1.1rem; z-index: 2; gap: 0.2rem; } .project-card__title { color: #FFFFFF; font-size: 1.08rem; line-height: 1.25; } .project-card__client { color: var(--accent-soft); font-size: 0.78rem; } /* Résumé : caché, révélé au survol */ .project-card__body p { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.35s ease, opacity 0.35s ease; color: rgba(255, 255, 255, 0.85) !important; } .project-card:hover .project-card__body p, .project-card:focus-visible .project-card__body p { max-height: 6.5em; opacity: 1; } /* Le lien souligné disparaît : toute la carte est cliquable, la pastille flèche suffit comme signal */ .project-card__cta { display: none; } /* Pastille flèche : posée sur l'image, lisible */ .project-card__media::after { z-index: 3; } /* Badge catégorie : net sur l'image */ .project-card__category { z-index: 3; background: rgba(255, 255, 255, 0.92); color: #14333E; } /* Cartes "à la une" : image large */ @media (min-width: 768px) { .container:has(.projects-filter) .projects-grid .project-card:first-child .project-card__media { aspect-ratio: 16 / 7.5; } } /* Au clavier : même confort qu'à la souris */ .project-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } /* Fin du design system MOUVinnov (thème Médico teal). */