isracool/JooL_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

textes revues et traduction

Browse Source
This commit is contained in:
ifaryd
2026-05-20 15:04:03 +00:00
parent 4a5cea4a7f
commit c4e45a888c
77 changed files with 6370 additions and 638 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
static/css/home.css
View File

@@ -190,7 +190,6 @@
.hero-text h1 {
font-family: var(--display);
font-weight: 900;
font-style: italic;
font-size: clamp(2.8rem, 5vw, 4.2rem);
line-height: 1.05;
letter-spacing: -0.03em;
@@ -486,7 +485,6 @@
.section-title {
font-family: var(--display);
font-weight: 900;
font-style: italic;
font-size: clamp(2rem, 3.5vw, 3rem);
line-height: 1.08;
letter-spacing: -0.03em;
@@ -988,6 +986,111 @@
color: #b07a00;
}
/* ══════════════════════════════════════════
SECTION 4 — MON AGRO
══════════════════════════════════════════ */
.s-monagro {
background: var(--white);
}
.tag-accent {
background: rgba(231, 111, 81, .1);
color: #e55c3a;
}
.monagro-visual {
display: flex;
flex-direction: column;
gap: 10px;
}
.ma-mission {
display: flex;
align-items: center;
gap: 14px;
background: var(--gray-2);
border: 1px solid var(--gray);
border-radius: 14px;
padding: 14px 16px;
transition: box-shadow .2s, transform .2s;
}
.ma-mission:hover {
box-shadow: 0 6px 24px rgba(25, 112, 97, .08);
transform: translateX(4px);
}
.ma-mission-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ma-mission-icon .material-icons-round { font-size: 20px; }
.ma-mission-info { flex: 1; min-width: 0; }
.ma-mission-name {
font-weight: 700;
font-size: 14px;
color: var(--black);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ma-mission-sub {
font-size: 12px;
color: #888;
margin-top: 2px;
}
.ma-badge {
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 100px;
white-space: nowrap;
flex-shrink: 0;
}
.ma-summary {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--teal);
border-radius: 14px;
padding: 18px 24px;
margin-top: 4px;
}
.ma-kpi { text-align: center; }
.ma-kpi-val {
font-family: var(--display);
font-weight: 900;
font-size: 1.6rem;
color: var(--white);
letter-spacing: -.04em;
line-height: 1;
}
.ma-kpi-label {
font-size: 12px;
color: rgba(255, 255, 255, .6);
margin-top: 4px;
}
.ma-sep {
width: 1px;
height: 36px;
background: rgba(255, 255, 255, .2);
}
/* ══════════════════════════════════════════
STATS — fond teal plein
══════════════════════════════════════════ */
@@ -1010,7 +1113,6 @@
font-family: var(--display);
font-size: clamp(2rem, 3.5vw, 2.8rem);
font-weight: 900;
font-style: italic;
color: var(--white);
letter-spacing: -.03em;
margin-bottom: 10px;
@@ -1075,7 +1177,6 @@
font-family: var(--display);
font-size: clamp(2rem, 3vw, 2.6rem);
font-weight: 900;
font-style: italic;
text-align: center;
letter-spacing: -.03em;
margin-bottom: 6px;
@@ -1113,7 +1214,7 @@
align-items: center;
gap: 40px;
width: max-content;
animation: marquee 22s linear infinite;
animation: marquee 45s linear infinite;
}
.logos-track:hover {
@@ -1127,7 +1228,7 @@
display: flex;
align-items: center;
justify-content: center;
filter: grayscale(1) opacity(.55);
filter: grayscale(1) opacity(.85);
transition: filter .3s;
}
@@ -1136,10 +1237,9 @@
}
.logo-slide img {
max-width: 140px;
max-height: 70px;
width: auto;
height: auto;
height: 52px;
max-width: 150px;
object-fit: contain;
}
@@ -1155,7 +1255,6 @@
font-family: var(--display);
font-size: clamp(2rem, 3.5vw, 2.8rem);
font-weight: 900;
font-style: italic;
letter-spacing: -.03em;
text-align: center;
margin-bottom: 48px;
@@ -1240,7 +1339,6 @@
font-family: var(--display);
font-size: clamp(1.4rem, 2.5vw, 2rem);
font-weight: 800;
font-style: italic;
line-height: 1.35;
max-width: 680px;
margin: 0 auto 24px;
@@ -1270,7 +1368,6 @@
font-family: var(--display);
font-size: clamp(2rem, 3vw, 2.6rem);
font-weight: 900;
font-style: italic;
letter-spacing: -.03em;
color: var(--white);
text-align: center;
@@ -1370,7 +1467,6 @@
font-family: var(--display);
font-size: clamp(2.4rem, 5vw, 4rem);
font-weight: 900;
font-style: italic;
letter-spacing: -.03em;
color: var(--black);
margin-bottom: 16px;
@@ -1417,6 +1513,44 @@
outline: none;
}
.phone-wrap {
display: flex;
align-items: center;
border: 2px solid var(--gray-3);
border-radius: 100px;
background: var(--white);
overflow: hidden;
transition: border-color .2s;
}
.phone-wrap:focus-within {
border-color: var(--teal);
}
.phone-select {
font-family: var(--body);
font-size: 14px;
padding: 14px 8px 14px 18px;
border: none;
outline: none;
background: transparent;
cursor: pointer;
flex-shrink: 0;
color: var(--black);
}
.phone-wrap .phone-number {
border: none;
border-radius: 0;
padding-left: 8px;
flex: 1;
min-width: 0;
}
.phone-wrap .phone-number:focus {
border-color: transparent;
}
.cta-textarea {
border-radius: 18px;
resize: vertical;
@@ -1750,4 +1884,52 @@
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
}
/* ══════════════════════════════════════════
LANGUAGE SWITCHER
══════════════════════════════════════════ */
.lang-switcher {
display: flex;
align-items: center;
gap: 2px;
margin-left: 16px;
}
.lang-btn {
background: none;
border: 1px solid rgba(255,255,255,0);
color: var(--black);
font-family: var(--body);
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
padding: 3px 8px;
border-radius: 4px;
cursor: pointer;
transition: color .2s, border-color .2s, background .2s;
opacity: .55;
}
.lang-btn:hover {
opacity: 1;
border-color: currentColor;
}
.lang-btn.lang-active {
opacity: 1;
border-color: var(--teal);
color: var(--teal);
cursor: default;
}
/* Switcher sur fond sombre (sections dark) */
.s-monitor .lang-btn,
.s-cta-final .lang-btn {
color: #fff;
}
@media (max-width: 768px) {
.lang-switcher {
margin-left: 0;
}
}