/* ===================================================================== INTRA — Méthode VIBRACTION® | Feuille de style de marque Complète Bootstrap 5.3 (chargé via CDN dans le ) ===================================================================== */ /* ------------------------------------------------------------------ Polices - Limelight : logo INTRA (Google Fonts, licence OFL identique au TTF fourni) - Sacramento : titres script « Navigation / Contact » (équivalent Moon Time) - Poppins : corps de texte & titres Pour utiliser TES fichiers exacts, décommente le bloc @font-face plus bas et dépose les .ttf dans assets/fonts/. ------------------------------------------------------------------ */ /* @font-face { font-family: "Limelight Local"; src: url("../assets/fonts/Limelight-Regular.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Moon Time"; src: url("../assets/fonts/moon-time-regular.ttf") format("truetype"); font-display: swap; } */ /* ------------------------------------------------------------------ Jetons de design (couleurs, tailles) ------------------------------------------------------------------ */ :root { --cream: #FBF3E6; /* fond général */ --cream-header: #FCF5EA; /* fond header/footer */ --cream-deep: #F7EAD6; /* bandeau, séparateurs */ --terracotta: #D2694B; /* boutons principaux */ --terracotta-dark: #BC583C; /* survol boutons */ --coral: #F0785C; /* pastilles réseaux, accents vifs */ --coral-soft: #F4A08A; --gold: #C99A5B; /* logo INTRA (face) */ --gold-light: #E6C88C; /* logo (reflet haut) */ --gold-shadow: #A67C3D; /* logo (ombre portée) */ --brown: #3E2A1C; /* titres foncés / logo sub */ --brown-soft: #5B4636; /* texte courant */ --brown-mute: #8A7461; /* texte discret */ --script: #E07555; /* titres manuscrits corail */ --radius-pill: 999px; --radius-lg: 28px; --radius-md: 18px; --shadow-soft: 0 18px 40px -22px rgba(62, 42, 28, .35); --shadow-card: 0 22px 50px -30px rgba(62, 42, 28, .45); --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --font-logo: "Limelight Local", "Limelight", var(--font-body); --font-script: "Moon Time", "Sacramento", cursive; } /* ------------------------------------------------------------------ Base ------------------------------------------------------------------ */ * { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--brown-soft); background: var(--cream); line-height: 1.65; font-weight: 400; overflow-x: hidden; } h1, h2, h3, h4, h5 { font-family: var(--font-body); color: var(--brown); font-weight: 700; letter-spacing: -0.01em; line-height: 2.15; } .welcome-txt h1, .cta-text h2{ line-height: 1.15; } p { margin-bottom: 1rem; } a { color: var(--terracotta); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--terracotta-dark); } ::selection { background: var(--coral-soft); color: #fff; } .section { padding: clamp(3.5rem, 8vw, 7rem) 0; } .section-sm { padding: clamp(2.5rem, 5vw, 4rem) 0; } .eyebrow { font-family: var(--font-script); color: var(--script); font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1; margin-bottom: .35rem; } .lead-brown { color: var(--brown-soft); } .text-terra { color: var(--terracotta) !important; } .bg-cream { background: var(--cream) !important; } .bg-cream-deep { background: var(--cream-deep) !important; } /* Accessibilité : focus visible */ a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .form-control:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------------ Logo INTRA (effet Art déco en relief) ------------------------------------------------------------------ */ .logo-intra { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; } .logo-intra:hover { color: inherit; } .logo-intra .logo-word { font-family: var(--font-logo); color: var(--gold); letter-spacing: .04em; line-height: .9; text-shadow: 1px 1px 0 var(--gold-shadow), 2px 2px 0 var(--gold-shadow), 3px 3px 0 var(--gold-shadow), 4px 4px 0 var(--gold-shadow), 5px 6px 10px rgba(90, 60, 25, .35); } .logo-intra .logo-sub { font-family: var(--font-body); color: var(--brown); font-weight: 700; text-transform: none; letter-spacing: .06em; margin-top: .55em; } .logo-intra .logo-sub strong { letter-spacing: .12em; } /* tailles selon contexte */ .logo-header .logo-word { font-size: clamp(2rem, 4vw, 2.6rem); } .logo-header .logo-sub { font-size: .72rem; } .logo-footer .logo-word { font-size: clamp(2.4rem, 5vw, 3.2rem); } .logo-footer .logo-sub { font-size: .8rem; } /* ------------------------------------------------------------------ Boutons ------------------------------------------------------------------ */ .btn { font-weight: 600; border-radius: var(--radius-pill); transition: all .22s ease; } .btn-terra { background: var(--terracotta); color: #fff; padding: .8rem 2rem; box-shadow: 0 12px 22px -12px rgba(210, 105, 75, .8); } .btn-terra:hover, .btn-terra:focus { background: var(--terracotta-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 26px -12px rgba(188, 88, 60, .85); } .btn-terra.btn-lg { padding: 1rem 2.6rem; font-size: 1.05rem; } .btn-outline-terra { border: 2px solid var(--terracotta); color: var(--terracotta); background: transparent; padding: .72rem 1.9rem; } .btn-outline-terra:hover, .btn-outline-terra:focus { background: var(--terracotta); color: #fff; transform: translateY(-2px); } /* ------------------------------------------------------------------ HEADER ------------------------------------------------------------------ */ .site-header { background: var(--cream-header); position: sticky; top: 0; z-index: 1030; } .site-header .navbar { padding-top: 1rem; padding-bottom: 1rem; } .main-nav .nav-link { color: var(--brown); font-weight: 600; font-size: 1rem; margin: 0 .55rem; position: relative; padding: .4rem .2rem; } .main-nav .nav-link::after { content: ""; position: absolute; left: .2rem; right: .2rem; bottom: -2px; height: 2px; background: var(--terracotta); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .main-nav .nav-link:hover::after, .main-nav .nav-link.active::after { transform: scaleX(1); } .main-nav .nav-link.active { color: var(--terracotta); } /* burger + bouton calendrier (mobile) */ .nav-toggle { border: 0; background: transparent; width: 46px; height: 40px; display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; cursor: pointer; } .nav-toggle span { display: block; height: 3px; width: 30px; background: var(--brown); border-radius: 2px; margin-left: auto; transition: all .25s ease; } .nav-toggle span:nth-child(2) { width: 30px; } .btn-cal { width: 52px; height: 52px; border-radius: 50%; background: var(--terracotta); color: #fff; display: inline-flex; align-items: center; justify-content: center; border: 0; box-shadow: 0 12px 22px -12px rgba(210, 105, 75, .9); transition: all .22s ease; } .btn-cal:hover { background: var(--terracotta-dark); color:#fff; transform: translateY(-2px); } .btn-cal svg { width: 24px; height: 24px; } /* Menu mobile (offcanvas) */ .offcanvas.intra-menu { background: var(--cream-header); } .offcanvas.intra-menu .offcanvas-header { padding: 1.25rem 1.5rem; } .intra-menu .nav-link { color: var(--brown); font-weight: 600; font-size: 1.2rem; padding: .75rem 0; border-bottom: 1px solid var(--cream-deep); } .intra-menu .nav-link.active { color: var(--terracotta); } .btn-close-intra { border: 0; background: transparent; font-size: 1.8rem; color: var(--brown); line-height: 1; cursor: pointer; } /* ------------------------------------------------------------------ HERO (haut de page d'accueil) ------------------------------------------------------------------ */ .page-hero { position: relative; padding: clamp(3rem, 7vw, 6rem) 0; } .page-hero h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); margin-bottom: 1.1rem; } .page-hero .subtitle { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--terracotta); max-width: 34ch; } .hero-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 4 / 5; background: linear-gradient(135deg, #c8cfcf 0%, #e9d9c2 60%, #d9b98f 100%); } .hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* En-tête de page interne */ .page-head { padding: clamp(2.5rem, 6vw, 4.5rem) 0 1rem; text-align: center; } .page-head h1 { font-size: clamp(2rem, 5vw, 3.2rem); } .page-head .eyebrow { display:block; } /* ------------------------------------------------------------------ Cartes & éléments de contenu ------------------------------------------------------------------ */ .feature-card { background: #fff; border-radius: var(--radius-md); padding: 2rem 1.8rem; height: 100%; box-shadow: var(--shadow-soft); border: 1px solid rgba(201,154,91,.12); transition: transform .25s ease, box-shadow .25s ease; } .feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); } .feature-ico { width: 58px; height: 58px; border-radius: 16px; background: linear-gradient(135deg, var(--coral), var(--terracotta)); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; } .feature-ico svg { width: 28px; height: 28px; } .feature-card h3 { font-size: 1.25rem; margin-bottom: .5rem; } /* étapes numérotées */ .step { display: flex; gap: 1.2rem; align-items: flex-start; margin-bottom: 1.6rem; } .step-num { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; background: var(--cream-deep); color: var(--terracotta); font-family: var(--font-logo); font-size: 1.5rem; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--coral-soft); } .step h3 { font-size: 1.2rem; margin-bottom: .25rem; } /* liste avec puce ronde */ .check-list { list-style: none; padding: 0; margin: 0; } .check-list li { position: relative; padding-left: 2rem; margin-bottom: .85rem; } .check-list li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(240,120,92,.18); } /* bloc portrait / à propos */ .about-portrait { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 3 / 4; background: linear-gradient(135deg, #e9d9c2, #d9b98f); } .about-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } /* citation / témoignage */ .quote { background: #fff; border-left: 5px solid var(--coral); border-radius: var(--radius-md); padding: 2rem 2.2rem; box-shadow: var(--shadow-soft); font-size: 1.15rem; color: var(--brown-soft); } .quote cite { display:block; margin-top: 1rem; font-style: normal; font-weight: 600; color: var(--terracotta); } /* tarifs */ .price-card { text-align: center; } .price-card .price { font-family: var(--font-logo); color: var(--terracotta); font-size: 2.6rem; line-height: 1; margin: .4rem 0 1rem; } .price-card.featured { border: 2px solid var(--terracotta); position: relative; } .price-card.featured::before { content: "Le plus choisi"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--terracotta); color:#fff; font-size:.75rem; font-weight:600; padding: .3rem 1rem; border-radius: var(--radius-pill); } /* ------------------------------------------------------------------ Bandeau CTA pré-footer (« Vous sentez que quelque chose… ») ------------------------------------------------------------------ */ .cta-band { position: relative; background: var(--cream); overflow: hidden; } .cta-band .cta-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 420px; } .cta-band .cta-text { padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem); max-width: 640px; margin-left: auto; } .cta-band .cta-text h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin-bottom: 1rem; } .cta-band .cta-text p { color: var(--terracotta); font-size: 1.2rem; max-width: 30ch; } .cta-band .cta-media { position: relative; height: 100%; min-height: 420px; background: linear-gradient(90deg, var(--cream) 0%, rgba(251,243,230,0) 22%), linear-gradient(135deg, #c8cfcf 0%, #e9d9c2 55%, #d9b98f 100%); } .cta-band .cta-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); } @media (max-width: 767.98px) { .cta-band .cta-inner { grid-template-columns: 1fr; } .cta-band .cta-text { order: 2; margin: 0; padding: 2rem 1.25rem 2.5rem; } .cta-band .cta-media { order: 1; min-height: 300px; } .cta-band .cta-media img { -webkit-mask-image: none; mask-image: none; } } /* ------------------------------------------------------------------ FOOTER ------------------------------------------------------------------ */ .site-footer { background: var(--cream-header); padding-top: clamp(3rem, 6vw, 4.5rem); } .footer-script { font-family: var(--font-script); color: var(--script); font-size: 2.4rem; line-height: 1; margin-bottom: 1.2rem; } .footer-nav { list-style: none; padding: 0; margin: 0; } .footer-nav li { margin-bottom: .75rem; } .footer-nav a { color: var(--brown); font-weight: 500; } .footer-nav a:hover { color: var(--terracotta); padding-left: 4px; transition: all .2s ease; } .footer-contact { list-style: none; padding: 0; margin: 0; } .footer-contact li { min-width: 0; flex-wrap: wrap; } .footer-contact a { word-break: break-word; overflow-wrap: anywhere; } .footer-contact a:hover { color: var(--terracotta); } .footer-contact .ico { color: var(--terracotta); width: 26px; height: 26px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; } .footer-contact .ico svg { width: 22px; height: 22px; } .socials { display: flex; gap: .9rem; } .socials a { width: 48px; height: 48px; border-radius: 50%; background: var(--coral); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: transform .2s ease, background .2s ease; } .socials a:hover { background: var(--terracotta); transform: translateY(-3px); color:#fff; } .socials svg { width: 22px; height: 22px; } .footer-bottom { border-top: 1px solid var(--cream-deep); margin-top: 2.5rem; padding: 1.5rem 0; } .footer-bottom a { color: var(--brown); text-decoration: underline; font-weight: 500; } .footer-bottom a:hover { color: var(--terracotta); } .footer-bottom .sep { color: var(--coral-soft); margin: 0 .35rem; } .footer-bottom .copyright { color: var(--brown-soft); } /* ------------------------------------------------------------------ Formulaire de contact ------------------------------------------------------------------ */ .form-control, .form-select { border-radius: 14px; border: 1.5px solid rgba(201,154,91,.35); padding: .8rem 1rem; background: #fff; color: var(--brown); } .form-control:focus, .form-select:focus { border-color: var(--terracotta); box-shadow: 0 0 0 .2rem rgba(210,105,75,.15); } .form-label { font-weight: 600; color: var(--brown); } /* Calendly */ .calendly-wrap { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); min-height: 700px; background: #fff; } .calendly-placeholder { min-height: 500px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: 3rem 1.5rem; background: #fff; border: 2px dashed var(--coral-soft); border-radius: var(--radius-lg); } /* ------------------------------------------------------------------ Petites animations d'apparition ------------------------------------------------------------------ */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; } .reveal.is-visible { opacity: 1; transform: none; }