/* ============================================================================
sokimo-overrides.css
----------------------------------------------------------------------------
Override layer applied on top of normalize.css + webflow.css + sokimo.webflow.css.
Charge ce fichier EN DERNIER dans le pour qu'il gagne sur toutes les
variables et règles du template Arvora. Aucune modification directe du CSS
exporté Webflow — ce fichier survit aux re-exports.
============================================================================ */
/* ------------------------------------------------------------------
1. Palette SOKIMO institutionnelle (override des variables Arvora)
------------------------------------------------------------------ */
:root {
/* Couleurs marque */
--sokimo--bone-canvas: #FAF7F2; /* Background institutionnel */
--sokimo--surface: #FFFFFF; /* Cards / élévation */
--sokimo--charcoal-ink: #0F1419; /* Texte primaire (off-black) */
--sokimo--slate-steel: #5C6470; /* Texte secondaire / metadata */
--sokimo--navy: #272759; /* Brand navy (logo wordmark) */
--sokimo--navy-deepest: #1A1F3D; /* Hover sur surfaces navy */
--sokimo--gold: #C8941F; /* Accent éditorial UNIQUE */
--sokimo--gold-hover: #B07F18; /* Hover gold */
--sokimo--brand-yellow: #FAC71B; /* RÉSERVÉ logomark seul */
--sokimo--whisper-border: rgba(15, 20, 25, 0.08);
--sokimo--pure-surface: #FFFFFF; /* Alias surface pure (dropdown menus) */
--sokimo--alert-red: #A12C2C; /* Erreurs formulaire */
/* Override palette Arvora → SOKIMO */
--white--100: var(--sokimo--surface);
--white--200: var(--sokimo--bone-canvas);
--white--300: #ECEAE5;
--white--400: #E5E2DB;
--dark--100: var(--sokimo--charcoal-ink);
--dark--200: rgba(15, 20, 25, 0.12);
--gray--100: var(--sokimo--slate-steel);
--gray--200: var(--sokimo--slate-steel);
--gray--300: #C8C8C8;
--gray--400: rgba(92, 100, 112, 0.10);
--gray--500: rgba(92, 100, 112, 0.45);
--gray--600: #D5D5D5;
/* Override fonts Arvora (Instrument Sans + Manrope) → SOKIMO */
--_font-family---body-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--_font-family---heading-font: "Playfair Display", "Times New Roman", serif;
--sokimo--font-mono: "JetBrains Mono", "Geist Mono", "SF Mono", Menlo, monospace;
/* Resserrer le tracking des grosses tailles, comme dans le brief PDF */
--_typography---h1--letter-spacing: -2.4px;
--_typography---h2--letter-spacing: -1.5px;
--_typography---h3--letter-spacing: -1.0px;
--_typography---h4--letter-spacing: -0.8px;
/* Sharp institutional radii (le template Arvora est très arrondi — on resserre) */
--_sizes---radius--radius-100: 4px;
--_sizes---radius--radius-20: 8px;
--_sizes---radius--radius-16: 8px;
--_sizes---radius--radius-12: 6px;
--_sizes---radius--radius-10: 6px;
--_sizes---radius--radius-8: 4px;
--_sizes---radius--radius-0: 0px;
}
/* ------------------------------------------------------------------
2. Body / surface racine
------------------------------------------------------------------ */
body,
.body,
.page-wrap {
background-color: var(--sokimo--bone-canvas);
color: var(--sokimo--charcoal-ink);
font-family: var(--_font-family---body-font);
font-feature-settings: "ss01", "cv11"; /* Geist stylistic alternates */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection {
background: var(--sokimo--gold);
color: var(--sokimo--charcoal-ink);
}
/* ------------------------------------------------------------------
3. Typographie — Playfair Display sur les headlines
------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.heading-one, .heading-two, .heading-three,
.heading-four, .heading-five, .heading-six,
.section-title, .hero-title, .about-title {
font-family: var(--_font-family---heading-font);
color: var(--sokimo--charcoal-ink);
font-weight: 500;
font-style: normal;
}
p, li, td, th, label, input, textarea, select, button {
font-family: var(--_font-family---body-font);
color: var(--sokimo--charcoal-ink);
}
p, li {
color: var(--sokimo--slate-steel);
}
/* Eyebrow institutionnel — réutilisable comme classe utilitaire */
.sokimo-eyebrow {
font-family: var(--sokimo--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sokimo--slate-steel);
}
/* Section index numbers (style PDF synthèse page 10) */
.sokimo-index-number {
font-family: var(--_font-family---heading-font);
font-size: 64px;
font-weight: 100;
line-height: 1;
color: var(--sokimo--slate-steel);
letter-spacing: -0.03em;
}
/* Mono utilitaire — chiffres financiers, dates, RCCM, references */
.sokimo-mono {
font-family: var(--sokimo--font-mono);
font-feature-settings: "tnum";
letter-spacing: 0;
}
/* ------------------------------------------------------------------
4. Boutons primaire / secondaire / tertiaire SOKIMO
------------------------------------------------------------------ */
.btn-primary,
.button-primary,
.cta-primary,
a.button.is-primary,
.w-button.is-primary {
background-color: var(--sokimo--gold) !important;
color: var(--sokimo--charcoal-ink) !important;
border: none !important;
border-radius: 4px !important;
padding: 14px 28px !important;
font-weight: 600;
letter-spacing: 0;
transition: transform 120ms ease-out, background-color 200ms ease-out;
box-shadow: none !important;
}
.btn-primary:hover,
.button-primary:hover,
.cta-primary:hover,
a.button.is-primary:hover,
.w-button.is-primary:hover {
background-color: var(--sokimo--gold-hover) !important;
}
.btn-primary:active,
.button-primary:active,
.cta-primary:active,
a.button.is-primary:active {
transform: translateY(-1px);
}
.btn-secondary,
.button-secondary {
background-color: transparent !important;
color: var(--sokimo--charcoal-ink) !important;
border: 1px solid var(--sokimo--charcoal-ink) !important;
border-radius: 4px !important;
padding: 13px 27px !important;
font-weight: 500;
transition: background-color 200ms ease-out;
}
.btn-secondary:hover,
.button-secondary:hover {
background-color: var(--sokimo--bone-canvas) !important;
}
/* ------------------------------------------------------------------
5. Cards — corners resserrés, shadow sur hover seulement
------------------------------------------------------------------ */
.card,
.solution-item,
.portfolio-item,
.blog-item,
.service-item,
.team-item {
border-radius: 8px !important;
border: 1px solid var(--sokimo--whisper-border) !important;
background: var(--sokimo--surface);
transition: transform 200ms ease-out, box-shadow 200ms ease-out;
box-shadow: none !important;
}
.card:hover,
.solution-item:hover,
.portfolio-item:hover,
.blog-item:hover,
.service-item:hover,
.team-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(15, 20, 25, 0.06) !important;
}
/* ------------------------------------------------------------------
6. Liens — underline gold sur hover
------------------------------------------------------------------ */
a {
color: var(--sokimo--charcoal-ink);
text-decoration: none;
transition: color 180ms ease-out;
}
a:hover {
color: var(--sokimo--gold);
}
/* Tertiary link — gold underline animé */
.sokimo-link-tertiary {
position: relative;
color: var(--sokimo--charcoal-ink);
font-weight: 500;
display: inline-block;
}
.sokimo-link-tertiary::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background-color: var(--sokimo--gold);
transform: scaleX(0);
transform-origin: left center;
transition: transform 220ms ease-out;
}
.sokimo-link-tertiary:hover::after {
transform: scaleX(1);
}
/* ------------------------------------------------------------------
7. Navigation — institutional sticky bar (Variance 6, Density 4)
------------------------------------------------------------------ */
.header-area,
.header-area-two,
.nav-area {
background-color: rgba(250, 247, 242, 0.92) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--sokimo--whisper-border);
box-shadow: none !important;
}
/* Wrapper — proper distribution between logo / nav / right-side */
.header-wrap,
.header-wrap-two {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 24px !important;
flex-wrap: nowrap !important;
}
/* Logo — clamp width so it never bloats the bar */
.nav-logo,
.nav-logo-md,
.nav-logo-two,
.nav-logo-wrap img {
max-height: 44px !important;
max-width: 200px !important;
width: auto !important;
height: auto !important;
}
/* Par défaut (desktop) : logo couleur visible, logo blanc caché */
.nav-logo-md {
display: none;
}
.nav-logo {
display: inline-block;
}
/* Nav UL — single-line, tight institutional gap */
.nav {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 28px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.nav-item {
flex-shrink: 0 !important;
white-space: nowrap !important;
}
/* Nav links — institutional sans, controlled scale */
.nav-link,
.nav-link-two,
.dropdown-link {
color: var(--sokimo--charcoal-ink) !important;
font-family: var(--_font-family---body-font);
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
line-height: 1 !important;
position: relative !important;
padding: 8px 0 !important;
display: inline-block !important;
white-space: nowrap !important;
text-decoration: none !important;
transition: color 180ms ease-out;
}
.nav-link::after,
.nav-link-two::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 2px;
height: 2px;
background-color: var(--sokimo--gold);
transform: scaleX(0);
transform-origin: left center;
transition: transform 220ms ease-out;
}
.nav-link:hover,
.nav-link-two:hover {
color: var(--sokimo--charcoal-ink) !important;
}
.nav-link:hover::after,
.nav-link-two:hover::after {
transform: scaleX(1);
}
/* Active state — full-width gold underline, prominent */
.nav-link.w--current,
.nav-link-two.w--current,
.nav-link.is-active,
.offcanvas-nav-link.w--current {
color: var(--sokimo--charcoal-ink) !important;
}
.nav-link.w--current::after,
.nav-link-two.w--current::after,
.nav-link.is-active::after {
transform: scaleX(1) !important;
}
/* Right side — replace redundant "Nous contacter" with FR/EN switcher */
.nav-right {
display: flex !important;
align-items: center !important;
gap: 16px !important;
flex-shrink: 0 !important;
}
/* Hide the redundant "Nous contacter" CTA button (Contact is already in nav) */
.btn-nav .btn-secondary,
.header-wrap .btn-nav,
.header-wrap-two .btn-nav {
display: none !important;
}
/* Inline FR/EN language switcher — Mono, 12px, tracked */
.sokimo-lang-switcher {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
font-family: var(--sokimo--font-mono) !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
color: var(--sokimo--slate-steel) !important;
text-transform: uppercase !important;
}
.sokimo-lang-switcher a {
color: var(--sokimo--slate-steel) !important;
padding: 6px 8px !important;
border-radius: 4px !important;
transition: color 180ms, background-color 180ms;
}
.sokimo-lang-switcher a.is-active,
.sokimo-lang-switcher a[aria-current="page"] {
color: var(--sokimo--charcoal-ink) !important;
background-color: rgba(15, 20, 25, 0.04);
}
.sokimo-lang-switcher .sep {
color: var(--sokimo--whisper-border);
font-weight: 300;
margin: 0 2px;
}
/* =============================================================
Sélecteur de langue — desktop (top-right) + mobile (bas du
offcanvas burger). Drapeaux SVG inline construits par
js/sokimo-i18n.js. Sharp 2-3px radius (institutional DNA).
============================================================= */
.lang-switch {
position: relative;
display: inline-flex;
align-items: center;
font-family: var(--sokimo--font-mono);
}
.lang-switch__current {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 10px 7px 8px;
background: transparent;
border: 1px solid var(--sokimo--whisper-border);
border-radius: 4px;
color: var(--sokimo--charcoal-ink);
font-family: var(--sokimo--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: border-color 180ms ease-out, background-color 180ms ease-out, color 180ms ease-out;
}
.lang-switch__current:hover,
.lang-switch__current:focus-visible,
.lang-switch.is-open .lang-switch__current {
border-color: var(--sokimo--gold);
background-color: rgba(200, 148, 31, 0.06);
outline: none;
}
.lang-switch__flag {
display: inline-block;
width: 22px;
height: 14px;
border-radius: 2px;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 0 0 1px rgba(15, 20, 25, 0.06) inset;
}
.lang-switch__flag svg { display: block; width: 100%; height: 100%; }
.lang-switch__code { line-height: 1; }
.lang-switch__chev {
display: inline-flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
color: var(--sokimo--slate-steel);
transition: transform 200ms ease-out, color 200ms ease-out;
}
.lang-switch.is-open .lang-switch__chev {
transform: rotate(180deg);
color: var(--sokimo--gold);
}
.lang-switch__chev svg { display: block; width: 100%; height: 100%; }
.lang-switch__menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 180px;
margin: 0;
padding: 6px;
list-style: none;
background: var(--sokimo--pure-surface, #FFFFFF);
border: 1px solid var(--sokimo--whisper-border);
border-radius: 6px;
box-shadow: 0 12px 40px -12px rgba(15, 20, 25, 0.18), 0 2px 8px -2px rgba(15, 20, 25, 0.06);
z-index: 1100;
}
.lang-switch__menu[hidden] { display: none; }
.lang-switch__menu li { list-style: none; margin: 0; padding: 0; }
.lang-switch__option {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
background: transparent;
border: 0;
border-radius: 4px;
color: var(--sokimo--charcoal-ink);
font-family: var(--sokimo--font-body, inherit);
font-size: 14px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background-color 160ms ease-out, color 160ms ease-out;
}
.lang-switch__option:hover,
.lang-switch__option:focus-visible {
background-color: rgba(200, 148, 31, 0.08);
color: var(--sokimo--gold);
outline: none;
}
.lang-switch__option.is-active {
background-color: rgba(200, 148, 31, 0.12);
color: var(--sokimo--gold);
}
.lang-switch__opt-flag {
display: inline-block;
width: 24px;
height: 16px;
border-radius: 2px;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 0 0 1px rgba(15, 20, 25, 0.08) inset;
}
.lang-switch__opt-flag svg { display: block; width: 100%; height: 100%; }
.lang-switch__opt-label { line-height: 1.2; }
/* Sur mobile / tablette, le sélecteur desktop est masqué — on utilise
.offcanvas-lang dans le drawer burger. */
@media (max-width: 1100px) {
.lang-switch { display: none !important; }
}
/* =============================================================
Sélecteur de langue MOBILE — au bas du drawer offcanvas burger.
Rangée des 5 drapeaux SVG, label "Langue" au-dessus.
margin-top:auto pour le coller en bas du flex-column wrap.
============================================================= */
.offcanvas-lang {
margin-top: auto;
padding-top: 24px;
border-top: 1px solid rgba(250, 247, 242, 0.12);
display: flex;
flex-direction: column;
gap: 14px;
flex-shrink: 0;
}
.offcanvas-lang__label {
font-family: var(--sokimo--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(250, 247, 242, 0.55);
}
.offcanvas-lang__row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.offcanvas-lang__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 32px;
padding: 0;
background: transparent;
border: 1px solid rgba(250, 247, 242, 0.18);
border-radius: 4px;
cursor: pointer;
overflow: hidden;
transition: border-color 180ms ease-out, transform 180ms ease-out, box-shadow 180ms ease-out;
}
.offcanvas-lang__btn svg {
display: block;
width: 100%;
height: 100%;
}
.offcanvas-lang__btn:hover,
.offcanvas-lang__btn:focus-visible {
border-color: var(--sokimo--gold);
outline: none;
transform: translateY(-1px);
}
.offcanvas-lang__btn.is-active {
border-color: var(--sokimo--gold);
box-shadow: 0 0 0 2px rgba(200, 148, 31, 0.30), 0 4px 12px -4px rgba(200, 148, 31, 0.50);
}
.offcanvas-lang__btn.is-active::after {
content: "";
position: absolute;
}
@media (prefers-reduced-motion: reduce) {
.lang-switch__current,
.lang-switch__chev,
.lang-switch__option,
.offcanvas-lang__btn {
transition: none !important;
}
.offcanvas-lang__btn:hover { transform: none; }
}
.offcanvas-icon {
display: none !important;
cursor: pointer;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
border-radius: 6px;
border: 1px solid rgba(250, 247, 242, 0.18);
background: transparent;
transition: background-color 200ms ease-out, border-color 200ms ease-out;
}
.offcanvas-icon .menu-icon {
display: none !important; /* On remplace l'image par un burger CSS pour contrôle couleur */
}
.offcanvas-icon::before {
content: "";
width: 22px;
height: 14px;
background-image:
linear-gradient(currentColor, currentColor),
linear-gradient(currentColor, currentColor),
linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 22px 1.5px;
background-position: left top, left center, left bottom;
}
/* Tablet & below: collapse nav, show hamburger, header navy + logo blanc */
@media (max-width: 1100px) {
.nav { display: none !important; }
.offcanvas-icon { display: inline-flex !important; }
.sokimo-lang-switcher { display: none !important; }
/* Header navy institutionnel sur mobile/tablette — identité forte */
.header-area,
.header-area-two,
.nav-area {
background-color: var(--sokimo--navy) !important;
border-bottom: 1px solid rgba(200, 148, 31, 0.25) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Bascule logo : version couleur cachée, version blanche visible.
Le wrapper reste visible. */
.nav-logo {
display: none !important;
}
.nav-logo-md {
display: inline-block !important;
max-height: 44px !important;
width: auto !important;
}
/* Le wrapper reste flex container (pour aligner img blanc) */
.nav-logo-two {
display: inline-flex !important;
align-items: center !important;
}
/* Burger blanc + bordure or subtile */
.offcanvas-icon {
color: var(--sokimo--bone-canvas);
border-color: rgba(250, 247, 242, 0.20);
}
.offcanvas-icon:hover,
.offcanvas-icon:active {
background-color: rgba(200, 148, 31, 0.12);
border-color: var(--sokimo--gold);
}
/* Padding header un peu plus serré sur mobile */
.header-wrap,
.header-wrap-two {
padding-top: 14px !important;
padding-bottom: 14px !important;
}
}
/* Offcanvas mobile menu — institutional dark drawer (cohérent avec header navy mobile) */
/* Drawer fixed overlay : caché par défaut, visible avec .is-open (toggle JS) */
.offcanvas-main {
background-color: var(--sokimo--navy) !important;
position: fixed !important;
inset: 0 !important;
z-index: 9999 !important;
display: block !important; /* ne pas display:none — utilisé pour transition */
opacity: 0;
visibility: hidden;
pointer-events: none;
overflow-y: auto !important;
overflow-x: hidden !important;
transition: opacity 280ms ease-out, visibility 280ms ease-out;
-webkit-overflow-scrolling: touch;
}
.offcanvas-main.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Body scroll lock quand le drawer est ouvert */
body.sokimo-no-scroll {
overflow: hidden !important;
}
/* Wrap = flex column qui occupe toute la hauteur du drawer */
.offcanvas-wrap {
background-color: var(--sokimo--navy) !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
width: 100% !important;
min-height: 100vh !important;
padding: 24px 24px 32px !important;
box-sizing: border-box !important;
gap: 32px !important;
}
/* Top bar : logo gauche, close icon droite, alignés horizontalement */
.offcanvas-top {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
padding: 0 0 20px 0 !important;
margin: 0 !important;
border-bottom: 1px solid rgba(250, 247, 242, 0.12) !important;
flex-shrink: 0 !important;
position: relative !important;
}
.offcanvas-logo-wrap {
display: inline-flex !important;
align-items: center !important;
flex-shrink: 0 !important;
}
.offcanvas-logo {
display: block !important;
max-height: 44px !important;
width: auto !important;
filter: brightness(0) invert(1); /* logo navy → blanc */
}
.close-icon {
display: block !important;
width: 24px;
height: 24px;
filter: brightness(0) invert(1);
cursor: pointer;
flex-shrink: 0 !important;
}
/* Liste — sous le top bar, clairement séparée */
.offcanvas-nav {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
}
.offcanvas-nav-item {
display: block !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Liens — bone-canvas (presque blanc), gros, lisibles */
.offcanvas-nav-link {
display: block !important;
width: 100% !important;
font-family: var(--_font-family---heading-font) !important;
font-size: clamp(1.5rem, 5vw, 2.25rem) !important;
font-weight: 500 !important;
letter-spacing: -0.02em !important;
line-height: 1.2 !important;
color: var(--sokimo--bone-canvas) !important;
padding: 16px 0 !important;
border-bottom: 1px solid rgba(250, 247, 242, 0.10) !important;
text-decoration: none !important;
transition: color 200ms ease-out, padding-left 220ms ease-out;
}
.offcanvas-nav-link:hover,
.offcanvas-nav-link:active,
.offcanvas-nav-link:focus {
color: var(--sokimo--gold) !important;
padding-left: 12px !important;
}
.offcanvas-nav-link.w--current {
color: var(--sokimo--gold) !important;
}
/* Pas de préfixe sur la page courante — le gold suffit */
.offcanvas-nav-link.w--current::before {
content: none !important;
display: none !important;
}
/* ------------------------------------------------------------------
8. Inputs / Forms
------------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
.w-input,
.w-select {
background-color: var(--sokimo--bone-canvas) !important;
border: 1px solid var(--sokimo--whisper-border) !important;
border-radius: 4px !important;
color: var(--sokimo--charcoal-ink) !important;
padding: 12px 16px !important;
font-family: var(--_font-family---body-font);
font-size: 16px;
transition: border-color 180ms, box-shadow 180ms;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
.w-input:focus {
border-color: var(--sokimo--gold) !important;
box-shadow: 0 0 0 3px rgba(200, 148, 31, 0.20) !important;
outline: none;
}
label,
.field-label {
font-family: var(--sokimo--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sokimo--slate-steel);
}
/* ------------------------------------------------------------------
9. Footer — SOKIMO Navy
------------------------------------------------------------------ */
.footer-area,
.footer-section,
footer {
background-color: var(--sokimo--navy) !important;
color: var(--sokimo--bone-canvas) !important;
}
.footer-area *,
.footer-section *,
footer * {
color: var(--sokimo--bone-canvas) !important;
}
.footer-area a:hover,
footer a:hover {
color: var(--sokimo--gold) !important;
}
/* Divider gold avant copyright */
.footer-bottom,
.footer-copyright {
border-top: 1px solid var(--sokimo--gold) !important;
padding-top: 24px !important;
margin-top: 32px !important;
}
/* Retire le menu du footer (doublon avec la nav header) — desktop + mobile */
.footer-nav {
display: none !important;
}
/* Et son widget conteneur, pour ne pas laisser une colonne vide dans la grille footer */
.footer-widget:has(.footer-nav) {
display: none !important;
}
/* ------------------------------------------------------------------
10. Counters — Mono pour les chiffres clés
Neutralise le rolling-counter Webflow (digit-par-digit) :
on aplatit les
pour afficher le nombre entier "200K" / "150M".
------------------------------------------------------------------ */
.counter-number,
.stats-number {
font-family: var(--_font-family---heading-font) !important;
font-feature-settings: "tnum";
font-weight: 500 !important;
letter-spacing: -0.025em !important;
color: var(--sokimo--charcoal-ink) !important;
line-height: 1 !important;
/* Reset transform Webflow inline (translate3d animé) */
transform: none !important;
display: inline-block !important;
white-space: nowrap !important;
}
/* Aplatit les
internes — affiche "200k" au lieu d'un digit isolé */
.counter-number br,
.stats-number br {
display: none !important;
}
/* Conteneur : pas de clipping, pas de hauteur fixe imposée par Webflow */
.counter-inner {
overflow: visible !important;
height: auto !important;
}
/* Variant white (compteur 150M sur fond vidéo) */
.counter-number.w-variant-15d9edb8-9dd2-755b-c89f-54c722ca2bea {
color: #FFFFFF !important;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
/* Reveal — fade-up subtil avant que le count-up démarre.
L'attribut data-sokimo-counted est posé par sokimo.js au moment du tick. */
.counter-number {
opacity: 0;
transform: translateY(12px);
transition: opacity 480ms ease-out, transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.counter-number[data-sokimo-counted] {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.counter-number {
opacity: 1;
transform: none;
transition: none;
}
}
.counter-label,
.stats-label {
font-family: var(--_font-family---body-font);
color: var(--sokimo--slate-steel) !important;
font-size: 13px;
}
/* ------------------------------------------------------------------
11. ITIE / Institutional badge
------------------------------------------------------------------ */
.sokimo-badge-itie {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--sokimo--surface);
border: 1px solid var(--sokimo--gold);
color: var(--sokimo--gold);
font-family: var(--sokimo--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 100px;
animation: sokimoITIEPulse 3s ease-in-out infinite;
}
@keyframes sokimoITIEPulse {
0%, 100% { border-color: var(--sokimo--gold); }
50% { border-color: rgba(200, 148, 31, 0.6); }
}
/* ------------------------------------------------------------------
12. Editorial dividers + index numbers (8-rubrique grid pattern)
------------------------------------------------------------------ */
.sokimo-editorial-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.sokimo-editorial-grid > * {
border-top: 1px solid var(--sokimo--whisper-border);
padding: 32px 24px;
position: relative;
}
.sokimo-editorial-grid > *:hover .sokimo-editorial-title::after {
transform: scaleX(1);
}
.sokimo-editorial-title {
font-family: var(--_font-family---heading-font);
font-size: 28px;
font-weight: 600;
position: relative;
display: inline-block;
}
.sokimo-editorial-title::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
height: 1px;
width: 100%;
background: var(--sokimo--gold);
transform: scaleX(0);
transform-origin: left center;
transition: transform 200ms ease-out;
}
@media (max-width: 991px) {
.sokimo-editorial-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.sokimo-editorial-grid { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------------
13. Reduced motion — respect total
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.sokimo-badge-itie { animation: none !important; }
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
/* ------------------------------------------------------------------
14. About-area DG portrait — large editorial format
------------------------------------------------------------------ */
/* Force the DG portrait to take the full column with editorial proportions */
.about-area .about-wrap {
display: grid !important;
grid-template-columns: minmax(360px, 0.85fr) 1.15fr !important;
gap: clamp(2rem, 5vw, 5rem) !important;
align-items: start !important;
}
.about-area .about-left {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 24px !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
grid-auto-columns: auto !important;
position: sticky !important;
top: 120px !important;
z-index: 1;
}
.about-area .about-left .story-img-wrap {
display: block !important;
position: relative !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border-radius: 12px !important;
background: var(--sokimo--bone-canvas);
}
.about-area .about-left .story-img-wrap > img,
.about-area .about-left .story-img,
.about-area .story-img {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 5 !important;
object-fit: cover !important;
object-position: center 22% !important;
border-radius: 12px !important;
border: 1px solid var(--sokimo--whisper-border) !important;
margin: 0 !important;
filter: none !important;
transform: none !important;
}
.about-area .about-left > .section-content {
margin-top: 24px !important;
padding: 0 !important;
font-family: var(--_font-family---body-font);
color: var(--sokimo--charcoal-ink) !important;
line-height: 1.5;
}
.about-area .about-left > .section-content strong {
font-family: var(--_font-family---heading-font);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.01em;
display: block;
margin-bottom: 6px;
}
.about-area .about-left > .section-content .sokimo-mono {
display: block;
color: var(--sokimo--slate-steel) !important;
}
@media (max-width: 991px) {
.about-area .about-wrap {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
.about-area .about-left {
position: relative !important;
top: 0 !important;
max-width: 480px;
margin: 0 auto !important;
}
}
/* ------------------------------------------------------------------
15. Process section — fix sticky overlap bug
------------------------------------------------------------------ */
.process-area .process-sticky {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: clamp(2rem, 5vw, 5rem) !important;
position: sticky !important;
top: 100px !important;
z-index: 1;
background-color: transparent !important;
padding-bottom: 32px !important;
}
.process-area .process-sticky-left,
.process-area .process-sticky-right {
position: relative !important;
max-width: 100% !important;
overflow-wrap: break-word;
}
.process-area .process-right {
position: relative;
z-index: 2;
margin-top: clamp(2rem, 6vw, 4rem);
display: grid;
gap: clamp(2rem, 5vw, 5rem);
}
.process-area .process-item {
background: var(--sokimo--surface);
border-radius: 12px;
border: 1px solid var(--sokimo--whisper-border);
overflow: hidden;
box-shadow: 0 8px 24px -12px rgba(15, 20, 25, 0.10);
}
.process-area .process-img-wrap {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.process-area .process-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 991px) {
.process-area .process-sticky {
grid-template-columns: 1fr !important;
position: relative !important;
top: 0 !important;
}
}
/* ------------------------------------------------------------------
16. Sokimo Sectors — sticky stacked editorial cards (RentLux DNA)
------------------------------------------------------------------ */
.sokimo-sectors {
background: var(--sokimo--bone-canvas);
padding-block: clamp(4rem, 10vw, 8rem);
position: relative;
}
.sokimo-sectors__container {
max-width: 1320px;
margin: 0 auto;
padding-inline: clamp(1.5rem, 4vw, 4rem);
}
.sokimo-sectors__intro {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(2rem, 5vw, 6rem);
align-items: end;
margin-bottom: clamp(3rem, 6vw, 5rem);
}
.sokimo-sectors__intro-left {
max-width: none;
}
.sokimo-sectors__intro-right p {
color: var(--sokimo--slate-steel);
font-size: 17px;
line-height: 1.55;
max-width: 46ch;
}
.sokimo-sectors__intro h2 {
font-family: var(--_font-family---heading-font);
font-size: clamp(2.5rem, 4.5vw, 3.75rem) !important;
font-weight: 500 !important;
letter-spacing: -0.025em !important;
line-height: 1.0 !important;
color: var(--sokimo--charcoal-ink) !important;
margin: 14px 0 0 !important;
max-width: 22ch;
}
.sokimo-sectors__stack {
display: block; /* flex → block : position:sticky dans flex a des bugs sur certains mobiles */
}
.sokimo-sector-card {
margin-bottom: 24px; /* remplace gap: 24px du flex */
}
.sokimo-sector-card:last-child {
margin-bottom: 0;
}
.sokimo-sector-card {
position: sticky;
top: 96px;
display: grid;
grid-template-columns: 1.2fr 1fr;
min-height: clamp(520px, 80vh, 720px);
background: var(--sokimo--surface);
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--sokimo--whisper-border);
box-shadow: 0 24px 60px -24px rgba(15, 20, 25, 0.18);
transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Each card progressively higher offset to peek at the previous card edge */
.sokimo-sector-card:nth-child(1) { top: 96px; }
.sokimo-sector-card:nth-child(2) { top: 112px; }
.sokimo-sector-card:nth-child(3) { top: 128px; }
.sokimo-sector-card:nth-child(4) { top: 144px; }
.sokimo-sector-card:nth-child(5) { top: 160px; }
.sokimo-sector-card:nth-child(6) { top: 176px; }
.sokimo-sector-card:nth-child(7) { top: 192px; }
.sokimo-sector-card__image {
position: relative;
overflow: hidden;
background: var(--sokimo--charcoal-ink);
}
.sokimo-sector-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sokimo-sector-card:hover .sokimo-sector-card__image img {
transform: scale(1.04);
}
/* Subtle dark gradient overlay for legibility of the index number on image */
.sokimo-sector-card__image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(15, 20, 25, 0.18) 0%, rgba(15, 20, 25, 0) 50%);
pointer-events: none;
}
.sokimo-sector-card__index {
position: absolute;
top: 32px;
left: 32px;
font-family: var(--_font-family---heading-font);
font-size: clamp(56px, 6vw, 84px);
font-weight: 200;
color: rgba(250, 247, 242, 0.92);
line-height: 1;
letter-spacing: -0.04em;
text-shadow: 0 2px 16px rgba(15, 20, 25, 0.30);
z-index: 2;
}
.sokimo-sector-card__content {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: clamp(2rem, 4vw, 3.5rem);
background: var(--sokimo--surface);
}
.sokimo-sector-card__eyebrow {
font-family: var(--sokimo--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sokimo--gold);
}
.sokimo-sector-card__title {
font-family: var(--_font-family---heading-font);
font-size: clamp(2.25rem, 3.5vw, 3.25rem);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.05;
color: var(--sokimo--charcoal-ink);
margin: 16px 0 24px;
}
.sokimo-sector-card__description {
font-family: var(--_font-family---body-font);
font-size: 16px;
line-height: 1.65;
color: var(--sokimo--slate-steel);
max-width: 38ch;
margin: 0 0 32px;
}
.sokimo-sector-card__cta {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--_font-family---body-font);
font-size: 14px;
font-weight: 500;
color: var(--sokimo--charcoal-ink);
text-decoration: none;
padding: 14px 24px;
border: 1px solid var(--sokimo--charcoal-ink);
border-radius: 4px;
align-self: flex-start;
transition: background-color 220ms ease-out, color 220ms ease-out;
}
.sokimo-sector-card__cta:hover {
background-color: var(--sokimo--charcoal-ink);
color: var(--sokimo--bone-canvas) !important;
}
.sokimo-sector-card__cta-arrow {
width: 14px;
height: 14px;
display: inline-block;
transition: transform 220ms ease-out;
}
.sokimo-sector-card__cta:hover .sokimo-sector-card__cta-arrow {
transform: translateX(4px);
}
/* Bottom utility bar — sector-specific stat */
.sokimo-sector-card__stats {
display: flex;
gap: 32px;
padding-top: 24px;
border-top: 1px solid var(--sokimo--whisper-border);
margin-top: 24px;
}
.sokimo-sector-card__stat {
display: flex;
flex-direction: column;
gap: 4px;
}
.sokimo-sector-card__stat-value {
font-family: var(--sokimo--font-mono);
font-size: 22px;
font-weight: 600;
color: var(--sokimo--charcoal-ink);
letter-spacing: -0.01em;
}
.sokimo-sector-card__stat-label {
font-family: var(--sokimo--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sokimo--slate-steel);
}
/* ===== Mobile sticky stack — animation préservée ===== */
@media (max-width: 991px) {
.sokimo-sectors__intro {
grid-template-columns: 1fr;
gap: 24px;
align-items: start;
}
.sokimo-sectors__stack {
gap: 16px;
}
/* Sticky animation kept — image en haut, contenu dessous */
.sokimo-sector-card {
grid-template-columns: 1fr;
grid-template-rows: clamp(220px, 38vh, 320px) auto;
min-height: auto;
border-radius: 14px;
box-shadow: 0 18px 40px -20px rgba(15, 20, 25, 0.22);
}
/* Progressive offsets reduced for mobile (~60px → 110px) */
.sokimo-sector-card:nth-child(1) { top: 60px; }
.sokimo-sector-card:nth-child(2) { top: 70px; }
.sokimo-sector-card:nth-child(3) { top: 80px; }
.sokimo-sector-card:nth-child(4) { top: 90px; }
.sokimo-sector-card:nth-child(5) { top: 100px; }
.sokimo-sector-card:nth-child(6) { top: 110px; }
.sokimo-sector-card:nth-child(7) { top: 120px; }
.sokimo-sector-card__index {
top: 20px;
left: 20px;
font-size: clamp(44px, 11vw, 64px);
}
.sokimo-sector-card__content {
padding: 24px 22px 26px;
gap: 20px;
}
.sokimo-sector-card__title {
font-size: clamp(1.75rem, 6.5vw, 2.25rem);
margin: 12px 0 14px;
}
.sokimo-sector-card__description {
font-size: 15px;
margin: 0 0 20px;
}
.sokimo-sector-card__stats {
padding-top: 18px;
margin-top: 18px;
gap: 24px;
flex-wrap: wrap;
}
.sokimo-sector-card__stat-value {
font-size: 18px;
}
.sokimo-sector-card__cta {
padding: 12px 18px;
font-size: 13.5px;
}
}
@media (max-width: 600px) {
.sokimo-sector-card {
grid-template-rows: clamp(200px, 34vh, 280px) auto;
}
.sokimo-sector-card:nth-child(1) { top: 56px; }
.sokimo-sector-card:nth-child(2) { top: 64px; }
.sokimo-sector-card:nth-child(3) { top: 72px; }
.sokimo-sector-card:nth-child(4) { top: 80px; }
.sokimo-sector-card:nth-child(5) { top: 88px; }
.sokimo-sector-card:nth-child(6) { top: 96px; }
.sokimo-sector-card:nth-child(7) { top: 104px; }
}
/* Disable sticky on reduced-motion to avoid scroll jank */
@media (prefers-reduced-motion: reduce) {
.sokimo-sector-card {
position: relative;
top: auto !important;
transition: none;
}
}
/* ------------------------------------------------------------------
16b. Hero & Solution vidéos — bypass positionnement Webflow
Le CSS Webflow applique z-index:-100 et top/left:-100% sur les vidéos
background. On overrides avec un positionnement simple et fiable.
------------------------------------------------------------------ */
.hero-video > video,
.hero-video.w-background-video > video,
.solution-area .solution-video > video,
.solution-area .solution-video.w-background-video > video {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
z-index: 0 !important;
margin: 0 !important;
}
/* ------------------------------------------------------------------
17. Solution-area "Notre Expertise" — institutional glass cards
------------------------------------------------------------------ */
/* text-white safety — guarantee pure white on dark video sections (max contrast) */
.text-white,
.solution-area h1, .solution-area h2, .solution-area h3,
.solution-area .heading-three,
.solution-area .solution-title,
.solution-area .section-content,
.solution-area p {
color: #FFFFFF !important;
}
/* Solution-area dark scrim — slightly cool-navy tint, denser for crisp readability */
.solution-area {
position: relative;
}
.solution-area::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 20, 25, 0.18) 0%, rgba(15, 20, 25, 0.18) 100%);
z-index: 1;
pointer-events: none;
}
.solution-area > .container,
.solution-area > .w-layout-blockcontainer {
position: relative;
z-index: 2;
}
.solution-area .solution-video {
z-index: 0 !important;
}
/* Neutralize Webflow's .section-overlay (was z=99, #000000 @ 58%, blocked clicks) */
.solution-area .section-overlay {
display: none !important;
}
/* ----- Intro block (.solution-top) — single-column editorial flow ----- */
.solution-area .solution-top {
display: block !important;
max-width: 720px !important;
margin: 0 0 96px 0 !important;
grid-template-columns: none !important;
}
.solution-area .solution-top__eyebrow {
display: block !important;
font-family: var(--sokimo--font-mono) !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
text-transform: uppercase !important;
letter-spacing: 0.16em !important;
color: var(--sokimo--gold) !important;
margin: 0 0 24px 0 !important;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.solution-area .solution-top__heading {
font-family: var(--_font-family---heading-font) !important;
font-weight: 500 !important;
font-size: clamp(40px, 5vw, 64px) !important;
line-height: 1.05 !important;
letter-spacing: -0.02em !important;
color: #FFFFFF !important;
max-width: 18ch !important;
margin: 0 0 24px 0 !important;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}
.solution-area .solution-top__lead {
font-family: var(--_font-family---body-font) !important;
font-size: 17px !important;
line-height: 1.6 !important;
color: #FFFFFF !important;
max-width: 60ch !important;
margin: 0 0 40px 0 !important;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5);
}
.solution-area .solution-top__cta {
display: inline-flex !important;
}
/* ----- Cards grid ----- */
.solution-area .solution-wrap {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px !important;
}
.solution-area .solution-card {
background: rgba(250, 247, 242, 0.05) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(250, 247, 242, 0.18) !important;
border-radius: 12px !important;
padding: 32px !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
position: relative;
box-shadow:
inset 0 1px 0 rgba(250, 247, 242, 0.12),
0 24px 48px -24px rgba(0, 0, 0, 0.45);
transition:
transform 220ms ease-out,
background-color 220ms ease-out,
border-color 220ms ease-out,
box-shadow 220ms ease-out;
}
.solution-area .solution-card:hover {
transform: translateY(-4px);
background: rgba(250, 247, 242, 0.08) !important;
border-color: var(--sokimo--gold) !important;
box-shadow:
inset 0 0 0 1px rgba(200, 148, 31, 0.35),
inset 0 1px 0 rgba(250, 247, 242, 0.12),
0 24px 48px -24px rgba(0, 0, 0, 0.4);
}
.solution-area .solution-card__number {
display: block !important;
font-family: var(--sokimo--font-mono) !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
letter-spacing: 0.16em !important;
color: var(--sokimo--gold) !important;
opacity: 0.95;
margin: 0 0 4px 0 !important;
}
.solution-area .solution-icon {
width: 48px !important;
height: 48px !important;
margin: 16px 0 20px 0 !important;
padding: 0 0 20px 0 !important;
border-bottom: 1px solid rgba(250, 247, 242, 0.16) !important;
box-sizing: content-box !important;
filter: brightness(0) invert(1);
}
.solution-area .solution-title {
font-family: var(--_font-family---heading-font) !important;
font-size: 28px !important;
font-weight: 600 !important;
line-height: 1.15 !important;
letter-spacing: -0.015em !important;
margin: 0 0 16px 0 !important;
color: #FFFFFF !important;
}
.solution-area .solution-card .section-content {
font-family: var(--_font-family---body-font) !important;
font-size: 15.5px !important;
line-height: 1.65 !important;
color: #FFFFFF !important;
margin: 0 !important;
}
/* ----- Responsive — slider mode mobile (Savoir-faire) ----- */
@media (max-width: 991px) {
.solution-area .solution-top {
margin-bottom: 48px !important;
}
/* Slider horizontal swipe : full-bleed, scroll-snap, scrollbar masquée */
.solution-area .solution-wrap {
grid-template-columns: none !important;
display: flex !important;
flex-wrap: nowrap !important;
gap: 16px !important;
overflow-x: auto !important;
overflow-y: visible !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
/* Bleed sur les bords du container pour le visuel "peek" */
margin-left: -20px !important;
margin-right: -20px !important;
padding: 8px 20px 24px !important;
scroll-padding-left: 20px !important;
}
.solution-area .solution-wrap::-webkit-scrollbar {
display: none !important;
}
.solution-area .solution-card {
flex: 0 0 82% !important;
min-width: 82%;
max-width: 360px;
scroll-snap-align: start !important;
scroll-snap-stop: always !important;
padding: 28px !important;
}
.solution-area .solution-card.last,
.solution-area .solution-wrap > *:last-child {
margin-right: 8px;
}
/* Désactive le hover translateY sur mobile (pas de hover, scroll uniquement) */
.solution-area .solution-card:hover {
transform: none !important;
}
}
@media (max-width: 767px) {
.solution-area .solution-top__heading {
font-size: clamp(32px, 7vw, 44px) !important;
}
.solution-area .solution-top__lead {
font-size: 16px !important;
margin-bottom: 32px !important;
}
.solution-area .solution-card {
padding: 24px !important;
flex-basis: 86% !important;
min-width: 86%;
}
.solution-area .solution-card__number {
font-size: 12px !important;
}
.solution-area .solution-title {
font-size: 24px !important;
}
.solution-area .solution-card .section-content {
font-size: 15px !important;
}
}
/* Reduced motion : désactive le snap (scroll libre) */
@media (prefers-reduced-motion: reduce) {
.solution-area .solution-wrap {
scroll-snap-type: none !important;
}
}
/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
.solution-area .solution-card {
transition: background-color 220ms ease-out, border-color 220ms ease-out, box-shadow 220ms ease-out;
}
.solution-area .solution-card:hover {
transform: none;
}
}
/* ------------------------------------------------------------------
18. Anti-Arvora — neutralisations spécifiques
------------------------------------------------------------------ */
/* Remove Arvora's eco-green accents partout où ça sortirait des CSS variables */
[style*="background:#7eb500"],
[style*="background:#92c700"],
[style*="color:#7eb500"],
[style*="color:#92c700"] {
background: var(--sokimo--gold) !important;
color: var(--sokimo--charcoal-ink) !important;
}
/* Désactiver les gros radius "softpillow" Arvora sur les sections principales */
section, .container, .section-container {
border-radius: 0 !important;
}
/* ------------------------------------------------------------------
20. À Propos — Hero éditorial restructuré (.sokimo-about-hero)
------------------------------------------------------------------ */
.sokimo-about-hero {
background: var(--sokimo--bone-canvas);
padding: 80px 0 96px;
}
/* — Head — */
.sokimo-about-hero__head {
max-width: 1100px;
margin: 0 0 56px 0;
}
.sokimo-about-hero__title {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(36px, 4.6vw, 60px);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--sokimo--charcoal-ink);
margin: 16px 0 0 0;
max-width: 22ch;
}
/* — Visual panoramique — */
.sokimo-about-hero__visual {
position: relative;
margin: 0 0 64px 0;
border-radius: 8px;
overflow: hidden;
}
.sokimo-about-hero__visual img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16/6;
object-fit: cover;
}
.sokimo-about-hero__visual-caption {
position: absolute;
bottom: 16px;
left: 16px;
font-family: var(--sokimo--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #FFFFFF;
background: rgba(15, 20, 25, 0.65);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 8px 12px;
border-radius: 4px;
}
/* — Body : copy + facts — */
.sokimo-about-hero__body {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 80px;
align-items: start;
margin: 0 0 80px 0;
}
.sokimo-about-hero__copy {
display: flex;
flex-direction: column;
gap: 20px;
}
.sokimo-about-hero__lead {
font-family: var(--_font-family---body-font);
font-size: 19px;
line-height: 1.55;
color: var(--sokimo--charcoal-ink);
margin: 0;
font-weight: 500;
}
.sokimo-about-hero__paragraph {
font-family: var(--_font-family---body-font);
font-size: 16px;
line-height: 1.65;
color: var(--sokimo--slate-steel);
margin: 0;
}
/* Facts grid */
.sokimo-about-hero__facts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px 32px;
margin: 0;
padding: 24px 0 0 0;
border-top: 1px solid var(--sokimo--whisper-border);
}
.sokimo-about-hero__fact {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
}
.sokimo-about-hero__fact dt {
font-family: var(--sokimo--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sokimo--slate-steel);
margin: 0;
}
.sokimo-about-hero__fact dd {
font-family: var(--_font-family---heading-font);
font-size: 18px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--sokimo--charcoal-ink);
margin: 0;
}
/* — Galerie 3 vignettes — */
.sokimo-about-hero__gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
padding: 48px 0 0 0;
border-top: 1px solid var(--sokimo--whisper-border);
}
.sokimo-about-hero__thumb {
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.sokimo-about-hero__thumb img {
display: block;
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: 6px;
transition: transform 320ms ease-out;
}
.sokimo-about-hero__thumb:hover img {
transform: scale(1.02);
}
.sokimo-about-hero__thumb figcaption {
font-family: var(--sokimo--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sokimo--slate-steel);
}
/* — Responsive — */
@media (max-width: 991px) {
.sokimo-about-hero { padding: 64px 0 72px; }
.sokimo-about-hero__head { margin-bottom: 40px; }
.sokimo-about-hero__visual { margin-bottom: 48px; }
.sokimo-about-hero__visual img { aspect-ratio: 16/8; }
.sokimo-about-hero__body { grid-template-columns: 1fr; gap: 40px; margin-bottom: 56px; }
.sokimo-about-hero__gallery { grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 32px; }
.sokimo-about-hero__thumb:nth-child(3) { grid-column: span 2; max-width: 50%; }
}
@media (max-width: 600px) {
.sokimo-about-hero__facts { grid-template-columns: 1fr; gap: 16px; }
.sokimo-about-hero__gallery { grid-template-columns: 1fr; }
.sokimo-about-hero__thumb:nth-child(3) { grid-column: span 1; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.sokimo-about-hero__thumb img { transition: none; }
.sokimo-about-hero__thumb:hover img { transform: none; }
}
/* ------------------------------------------------------------------
21. RSE — page Responsabilité Sociétale (rse.html)
------------------------------------------------------------------ */
/* — Hero — */
.sokimo-rse-hero {
background: var(--sokimo--bone-canvas);
padding: 96px 0 80px;
}
.sokimo-rse-hero__head {
max-width: 880px;
margin: 0 0 64px 0;
}
.sokimo-rse-hero__title {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(40px, 5vw, 72px);
line-height: 1.04;
letter-spacing: -0.025em;
color: var(--sokimo--charcoal-ink);
margin: 16px 0 32px 0;
max-width: 18ch;
}
.sokimo-rse-hero__lead {
font-family: var(--_font-family---body-font);
font-size: 18px;
line-height: 1.6;
color: var(--sokimo--slate-steel);
max-width: 64ch;
margin: 0;
}
/* Strip 3 mini-stats */
.sokimo-rse-hero__strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
padding: 32px 0 0 0;
border-top: 1px solid var(--sokimo--whisper-border);
}
.sokimo-rse-hero__strip-item {
display: flex;
flex-direction: column;
gap: 8px;
}
.sokimo-rse-hero__strip-mono {
font-family: var(--sokimo--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sokimo--slate-steel);
}
.sokimo-rse-hero__strip-value {
font-family: var(--_font-family---heading-font);
font-size: clamp(18px, 2vw, 22px);
font-weight: 500;
letter-spacing: -0.01em;
color: var(--sokimo--charcoal-ink);
}
/* — 3 piliers zig-zag — */
.sokimo-rse-pillars {
background: var(--sokimo--bone-canvas);
padding: 48px 0 96px;
}
.sokimo-rse-pillar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
padding: 64px 0;
border-top: 1px solid var(--sokimo--whisper-border);
}
.sokimo-rse-pillar:last-child {
border-bottom: 1px solid var(--sokimo--whisper-border);
}
.sokimo-rse-pillar--reverse .sokimo-rse-pillar__media { order: 2; }
.sokimo-rse-pillar--reverse .sokimo-rse-pillar__content { order: 1; }
.sokimo-rse-pillar__media {
position: relative;
}
.sokimo-rse-pillar__media img {
display: block;
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: 8px;
}
/* Placeholder Higgsfield (institutional dashed frame) */
.sokimo-rse-pillar__placeholder {
width: 100%;
aspect-ratio: 4/3;
border: 1.5px dashed rgba(92, 100, 112, 0.32);
border-radius: 8px;
background: rgba(255, 255, 255, 0.5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 32px;
text-align: center;
position: relative;
}
.sokimo-rse-pillar__placeholder::before {
content: attr(data-pillar);
position: absolute;
top: 16px;
left: 16px;
font-family: var(--sokimo--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.16em;
color: var(--sokimo--gold);
}
.sokimo-rse-pillar__placeholder-eyebrow {
font-family: var(--sokimo--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sokimo--slate-steel);
}
.sokimo-rse-pillar__placeholder-note {
font-family: var(--sokimo--font-mono);
font-size: 12px;
line-height: 1.5;
color: var(--sokimo--slate-steel);
max-width: 32ch;
}
.sokimo-rse-pillar__content {
display: flex;
flex-direction: column;
gap: 18px;
}
.sokimo-rse-pillar__index {
font-family: var(--sokimo--font-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sokimo--gold);
}
.sokimo-rse-pillar__icon {
width: 56px;
height: 56px;
color: var(--sokimo--charcoal-ink);
margin: 4px 0 0 0;
}
.sokimo-rse-pillar__icon svg {
width: 100%;
height: 100%;
}
.sokimo-rse-pillar__title {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(28px, 3.4vw, 42px);
line-height: 1.1;
letter-spacing: -0.018em;
color: var(--sokimo--charcoal-ink);
margin: 0;
}
.sokimo-rse-pillar__lead {
font-family: var(--_font-family---body-font);
font-size: 16px;
line-height: 1.6;
color: var(--sokimo--slate-steel);
margin: 0;
max-width: 50ch;
}
.sokimo-rse-pillar__list {
list-style: none;
margin: 12px 0 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.sokimo-rse-pillar__list li {
font-family: var(--_font-family---body-font);
font-size: 15px;
line-height: 1.55;
color: var(--sokimo--charcoal-ink);
padding: 0 0 0 24px;
position: relative;
}
.sokimo-rse-pillar__list li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 12px;
height: 1.5px;
background: var(--sokimo--gold);
}
/* — Engagement fermeture (dark) — */
.sokimo-rse-commitment {
background: var(--sokimo--navy);
padding: 96px 0;
position: relative;
overflow: hidden;
}
.sokimo-rse-commitment::before {
content: "";
position: absolute;
top: -120px;
right: -120px;
width: 360px;
height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(200, 148, 31, 0.16) 0%, transparent 70%);
pointer-events: none;
}
.sokimo-rse-commitment__inner {
max-width: 800px;
position: relative;
z-index: 1;
}
.sokimo-rse-commitment__title {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(32px, 4vw, 56px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--sokimo--bone-canvas);
margin: 12px 0 24px 0;
max-width: 22ch;
}
.sokimo-rse-commitment__text {
font-family: var(--_font-family---body-font);
font-size: 17px;
line-height: 1.65;
color: rgba(250, 247, 242, 0.84);
margin: 0 0 40px 0;
max-width: 64ch;
}
.sokimo-rse-commitment__cta {
display: inline-flex !important;
}
/* — Responsive — */
@media (max-width: 991px) {
.sokimo-rse-hero { padding: 64px 0 56px; }
.sokimo-rse-hero__head { margin-bottom: 40px; }
.sokimo-rse-hero__strip { grid-template-columns: 1fr; gap: 20px; }
.sokimo-rse-pillars { padding: 32px 0 64px; }
.sokimo-rse-pillar {
grid-template-columns: 1fr;
gap: 32px;
padding: 48px 0;
}
.sokimo-rse-pillar--reverse .sokimo-rse-pillar__media { order: 1; }
.sokimo-rse-pillar--reverse .sokimo-rse-pillar__content { order: 2; }
.sokimo-rse-commitment { padding: 64px 0; }
}
@media (max-width: 600px) {
.sokimo-rse-hero__title { font-size: 36px; }
.sokimo-rse-pillar__title { font-size: 28px; }
.sokimo-rse-pillar__lead { font-size: 15px; }
.sokimo-rse-commitment__title { font-size: 32px; }
}
/* ------------------------------------------------------------------
22. FAQ — page Foire Aux Questions (faq.html)
------------------------------------------------------------------ */
.sokimo-faq-hero {
background: var(--sokimo--bone-canvas);
padding: 96px 0 64px;
}
.sokimo-faq-hero__head { max-width: 880px; margin: 0 0 56px 0; }
.sokimo-faq-hero__title {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(40px, 5vw, 72px);
line-height: 1.04;
letter-spacing: -0.025em;
color: var(--sokimo--charcoal-ink);
margin: 16px 0 32px 0;
max-width: 18ch;
}
.sokimo-faq-hero__lead {
font-family: var(--_font-family---body-font);
font-size: 17px;
line-height: 1.6;
color: var(--sokimo--slate-steel);
max-width: 72ch;
margin: 0;
}
/* Sommaire thématique */
.sokimo-faq-toc {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 32px 0 0 0;
border-top: 1px solid var(--sokimo--whisper-border);
}
.sokimo-faq-toc__item {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--sokimo--whisper-border);
border-radius: 6px;
text-decoration: none;
transition: border-color 220ms ease-out, background 220ms ease-out, transform 220ms ease-out;
}
.sokimo-faq-toc__item:hover {
border-color: var(--sokimo--gold);
background: #FFFFFF;
transform: translateY(-2px);
}
.sokimo-faq-toc__num {
font-family: var(--sokimo--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.16em;
color: var(--sokimo--gold);
flex-shrink: 0;
}
.sokimo-faq-toc__label {
font-family: var(--_font-family---body-font);
font-size: 14px;
font-weight: 500;
color: var(--sokimo--charcoal-ink);
line-height: 1.3;
}
/* Body — catégories */
.sokimo-faq-body {
background: var(--sokimo--bone-canvas);
padding: 32px 0 96px;
}
.sokimo-faq-cat {
padding: 56px 0;
border-top: 1px solid var(--sokimo--whisper-border);
scroll-margin-top: 80px;
}
.sokimo-faq-cat:last-child {
border-bottom: 1px solid var(--sokimo--whisper-border);
}
.sokimo-faq-cat__head {
display: flex;
align-items: baseline;
gap: 18px;
margin: 0 0 32px 0;
}
.sokimo-faq-cat__num {
font-family: var(--sokimo--font-mono);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--sokimo--gold);
}
.sokimo-faq-cat__title {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(28px, 3.4vw, 42px);
line-height: 1.1;
letter-spacing: -0.018em;
color: var(--sokimo--charcoal-ink);
margin: 0;
}
/* Accordion items custom */
.sokimo-faq-list .accordion-item {
border-bottom: 1px solid var(--sokimo--whisper-border);
background: transparent !important;
}
.sokimo-faq-list .accordion-item:first-child {
border-top: 1px solid var(--sokimo--whisper-border);
}
.sokimo-faq-list .accordion-heading {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 24px 0 !important;
cursor: pointer;
user-select: none;
}
.sokimo-faq-list .accordion-title {
font-family: var(--_font-family---heading-font) !important;
font-weight: 500 !important;
font-size: clamp(17px, 1.6vw, 20px) !important;
line-height: 1.35 !important;
letter-spacing: -0.005em !important;
color: var(--sokimo--charcoal-ink) !important;
margin: 0 !important;
flex: 1;
}
.sokimo-faq-list .accordion-icon {
width: 28px !important;
height: 28px !important;
position: relative;
flex-shrink: 0;
border: 1px solid var(--sokimo--whisper-border);
border-radius: 50%;
display: flex !important;
align-items: center;
justify-content: center;
transition: background 220ms ease-out, border-color 220ms ease-out;
}
.sokimo-faq-list .accordion-item:hover .accordion-icon {
border-color: var(--sokimo--gold);
}
.sokimo-faq-list .accordion-item.is-open .accordion-icon {
background: var(--sokimo--gold);
border-color: var(--sokimo--gold);
}
.sokimo-faq-list .accordion-icon .plus,
.sokimo-faq-list .accordion-icon .minus {
position: absolute;
background: var(--sokimo--charcoal-ink);
transition: opacity 220ms ease-out, background 220ms ease-out;
}
.sokimo-faq-list .accordion-icon .plus {
width: 12px; height: 1.5px; top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
.sokimo-faq-list .accordion-icon .plus::after {
content: ''; position: absolute; top: 50%; left: 50%;
width: 1.5px; height: 12px; background: var(--sokimo--charcoal-ink);
transform: translate(-50%, -50%);
transition: opacity 220ms ease-out;
}
.sokimo-faq-list .accordion-icon .minus { display: none; }
.sokimo-faq-list .accordion-item.is-open .accordion-icon .plus { background: #FFFFFF; }
.sokimo-faq-list .accordion-item.is-open .accordion-icon .plus::after { opacity: 0; }
.sokimo-faq-list .accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 320ms ease-out, padding 320ms ease-out;
padding: 0 0 0 0 !important;
}
.sokimo-faq-list .accordion-item.is-open .accordion-body {
max-height: 600px;
padding: 0 0 28px 0 !important;
}
.sokimo-faq-list .accordion-content {
font-family: var(--_font-family---body-font) !important;
font-size: 16px !important;
line-height: 1.65 !important;
color: var(--sokimo--slate-steel) !important;
margin: 0 !important;
max-width: 70ch;
}
.sokimo-faq-list .accordion-content a {
color: var(--sokimo--charcoal-ink);
text-decoration: underline;
text-decoration-color: var(--sokimo--gold);
text-underline-offset: 3px;
transition: color 220ms ease-out;
}
.sokimo-faq-list .accordion-content a:hover {
color: var(--sokimo--gold);
}
/* CTA fermeture (navy) */
.sokimo-faq-cta {
background: var(--sokimo--navy);
padding: 96px 0;
position: relative;
overflow: hidden;
}
.sokimo-faq-cta::before {
content: "";
position: absolute;
top: -120px;
right: -120px;
width: 360px;
height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(200, 148, 31, 0.16) 0%, transparent 70%);
pointer-events: none;
}
.sokimo-faq-cta__inner { max-width: 720px; position: relative; z-index: 1; }
.sokimo-faq-cta__title {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(28px, 3.6vw, 48px);
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--sokimo--bone-canvas);
margin: 12px 0 20px 0;
max-width: 22ch;
}
.sokimo-faq-cta__text {
font-family: var(--_font-family---body-font);
font-size: 17px;
line-height: 1.6;
color: rgba(250, 247, 242, 0.84);
margin: 0 0 32px 0;
max-width: 56ch;
}
.sokimo-faq-cta__btn { display: inline-flex !important; }
/* Responsive */
@media (max-width: 991px) {
.sokimo-faq-hero { padding: 64px 0 48px; }
.sokimo-faq-toc { grid-template-columns: 1fr 1fr; }
.sokimo-faq-cat { padding: 40px 0; }
.sokimo-faq-cat__head { gap: 14px; margin-bottom: 24px; }
.sokimo-faq-cta { padding: 64px 0; }
}
@media (max-width: 600px) {
.sokimo-faq-toc { grid-template-columns: 1fr; }
.sokimo-faq-list .accordion-heading { padding: 20px 0 !important; gap: 16px; }
.sokimo-faq-list .accordion-title { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
.sokimo-faq-toc__item { transition: none; }
.sokimo-faq-list .accordion-icon,
.sokimo-faq-list .accordion-body { transition: none; }
}
/* ------------------------------------------------------------------
23. OPPORTUNITÉS — page opportunites.html
------------------------------------------------------------------ */
/* — Hero — */
.sokimo-opp-hero {
background: var(--sokimo--bone-canvas);
padding: 96px 0 72px;
}
.sokimo-opp-hero__head {
max-width: 920px;
margin: 0 0 56px 0;
}
.sokimo-opp-hero__title {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(40px, 5vw, 72px);
line-height: 1.04;
letter-spacing: -0.025em;
color: var(--sokimo--charcoal-ink);
margin: 16px 0 24px 0;
max-width: 18ch;
}
.sokimo-opp-hero__lead {
font-family: var(--_font-family---body-font);
font-size: 18px;
line-height: 1.6;
color: var(--sokimo--slate-steel);
max-width: 72ch;
margin: 0 0 32px 0;
}
.sokimo-opp-hero__cta {
display: inline-flex !important;
}
.sokimo-opp-hero__strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
padding: 32px 0 0 0;
border-top: 1px solid var(--sokimo--whisper-border);
}
.sokimo-opp-hero__strip-item {
display: flex;
flex-direction: column;
gap: 6px;
}
.sokimo-opp-hero__strip-mono {
font-family: var(--sokimo--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sokimo--slate-steel);
}
.sokimo-opp-hero__strip-value {
font-family: var(--_font-family---heading-font);
font-size: clamp(16px, 1.6vw, 19px);
font-weight: 500;
letter-spacing: -0.005em;
color: var(--sokimo--charcoal-ink);
}
/* — Pourquoi investir — */
.sokimo-opp-why {
background: #FFFFFF;
padding: 96px 0;
border-top: 1px solid var(--sokimo--whisper-border);
border-bottom: 1px solid var(--sokimo--whisper-border);
}
.sokimo-opp-why__head {
max-width: 720px;
margin: 0 0 56px 0;
}
.sokimo-opp-why__title {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.1;
letter-spacing: -0.018em;
color: var(--sokimo--charcoal-ink);
margin: 12px 0 0 0;
max-width: 22ch;
}
.sokimo-opp-why__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 48px;
}
.sokimo-opp-why__item {
display: flex;
flex-direction: column;
gap: 14px;
padding: 32px 0 0 0;
border-top: 1px solid var(--sokimo--whisper-border);
}
.sokimo-opp-why__num {
font-family: var(--sokimo--font-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--sokimo--gold);
}
.sokimo-opp-why__name {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--sokimo--charcoal-ink);
margin: 0;
}
.sokimo-opp-why__text {
font-family: var(--_font-family---body-font);
font-size: 16px;
line-height: 1.6;
color: var(--sokimo--slate-steel);
margin: 0;
max-width: 56ch;
}
/* — 6 secteurs détaillés — */
.sokimo-opp-sectors {
background: var(--sokimo--bone-canvas);
padding: 96px 0;
}
.sokimo-opp-sectors__head {
max-width: 880px;
margin: 0 0 64px 0;
}
.sokimo-opp-sectors__title {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(32px, 4vw, 56px);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--sokimo--charcoal-ink);
margin: 12px 0 24px 0;
max-width: 20ch;
}
.sokimo-opp-sectors__lead {
font-family: var(--_font-family---body-font);
font-size: 16px;
line-height: 1.6;
color: var(--sokimo--slate-steel);
max-width: 64ch;
margin: 0;
}
.sokimo-opp-sector {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
padding: 64px 0;
border-top: 1px solid var(--sokimo--whisper-border);
scroll-margin-top: 80px;
}
.sokimo-opp-sector:last-child {
border-bottom: 1px solid var(--sokimo--whisper-border);
}
.sokimo-opp-sector--reverse .sokimo-opp-sector__media { order: 2; }
.sokimo-opp-sector--reverse .sokimo-opp-sector__content { order: 1; }
.sokimo-opp-sector__media img {
display: block;
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: 8px;
}
.sokimo-opp-sector__content {
display: flex;
flex-direction: column;
gap: 14px;
}
.sokimo-opp-sector__index {
font-family: var(--sokimo--font-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--sokimo--gold);
}
.sokimo-opp-sector__eyebrow {
font-family: var(--sokimo--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sokimo--slate-steel);
margin-top: -8px;
}
.sokimo-opp-sector__title {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.08;
letter-spacing: -0.018em;
color: var(--sokimo--charcoal-ink);
margin: 0;
}
.sokimo-opp-sector__lead {
font-family: var(--_font-family---body-font);
font-size: 16px;
line-height: 1.6;
color: var(--sokimo--charcoal-ink);
margin: 0;
max-width: 50ch;
font-weight: 500;
}
.sokimo-opp-sector__details {
list-style: none;
margin: 8px 0 0 0;
padding: 16px 0 0 0;
border-top: 1px solid var(--sokimo--whisper-border);
display: flex;
flex-direction: column;
gap: 10px;
}
.sokimo-opp-sector__details li {
font-family: var(--_font-family---body-font);
font-size: 14.5px;
line-height: 1.55;
color: var(--sokimo--slate-steel);
padding: 0 0 0 18px;
position: relative;
}
.sokimo-opp-sector__details li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 10px;
height: 1.5px;
background: var(--sokimo--gold);
}
.sokimo-opp-sector__details strong {
color: var(--sokimo--charcoal-ink);
font-weight: 600;
}
.sokimo-opp-sector__details a {
color: var(--sokimo--charcoal-ink);
text-decoration: underline;
text-decoration-color: var(--sokimo--gold);
text-underline-offset: 3px;
}
.sokimo-opp-sector__stats {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 32px;
margin-top: 8px;
padding: 16px 0 0 0;
border-top: 1px solid var(--sokimo--whisper-border);
}
.sokimo-opp-sector__stats > div {
display: flex;
flex-direction: column;
gap: 4px;
}
.sokimo-opp-sector__stat-value {
font-family: var(--_font-family---heading-font);
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 500;
letter-spacing: -0.01em;
color: var(--sokimo--charcoal-ink);
}
.sokimo-opp-sector__stat-label {
font-family: var(--sokimo--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sokimo--slate-steel);
}
.sokimo-opp-sector__cta {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 16px;
padding: 12px 18px;
background: transparent;
border: 1px solid var(--sokimo--charcoal-ink);
border-radius: 4px;
color: var(--sokimo--charcoal-ink);
font-family: var(--_font-family---body-font);
font-size: 14.5px;
font-weight: 500;
text-decoration: none;
transition: background 220ms ease-out, color 220ms ease-out, border-color 220ms ease-out, transform 220ms ease-out;
align-self: flex-start;
}
.sokimo-opp-sector__cta svg {
width: 16px;
height: 16px;
transition: transform 220ms ease-out;
}
.sokimo-opp-sector__cta:hover {
background: var(--sokimo--gold);
border-color: var(--sokimo--gold);
color: var(--sokimo--charcoal-ink);
transform: translateY(-1px);
}
.sokimo-opp-sector__cta:hover svg {
transform: translateX(4px);
}
/* — Process partenariat — */
.sokimo-opp-process {
background: #FFFFFF;
padding: 96px 0;
border-top: 1px solid var(--sokimo--whisper-border);
}
.sokimo-opp-process__head {
max-width: 720px;
margin: 0 0 56px 0;
}
.sokimo-opp-process__title {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.1;
letter-spacing: -0.018em;
color: var(--sokimo--charcoal-ink);
margin: 12px 0 16px 0;
max-width: 22ch;
}
.sokimo-opp-process__lead {
font-family: var(--_font-family---body-font);
font-size: 16px;
line-height: 1.6;
color: var(--sokimo--slate-steel);
max-width: 64ch;
margin: 0;
}
.sokimo-opp-process__steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.sokimo-opp-process__step {
display: flex;
flex-direction: column;
gap: 12px;
padding: 28px 0 0 0;
border-top: 2px solid var(--sokimo--charcoal-ink);
position: relative;
}
.sokimo-opp-process__step::before {
content: "";
position: absolute;
top: -2px;
left: 0;
width: 40px;
height: 2px;
background: var(--sokimo--gold);
}
.sokimo-opp-process__num {
font-family: var(--sokimo--font-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--sokimo--gold);
}
.sokimo-opp-process__name {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(18px, 2vw, 22px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--sokimo--charcoal-ink);
margin: 0;
}
.sokimo-opp-process__step p {
font-family: var(--_font-family---body-font);
font-size: 14.5px;
line-height: 1.55;
color: var(--sokimo--slate-steel);
margin: 0;
}
.sokimo-opp-process__step a {
color: var(--sokimo--charcoal-ink);
text-decoration: underline;
text-decoration-color: var(--sokimo--gold);
text-underline-offset: 3px;
}
/* — CTA navy fermeture — */
.sokimo-opp-cta {
background: var(--sokimo--navy);
padding: 96px 0;
position: relative;
overflow: hidden;
}
.sokimo-opp-cta::before {
content: "";
position: absolute;
top: -120px;
right: -120px;
width: 360px;
height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(200, 148, 31, 0.16) 0%, transparent 70%);
pointer-events: none;
}
.sokimo-opp-cta__inner {
max-width: 720px;
position: relative;
z-index: 1;
}
.sokimo-opp-cta__title {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(32px, 4vw, 56px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--sokimo--bone-canvas);
margin: 12px 0 20px 0;
max-width: 22ch;
}
.sokimo-opp-cta__text {
font-family: var(--_font-family---body-font);
font-size: 17px;
line-height: 1.6;
color: rgba(250, 247, 242, 0.84);
margin: 0 0 32px 0;
max-width: 60ch;
}
.sokimo-opp-cta__btn { display: inline-flex !important; }
/* — Responsive — */
@media (max-width: 991px) {
.sokimo-opp-hero { padding: 64px 0 48px; }
.sokimo-opp-hero__strip { grid-template-columns: 1fr 1fr; gap: 18px; }
.sokimo-opp-why,
.sokimo-opp-sectors,
.sokimo-opp-process,
.sokimo-opp-cta { padding: 64px 0; }
.sokimo-opp-why__grid { grid-template-columns: 1fr; gap: 32px; }
.sokimo-opp-sector {
grid-template-columns: 1fr;
gap: 32px;
padding: 48px 0;
}
.sokimo-opp-sector--reverse .sokimo-opp-sector__media { order: 1; }
.sokimo-opp-sector--reverse .sokimo-opp-sector__content { order: 2; }
.sokimo-opp-process__steps { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 600px) {
.sokimo-opp-hero__strip { grid-template-columns: 1fr; gap: 14px; }
.sokimo-opp-sector__stats { grid-template-columns: 1fr; gap: 16px; }
.sokimo-opp-process__steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.sokimo-opp-sector__cta,
.sokimo-opp-sector__cta svg { transition: none; }
.sokimo-opp-sector__cta:hover { transform: none; }
.sokimo-opp-sector__cta:hover svg { transform: none; }
}
/* ------------------------------------------------------------------
24. NOS OFFRES — page nos-offres.html
------------------------------------------------------------------ */
/* — Tabs cards (Appels d'Offres / Stages) — */
.sokimo-offres-tabs {
background: #FFFFFF;
padding: 96px 0;
border-top: 1px solid var(--sokimo--whisper-border);
border-bottom: 1px solid var(--sokimo--whisper-border);
}
.sokimo-offres-tabs__head {
max-width: 720px;
margin: 0 0 56px 0;
}
.sokimo-offres-tabs__title {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.1;
letter-spacing: -0.018em;
color: var(--sokimo--charcoal-ink);
margin: 12px 0 0 0;
max-width: 22ch;
}
.sokimo-offres-tabs__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.sokimo-offres-tab {
display: flex;
align-items: flex-start;
gap: 28px;
padding: 40px 36px;
background: var(--sokimo--bone-canvas);
border: 1px solid var(--sokimo--whisper-border);
border-radius: 12px;
text-decoration: none;
color: var(--sokimo--charcoal-ink);
transition: border-color 220ms ease-out, transform 220ms ease-out, box-shadow 220ms ease-out;
}
.sokimo-offres-tab:hover {
border-color: var(--sokimo--gold);
transform: translateY(-2px);
box-shadow: 0 24px 48px -28px rgba(15, 20, 25, 0.20);
}
.sokimo-offres-tab__index {
font-family: var(--_font-family---heading-font);
font-size: 56px;
font-weight: 200;
line-height: 0.9;
color: var(--sokimo--gold);
letter-spacing: -0.04em;
flex-shrink: 0;
}
.sokimo-offres-tab__body {
display: flex;
flex-direction: column;
gap: 8px;
}
.sokimo-offres-tab__eyebrow {
font-family: var(--sokimo--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sokimo--slate-steel);
}
.sokimo-offres-tab__name {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(24px, 2.6vw, 32px);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--sokimo--charcoal-ink);
margin: 0;
}
.sokimo-offres-tab__lead {
font-family: var(--_font-family---body-font);
font-size: 15.5px;
line-height: 1.6;
color: var(--sokimo--slate-steel);
margin: 4px 0 12px 0;
max-width: 38ch;
}
.sokimo-offres-tab__cta {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--_font-family---body-font);
font-size: 14px;
font-weight: 500;
color: var(--sokimo--charcoal-ink);
margin-top: 4px;
}
.sokimo-offres-tab__cta svg {
width: 14px;
height: 14px;
transition: transform 220ms ease-out;
}
.sokimo-offres-tab:hover .sokimo-offres-tab__cta {
color: var(--sokimo--gold);
}
.sokimo-offres-tab:hover .sokimo-offres-tab__cta svg {
transform: translateX(4px);
}
/* — Block (section appels d'offres / stages) — */
.sokimo-offres-block {
background: var(--sokimo--bone-canvas);
padding: 96px 0;
scroll-margin-top: 80px;
}
.sokimo-offres-block--alt {
background: #FFFFFF;
border-top: 1px solid var(--sokimo--whisper-border);
}
.sokimo-offres-block__intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
margin-bottom: 64px;
align-items: start;
}
.sokimo-offres-block__title {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(32px, 4vw, 56px);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--sokimo--charcoal-ink);
margin: 12px 0 0 0;
max-width: 18ch;
}
.sokimo-offres-block__intro-right p {
font-family: var(--_font-family---body-font);
font-size: 16px;
line-height: 1.65;
color: var(--sokimo--slate-steel);
margin: 0;
}
/* — Liste cards (appels d'offres / stages) — */
.sokimo-offres-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: 80px;
}
.sokimo-offres-card {
display: flex;
flex-direction: column;
gap: 16px;
padding: 32px;
background: #FFFFFF;
border: 1px solid var(--sokimo--whisper-border);
border-radius: 10px;
transition: border-color 220ms ease-out, box-shadow 220ms ease-out;
}
.sokimo-offres-block--alt .sokimo-offres-card {
background: var(--sokimo--bone-canvas);
}
.sokimo-offres-card:hover {
border-color: var(--sokimo--gold);
box-shadow: 0 18px 40px -24px rgba(15, 20, 25, 0.18);
}
.sokimo-offres-card--closed {
opacity: 0.7;
}
.sokimo-offres-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.sokimo-offres-card__ref {
font-family: var(--sokimo--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sokimo--slate-steel);
}
.sokimo-offres-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--sokimo--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 6px 10px;
border-radius: 4px;
border: 1px solid currentColor;
}
.sokimo-offres-badge::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.sokimo-offres-badge--open { color: #2E7D3F; }
.sokimo-offres-badge--soon { color: var(--sokimo--gold); }
.sokimo-offres-badge--closed { color: var(--sokimo--slate-steel); }
.sokimo-offres-card__title {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(18px, 2vw, 22px);
line-height: 1.2;
letter-spacing: -0.012em;
color: var(--sokimo--charcoal-ink);
margin: 4px 0 0 0;
}
.sokimo-offres-card__type {
font-family: var(--sokimo--font-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sokimo--gold);
margin: 0;
}
.sokimo-offres-card__meta {
list-style: none;
margin: 4px 0 0 0;
padding: 14px 0 0 0;
border-top: 1px solid var(--sokimo--whisper-border);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 24px;
}
.sokimo-offres-card__meta li {
display: flex;
flex-direction: column;
gap: 3px;
}
.sokimo-offres-card__meta span {
font-family: var(--sokimo--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sokimo--slate-steel);
}
.sokimo-offres-card__meta strong {
font-family: var(--_font-family---body-font);
font-size: 14px;
font-weight: 500;
color: var(--sokimo--charcoal-ink);
line-height: 1.4;
}
.sokimo-offres-card__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid var(--sokimo--whisper-border);
}
.sokimo-offres-card__cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--_font-family---body-font);
font-size: 13.5px;
font-weight: 500;
text-decoration: none;
padding: 10px 16px;
border-radius: 4px;
border: 1px solid var(--sokimo--charcoal-ink);
color: var(--sokimo--charcoal-ink);
transition: background 200ms ease-out, color 200ms ease-out;
}
.sokimo-offres-card__cta:hover {
background: var(--sokimo--charcoal-ink);
color: var(--sokimo--bone-canvas);
}
.sokimo-offres-card__cta--primary {
background: var(--sokimo--gold);
border-color: var(--sokimo--gold);
color: var(--sokimo--charcoal-ink);
}
.sokimo-offres-card__cta--primary:hover {
background: var(--sokimo--charcoal-ink);
border-color: var(--sokimo--charcoal-ink);
color: var(--sokimo--bone-canvas);
}
/* — Process (Comment soumissionner / Modalités) — */
.sokimo-offres-process {
margin-top: 24px;
padding-top: 56px;
border-top: 1px solid var(--sokimo--whisper-border);
}
.sokimo-offres-process__title {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(22px, 2.6vw, 30px);
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--sokimo--charcoal-ink);
margin: 0 0 32px 0;
}
.sokimo-offres-process__steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.sokimo-offres-process__step {
display: flex;
flex-direction: column;
gap: 10px;
padding: 24px 0 0 0;
border-top: 2px solid var(--sokimo--charcoal-ink);
position: relative;
}
.sokimo-offres-process__step::before {
content: "";
position: absolute;
top: -2px;
left: 0;
width: 36px;
height: 2px;
background: var(--sokimo--gold);
}
.sokimo-offres-process__num {
font-family: var(--sokimo--font-mono);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--sokimo--gold);
}
.sokimo-offres-process__step h4 {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(16px, 1.8vw, 19px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--sokimo--charcoal-ink);
margin: 0;
}
.sokimo-offres-process__step p {
font-family: var(--_font-family---body-font);
font-size: 14px;
line-height: 1.55;
color: var(--sokimo--slate-steel);
margin: 0;
}
.sokimo-offres-process__step strong {
color: var(--sokimo--charcoal-ink);
font-weight: 600;
}
/* — Domaines d'accueil (stages) — */
.sokimo-offres-fields {
margin-bottom: 56px;
padding-bottom: 48px;
border-bottom: 1px solid var(--sokimo--whisper-border);
}
.sokimo-offres-fields__title {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(22px, 2.6vw, 30px);
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--sokimo--charcoal-ink);
margin: 0 0 28px 0;
}
.sokimo-offres-fields__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.sokimo-offres-field {
display: flex;
flex-direction: column;
gap: 6px;
padding: 20px 0 0 0;
border-top: 1px solid var(--sokimo--whisper-border);
}
.sokimo-offres-field__num {
font-family: var(--sokimo--font-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--sokimo--gold);
}
.sokimo-offres-field h4 {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(17px, 1.9vw, 21px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--sokimo--charcoal-ink);
margin: 4px 0 0 0;
}
.sokimo-offres-field p {
font-family: var(--_font-family---body-font);
font-size: 14px;
line-height: 1.55;
color: var(--sokimo--slate-steel);
margin: 0;
}
/* — Note de mise à jour — */
.sokimo-offres-note {
background: var(--sokimo--bone-canvas);
padding: 64px 0;
border-top: 1px solid var(--sokimo--whisper-border);
border-bottom: 1px solid var(--sokimo--whisper-border);
}
.sokimo-offres-note__inner {
max-width: 720px;
}
.sokimo-offres-note p {
font-family: var(--_font-family---heading-font);
font-weight: 500;
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.3;
letter-spacing: -0.012em;
color: var(--sokimo--charcoal-ink);
margin: 12px 0 24px 0;
max-width: 30ch;
}
.sokimo-offres-note__cta {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--_font-family---body-font);
font-size: 14.5px;
font-weight: 500;
color: var(--sokimo--charcoal-ink);
text-decoration: none;
padding: 12px 18px;
border: 1px solid var(--sokimo--charcoal-ink);
border-radius: 4px;
transition: background 200ms ease-out, color 200ms ease-out;
}
.sokimo-offres-note__cta svg {
width: 14px;
height: 14px;
transition: transform 220ms ease-out;
}
.sokimo-offres-note__cta:hover {
background: var(--sokimo--gold);
border-color: var(--sokimo--gold);
}
.sokimo-offres-note__cta:hover svg {
transform: translateX(4px);
}
/* — Responsive — */
@media (max-width: 991px) {
.sokimo-offres-tabs,
.sokimo-offres-block,
.sokimo-offres-note { padding: 64px 0; }
.sokimo-offres-tabs__grid { grid-template-columns: 1fr; gap: 18px; }
.sokimo-offres-tab { padding: 28px 24px; gap: 18px; }
.sokimo-offres-tab__index { font-size: 44px; }
.sokimo-offres-block__intro { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
.sokimo-offres-list { grid-template-columns: 1fr; gap: 18px; margin-bottom: 56px; }
.sokimo-offres-card { padding: 24px; }
.sokimo-offres-card__meta { grid-template-columns: 1fr; gap: 10px; }
.sokimo-offres-process__steps { grid-template-columns: 1fr 1fr; gap: 28px; }
.sokimo-offres-fields__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
.sokimo-offres-process { padding-top: 40px; }
.sokimo-offres-fields { margin-bottom: 40px; padding-bottom: 32px; }
}
@media (max-width: 600px) {
.sokimo-offres-tab { flex-direction: column; gap: 12px; }
.sokimo-offres-process__steps { grid-template-columns: 1fr; }
.sokimo-offres-fields__grid { grid-template-columns: 1fr; }
.sokimo-offres-card__actions { flex-direction: column; }
.sokimo-offres-card__cta { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
.sokimo-offres-tab,
.sokimo-offres-card,
.sokimo-offres-card__cta,
.sokimo-offres-tab__cta svg,
.sokimo-offres-note__cta svg { transition: none; }
.sokimo-offres-tab:hover,
.sokimo-offres-card:hover { transform: none; }
}
/* ------------------------------------------------------------------
19b. Sanity CMS — layout guards
Prevents container collapse while the JS fetch is in flight.
The actual fade-in animation is handled by sanity-client.js.
------------------------------------------------------------------ */
[data-sanity-list] {
min-height: 1px; /* prevents container collapse during fetch */
}
/* ------------------------------------------------------------------
19. Hero foundation year — replaces broken Webflow rolling counter
------------------------------------------------------------------ */
.sokimo-foundation-year {
font-family: var(--_font-family---heading-font) !important;
font-weight: 500 !important;
font-size: clamp(72px, 9vw, 128px) !important;
line-height: 0.95 !important;
letter-spacing: -0.03em !important;
color: var(--sokimo--bone-canvas) !important;
margin: 0 0 12px 0 !important;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
/* ------------------------------------------------------------------
23. Gouvernance — responsive PCA + DG cards (a-propos.html)
Le HTML utilise des inline styles `grid-template-columns:repeat(3,1fr)`.
Sur mobile/tablette, on force le single column pour éviter la
compression du portrait + citation en colonnes ultra-étroites.
------------------------------------------------------------------ */
@media (max-width: 991px) {
.team-area .team-wrap[style*="grid-template-columns:repeat(3,1fr)"],
.team-area .team-wrap[style*="grid-template-columns: repeat(3,1fr)"] {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.team-area .team-wrap > [style*="grid-column:span 1"],
.team-area .team-wrap > [style*="grid-column: span 1"],
.team-area .team-wrap > [style*="grid-column:span 2"],
.team-area .team-wrap > [style*="grid-column: span 2"] {
grid-column: span 1 !important;
}
/* Le portrait PCA passe en pleine largeur, photo au-dessus du nom */
.team-area .team-card {
max-width: 100%;
display: grid !important;
grid-template-columns: 120px 1fr !important;
gap: 20px !important;
align-items: center !important;
}
.team-area .team-card .team-img-wrap {
aspect-ratio: 1/1 !important;
width: 120px !important;
margin: 0 !important;
}
.team-area .team-card .team-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 6px !important;
}
/* Le placeholder DG s'aligne sur la même structure */
.team-area .team-wrap > div[style*="display:flex"][style*="flex-direction:column"] > div[style*="aspect-ratio:4/5"] {
aspect-ratio: 4/3 !important;
padding: 24px !important;
}
/* Citation block — réduire le padding sur mobile */
.team-area .team-wrap > div[style*="background:var(--sokimo--surface)"][style*="padding:48px"] {
padding: 28px !important;
}
.team-area .team-wrap > div[style*="background:var(--sokimo--surface)"][style*="padding:48px"] p[style*="font-size:24px"] {
font-size: 18px !important;
line-height: 1.5 !important;
}
}
@media (max-width: 600px) {
.team-area .team-card {
grid-template-columns: 96px 1fr !important;
gap: 16px !important;
}
.team-area .team-card .team-img-wrap {
width: 96px !important;
}
}