193 lines
12 KiB
CSS
193 lines
12 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "shadcn/tailwind.css";
|
|
@import "@fontsource-variable/geist";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
--font-heading: var(--font-sans);
|
|
--font-sans: 'Geist Variable', system-ui, sans-serif;
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-5: var(--chart-5);
|
|
--radius-sm: calc(var(--radius) * .6);
|
|
--radius-md: calc(var(--radius) * .8);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) * 1.4);
|
|
--radius-2xl: calc(var(--radius) * 1.8);
|
|
--radius-3xl: calc(var(--radius) * 2.2);
|
|
--radius-4xl: calc(var(--radius) * 2.6);
|
|
}
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
--background: #f8f9f4;
|
|
--foreground: #1f3b33;
|
|
--card: #fffefa;
|
|
--card-foreground: #1f3b33;
|
|
--popover: #fffefa;
|
|
--popover-foreground: #1f3b33;
|
|
--primary: #326d58;
|
|
--primary-foreground: #fffefa;
|
|
--secondary: #eef3e8;
|
|
--secondary-foreground: #285646;
|
|
--muted: #eef2eb;
|
|
--muted-foreground: #68776e;
|
|
--accent: #e4efe5;
|
|
--accent-foreground: #24503d;
|
|
--destructive: #c83e3e;
|
|
--border: #dce6da;
|
|
--input: #dce6da;
|
|
--ring: #7ca98f;
|
|
--radius: .85rem;
|
|
--sidebar: #fbfcf8;
|
|
--sidebar-foreground: #315447;
|
|
--sidebar-primary: #326d58;
|
|
--sidebar-primary-foreground: #fff;
|
|
--sidebar-accent: #e6f0e7;
|
|
--sidebar-accent-foreground: #27553f;
|
|
--sidebar-border: #e0eadf;
|
|
--sidebar-ring: #74a58e;
|
|
--chart-1: #326d58;
|
|
--chart-2: #dba28a;
|
|
--chart-3: #89a8d2;
|
|
--chart-4: #a99ac7;
|
|
--chart-5: #b1cb88;
|
|
}
|
|
|
|
.dark {
|
|
color-scheme: dark;
|
|
--background: #131f1a;
|
|
--foreground: #eff6ee;
|
|
--card: #1e2d26;
|
|
--card-foreground: #eff6ee;
|
|
--popover: #1e2d26;
|
|
--popover-foreground: #eff6ee;
|
|
--primary: #95cbb0;
|
|
--primary-foreground: #143b2b;
|
|
--secondary: #2a3b30;
|
|
--secondary-foreground: #e6f1e7;
|
|
--muted: #2a3b30;
|
|
--muted-foreground: #b3c3b8;
|
|
--accent: #2a4938;
|
|
--accent-foreground: #eaf7ed;
|
|
--destructive: #fc8484;
|
|
--border: #395043;
|
|
--input: #395043;
|
|
--ring: #8cbda3;
|
|
--sidebar: #1a2922;
|
|
--sidebar-foreground: #eaf4e9;
|
|
--sidebar-primary: #95cbb0;
|
|
--sidebar-primary-foreground: #143b2b;
|
|
--sidebar-accent: #304637;
|
|
--sidebar-accent-foreground: #eaf4e9;
|
|
--sidebar-border: #33473b;
|
|
--sidebar-ring: #8cbda3;
|
|
}
|
|
|
|
@layer base {
|
|
* { @apply border-border outline-ring/50; }
|
|
html { @apply font-sans; }
|
|
body { @apply bg-background text-foreground; min-width: 320px; }
|
|
button, a { -webkit-tap-highlight-color: transparent; }
|
|
a { text-underline-offset: 3px; }
|
|
::selection { background: #bedaca; color: #17362a; }
|
|
}
|
|
|
|
.site-container { width: min(100% - 72px, 1240px); margin-inline: auto; }
|
|
.site-scroller { scrollbar-width: thin; scrollbar-color: #b7cfc0 transparent; }
|
|
.site-footer { border-top: 1px solid var(--border); background: var(--card); }
|
|
.site-footer a:hover { color: var(--primary); }
|
|
.hero-section { background: radial-gradient(circle at 75% 37%, #e4f1e0 0%, #f1f6ed 37%, var(--background) 73%); border-bottom: 1px solid var(--border); }
|
|
.dark .hero-section { background: radial-gradient(circle at 75% 37%, #244733 0%, #1a3025 34%, var(--background) 75%); }
|
|
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--primary); font-size: 11px; letter-spacing: .19em; text-transform: uppercase; font-weight: 750; }
|
|
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #dfaf89; box-shadow: 0 0 0 4px #f8e8d9; }
|
|
.hero-title { font-size: clamp(3.15rem, 5.4vw, 5.65rem); line-height: 1.075; letter-spacing: -.065em; font-weight: 730; }
|
|
.display-title { font-size: clamp(2.35rem, 4.3vw, 4.45rem); line-height: 1.11; letter-spacing: -.055em; font-weight: 730; margin-top: 17px; max-width: 950px; }
|
|
.section-title { font-size: clamp(1.85rem, 3vw, 2.85rem); line-height: 1.18; letter-spacing: -.047em; font-weight: 705; }
|
|
.page-lead { color: var(--muted-foreground); font-size: clamp(1rem, 1.35vw, 1.13rem); line-height: 1.8; max-width: 780px; }
|
|
.page-shell { padding-top: 35px; padding-bottom: 25px; }
|
|
.page-heading { padding-top: 33px; }
|
|
.page-heading .page-lead { margin-top: 20px; }
|
|
.site-section { padding-block: clamp(60px, 6vw, 100px); }
|
|
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: 12px; color: var(--muted-foreground); }
|
|
.breadcrumbs a:hover { color: var(--primary); }
|
|
.breadcrumbs span[aria-current] { color: var(--foreground); font-weight: 600; }
|
|
.hero-image-wrap { position: relative; max-width: 550px; width: 100%; margin-inline: auto; }
|
|
.science-art { position: relative; width: 100%; aspect-ratio: 1/1; color: #456c61; }
|
|
.science-art--compact { max-width: 425px; margin: auto; }
|
|
.science-art-glow { position: absolute; inset: 14%; border-radius: 50%; background: #d3e7d2; filter: blur(45px); opacity: .55; }
|
|
.science-art svg { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 14px 20px #30574312); }
|
|
.science-art-label { position: absolute; bottom: 7%; left: 12%; background: #fffdf7ed; border: 1px solid #d9e5da; border-radius: 99px; padding: 10px 13px; font-size: 11px; font-weight: 600; color: #315949; box-shadow: 0 12px 25px #40684a12; white-space: nowrap; }
|
|
.hero-float-card { position: absolute; right: -2%; top: 11%; display: flex; gap: 12px; align-items: center; background: #fffefa; border: 1px solid #deeadc; padding: 14px 18px; border-radius: 19px; box-shadow: 0 12px 35px #234b3e16; color: #25433a; }
|
|
.logo-mark { display: grid; place-items: center; background: var(--primary); color: var(--primary-foreground); border-radius: 12px; }
|
|
.subject-card { display: flex; flex-direction: column; min-height: 275px; border: 1px solid var(--border); background: var(--card); border-radius: 21px; padding: 24px; transition: transform .2s, border-color .2s, box-shadow .2s; }
|
|
.subject-card:hover, .resource-card:hover { transform: translateY(-3px); border-color: #93b6a0; box-shadow: 0 15px 30px #204b3510; }
|
|
.subject-icon, .resource-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 17px; color: var(--primary); background: #e8f3e7; margin-bottom: 22px; }
|
|
.subject-peach .subject-icon { background: #fbe9df; color: #a66b56; }
|
|
.subject-lavender .subject-icon { background: #f0eaf8; color: #806b9e; }
|
|
.subject-sky .subject-icon { background: #e7f0f9; color: #567fa3; }
|
|
.dark .subject-icon, .dark .resource-icon { background: var(--accent); color: var(--primary); }
|
|
.feature-panel { border-radius: 26px; background: var(--secondary); padding: 31px; border: 1px solid var(--border); }
|
|
.feature-panel-accent { background: var(--accent); }
|
|
.step-card { background: var(--card); border: 1px solid var(--border); border-radius: 23px; padding: 27px; }
|
|
.resource-card { display: flex; flex-direction: column; min-height: 225px; background: var(--card); padding: 24px; border-radius: 21px; border: 1px solid var(--border); transition: transform .2s, border-color .2s, box-shadow .2s; }
|
|
.resource-card .resource-icon { margin-bottom: 0; width: 44px; height: 44px; border-radius: 13px; }
|
|
.info-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; padding: 10px 13px; background: var(--card); border: 1px solid var(--border); border-radius: 99px; color: var(--foreground); }
|
|
.cta-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 32px; border-radius: 27px; padding: clamp(27px, 4vw, 50px); background: #285744; color: #f8fff8; position: relative; overflow: hidden; }
|
|
.cta-banner:after { content: ''; position: absolute; right: -95px; bottom: -125px; width: 320px; height: 320px; border: 1px solid #ffffff22; border-radius: 50%; pointer-events: none; }
|
|
.cta-banner > * { position: relative; z-index: 1; }
|
|
.cta-banner [data-slot=badge] { background: #ffffff24; color: white; }
|
|
.contact-line { display: flex; align-items: center; gap: 14px; padding-block: 13px; border-bottom: 1px solid var(--border); font-size: 14px; }
|
|
.contact-line:hover { color: var(--primary); }
|
|
.legal-content h2 { margin-top: 31px; font-weight: 650; font-size: 20px; }
|
|
.legal-content p { margin-top: 12px; line-height: 1.8; color: var(--muted-foreground); }
|
|
.legal-content a { color: var(--primary); text-decoration: underline; }
|
|
[data-slot=sidebar-menu-button][data-active=true] { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
|
|
[data-slot=sidebar-menu-button] { transition: background .16s, color .16s; }
|
|
@media (max-width: 1100px) { .hero-title { font-size: clamp(3rem, 5.4vw, 4.8rem); } }
|
|
@media (max-width: 768px) { .site-container { width: min(100% - 36px, 1240px); } .site-scroller { height: calc(100svh - 60px); } .page-shell { padding-top: 22px; } .hero-image-wrap { max-width: 410px; } .hero-float-card { right: 2%; } .subject-card { min-height: 230px; } .page-heading { padding-top: 24px; } .hero-title { font-size: clamp(3.15rem, 9vw, 4.2rem); } }
|
|
@media (max-width: 380px) { .hero-title { font-size: 2.65rem; } .hero-float-card { transform: scale(.85); transform-origin: right top; } }
|
|
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }
|
|
|
|
/* Contrôles d'édition affichés uniquement après authentification. */
|
|
.cms-editable { position: relative; display: inline; outline: 1px dashed transparent; border-radius: 4px; transition: outline-color .15s; }
|
|
.cms-editable:hover { outline-color: var(--primary); }
|
|
.cms-edit-button { display: inline-flex; vertical-align: middle; align-items: center; justify-content: center; width: 23px; height: 23px; margin-left: 5px; border: 1px solid var(--primary); border-radius: 7px; color: var(--primary); background: var(--background); cursor: pointer; line-height: 1; }
|
|
.cms-edit-button:hover { background: var(--accent); }
|
|
.cms-edit-image { outline: 2px dashed var(--primary); outline-offset: 3px; border-radius: 16px; }
|
|
.cms-image-button { position: absolute; top: 10px; right: 10px; z-index: 10; box-shadow: 0 3px 15px #0002; }
|
|
.cms-toolbar { position: fixed; top: 14px; right: 16px; z-index: 45; display: flex; align-items: center; gap: 7px; border-radius: 12px; background: var(--primary); padding: 8px; box-shadow: 0 6px 30px #0002; }
|
|
@media (max-width: 768px) { .cms-toolbar { top: 68px; right: 9px; padding: 5px; } .cms-toolbar button { font-size: 11px; } }
|
|
|
|
.cms-link-button { position:absolute; top:-10px; right:-10px; z-index:10; display:grid; place-items:center; width:23px; height:23px; border:1px solid var(--primary); border-radius:8px; color:var(--primary); background:var(--background); box-shadow:0 2px 8px #0002; cursor:pointer; }
|