/* Styles editoriaux extraits de claude_design_v2 pour les pages migrees Astro. */
/* === comprendre-alternance.html === */
/* ── INTRO MANIFESTO ── */
.alt-intro { padding: 100px 0 80px; background: var(--bg-page); border-bottom: 1px solid var(--border-dark); }
[data-theme="light"] .alt-intro { border-color: var(--border-light); }
.alt-intro__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; }
.alt-intro__eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 700; letter-spacing: .22em;
text-transform: uppercase; color: var(--amber);
margin-bottom: 20px;
}
.alt-intro__eyebrow::before {
content: ''; width: 8px; height: 8px; border-radius: 50%;
background: var(--amber);
}
.alt-intro__title {
font-family: 'Josefin Sans', sans-serif; font-size: clamp(40px, 5.5vw, 72px);
font-weight: 700; line-height: .98; letter-spacing: -.03em; text-transform: uppercase;
color: var(--text-primary); margin: 0 0 28px; text-wrap: balance;
}
.alt-intro__title em { color: var(--teal); font-style: normal; }
.alt-intro__title span { color: var(--amber); text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }
.alt-intro__lead { font-size: 18px; line-height: 1.7; color: var(--muted-on-dark); }
[data-theme="light"] .alt-intro__lead { color: var(--muted-on-light); }
.alt-intro__lead strong { color: var(--text-primary); font-weight: 600; }
.alt-intro__media { position: relative; min-height: 460px; border-radius: 20px; overflow: hidden; }
.alt-intro__media image-slot { width: 100%; height: 100%; display: block; }
/* ── 4 MOTIVATIONS ── */
.motivations {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
border-top: 1px solid var(--border-dark);
border-bottom: 1px solid var(--border-dark);
}
[data-theme="light"] .motivations { border-color: var(--border-light); }
.motivation {
padding: 48px 32px;
border-right: 1px solid var(--border-dark);
position: relative;
display: flex; flex-direction: column; gap: 16px;
transition: background var(--transition);
}
[data-theme="light"] .motivation { border-color: var(--border-light); }
.motivation:last-child { border-right: none; }
.motivation:hover { background: var(--bg-dark); }
[data-theme="light"] .motivation:hover { background: var(--bg-light); }
.motivation__icon {
width: 56px; height: 56px; border-radius: 14px;
background: color-mix(in oklab, var(--pole, var(--teal)) 14%, transparent);
display: flex; align-items: center; justify-content: center;
color: var(--pole, var(--teal));
}
.motivation[data-pole="amber"] { --pole: var(--amber); }
.motivation[data-pole="tech"] { --pole: var(--pole-tech); }
.motivation[data-pole="graph"] { --pole: var(--pole-graph); }
.motivation[data-pole="teal"] { --pole: var(--teal); }
.motivation__title {
font-family: 'Josefin Sans', sans-serif;
font-size: 20px; font-weight: 700; line-height: 1.15;
letter-spacing: -.01em; color: var(--text-primary); margin: 0;
}
.motivation__body { font-size: 14px; line-height: 1.6; color: var(--muted-on-dark); margin: 0; }
[data-theme="light"] .motivation__body { color: var(--muted-on-light); }
.motivation__body strong { color: var(--text-primary); font-weight: 600; }
/* ── PROFILES BANNER ── */
.profiles {
background: linear-gradient(135deg, #0A2E2A 0%, #1C7269 50%, #2E9988 100%);
padding: 100px 0; position: relative; overflow: hidden;
}
.profiles::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse 50% 70% at 90% 30%, rgba(76,204,184,.35) 0%, transparent 60%),
radial-gradient(ellipse 40% 60% at 10% 100%, rgba(253,161,0,.18) 0%, transparent 60%);
pointer-events: none;
}
.profiles__inner { position: relative; z-index: 1; }
.profiles__head { margin-bottom: 56px; max-width: 880px; }
.profiles__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'Josefin Sans', sans-serif; font-size: 11px; font-weight: 700;
letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.85);
margin-bottom: 24px;
padding: 8px 16px; background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-pill);
backdrop-filter: blur(8px);
}
.profiles__title {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(36px, 4.5vw, 56px);
font-weight: 700; line-height: 1;
letter-spacing: -.03em; text-transform: uppercase;
color: #fff; margin: 0 0 16px; text-wrap: balance;
}
.profiles__title em { font-style: normal; color: var(--amber); }
.profiles__sub { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.85); margin: 0; }
.profiles__grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.profile-card {
padding: 32px 28px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.18);
border-radius: 18px;
backdrop-filter: blur(8px);
transition: all var(--transition);
}
.profile-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.12); }
.profile-card__icon {
width: 44px; height: 44px; border-radius: 12px;
background: var(--amber);
display: flex; align-items: center; justify-content: center;
color: #0A2E2A;
margin-bottom: 16px;
}
.profile-card__label {
font-family: 'Josefin Sans', sans-serif; font-size: 10px;
font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: rgba(255,255,255,.65); margin-bottom: 6px;
}
.profile-card__title {
font-family: 'Josefin Sans', sans-serif;
font-size: 22px; font-weight: 700; line-height: 1.1;
letter-spacing: -.01em; color: #fff; margin: 0 0 12px;
}
.profile-card__body { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.78); margin: 0; }
.profile-card__body strong { color: #fff; font-weight: 600; }
/* ── RHYTHM ROW (with split) ── */
.rhythm-split {
display: grid; grid-template-columns: 1fr 1fr;
gap: 48px; margin: 0;
align-items: stretch;
}
.rhythm-split__media {
position: relative;
min-height: 560px;
background: var(--bg-dark-2);
border-radius: 20px;
overflow: hidden;
}
.rhythm-split__media image-slot { width: 100%; height: 100%; display: block; }
.rhythm-split__content {
padding: 80px 64px; background: var(--bg-page);
display: flex; flex-direction: column; justify-content: center;
}
.rhythm-split__eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--teal); margin-bottom: 16px;
}
.rhythm-split__title {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(32px, 3.5vw, 48px); font-weight: 700;
line-height: 1; letter-spacing: -.02em; text-transform: uppercase;
color: var(--text-primary); margin: 0 0 16px; text-wrap: balance;
}
.rhythm-split__title em { font-style: normal; color: var(--teal); }
.rhythm-split__title span { color: var(--amber); }
.rhythm-split__body { font-size: 16px; line-height: 1.7; color: var(--muted-on-dark); margin: 0 0 32px; }
[data-theme="light"] .rhythm-split__body { color: var(--muted-on-light); }
.rhythm-split__body strong { color: var(--text-primary); font-weight: 600; }
.rhythm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px; }
.rhythm-stat {
padding: 22px;
background: rgba(76,204,184,.06);
border: 1px solid rgba(76,204,184,.2);
border-radius: 14px;
}
[data-theme="light"] .rhythm-stat { background: rgba(76,204,184,.08); border-color: rgba(76,204,184,.25); }
.rhythm-stat__icon { font-size: 20px; margin-bottom: 10px; line-height: 1; }
.rhythm-stat__num {
font-family: 'Josefin Sans', sans-serif;
font-size: 32px; font-weight: 700; line-height: 1;
letter-spacing: -.02em; color: var(--teal);
margin-bottom: 6px;
}
.rhythm-stat__label {
font-family: 'Josefin Sans', sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--text-primary);
}
.rhythm-stat__desc {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.55;
color: var(--muted-on-light);
}
.rhythm-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.rhythm-list li {
display: flex; align-items: flex-start; gap: 14px;
font-size: 15px; color: var(--text-primary); line-height: 1.5;
}
.rhythm-list li strong { font-weight: 600; }
.rhythm-list li::before {
content: ''; flex-shrink: 0;
width: 22px; height: 22px; border-radius: 50%;
background: var(--teal); margin-top: 1px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 14px; background-position: center; background-repeat: no-repeat;
}
/* ── STEPS ── */
.steps {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
background: var(--border-dark);
}
[data-theme="light"] .steps { background: var(--border-light); }
.step {
background: var(--bg-dark); padding: 44px 32px;
display: flex; flex-direction: column; gap: 14px;
position: relative;
transition: background var(--transition);
}
[data-theme="light"] .step { background: #fff; }
.step:hover { background: var(--bg-dark-2); }
[data-theme="light"] .step:hover { background: var(--bg-light); }
.step__top { display: flex; align-items: center; justify-content: space-between; }
.step__num {
font-family: 'Josefin Sans', sans-serif;
font-size: 52px; font-weight: 700; line-height: .9;
letter-spacing: -.04em; color: var(--teal); opacity: .4;
}
.step__icon {
width: 44px; height: 44px; border-radius: 12px;
background: color-mix(in oklab, var(--teal) 12%, transparent);
display: flex; align-items: center; justify-content: center;
color: var(--teal);
}
.step__title {
font-family: 'Josefin Sans', sans-serif;
font-size: 22px; font-weight: 700; line-height: 1.1;
letter-spacing: -.01em; color: var(--text-primary); margin: 0;
}
.step__body { font-size: 14px; line-height: 1.6; color: var(--muted-on-dark); margin: 0; }
[data-theme="light"] .step__body { color: var(--muted-on-light); }
.step__body strong { color: var(--text-primary); font-weight: 600; }
/* ── BENEFITS PILLARS ── */
.benefits-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2px;
background: var(--border-dark);
}
[data-theme="light"] .benefits-grid { background: var(--border-light); }
.benefit {
background: var(--bg-dark);
padding: 40px 28px;
display: flex; flex-direction: column; gap: 14px;
border-top: 3px solid var(--pole, var(--teal));
transition: background var(--transition);
}
[data-theme="light"] .benefit { background: #fff; }
.benefit:hover { background: var(--bg-dark-2); }
[data-theme="light"] .benefit:hover { background: var(--bg-light); }
.benefit[data-pole="tech"] { --pole: var(--pole-tech); }
.benefit[data-pole="graph"] { --pole: var(--pole-graph); }
.benefit[data-pole="amber"] { --pole: var(--amber); }
.benefit[data-pole="elec"] { --pole: var(--pole-elec); }
.benefit[data-pole="com"] { --pole: var(--pole-com); }
.benefit__icon {
width: 48px; height: 48px; border-radius: 12px;
background: color-mix(in oklab, var(--pole, var(--teal)) 14%, transparent);
display: flex; align-items: center; justify-content: center;
color: var(--pole, var(--teal));
}
.benefit__title {
font-family: 'Josefin Sans', sans-serif;
font-size: 18px; font-weight: 700; line-height: 1.15;
letter-spacing: -.01em; color: var(--text-primary); margin: 0;
}
.benefit__body { font-size: 13px; line-height: 1.55; color: var(--muted-on-dark); margin: 0; }
[data-theme="light"] .benefit__body { color: var(--muted-on-light); }
.benefit__body strong { color: var(--text-primary); font-weight: 600; }
/* ── FINAL CTA ── */
.final-cta {
background: linear-gradient(135deg, #0A2E2A 0%, #1C7269 70%, #2E9988 100%);
padding: 100px 0; position: relative; overflow: hidden; text-align: center;
}
.final-cta::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse 60% 70% at 50% 20%, rgba(253,161,0,.18) 0%, transparent 60%),
radial-gradient(ellipse 50% 60% at 50% 100%, rgba(76,204,184,.3) 0%, transparent 60%);
pointer-events: none;
}
.final-cta__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.final-cta__eyebrow {
font-family: 'Josefin Sans', sans-serif; font-size: 11px; font-weight: 700;
letter-spacing: .22em; text-transform: uppercase;
color: var(--amber); margin-bottom: 20px;
}
.final-cta__title {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(40px, 5.5vw, 80px);
font-weight: 700; line-height: .98;
letter-spacing: -.03em; text-transform: uppercase;
color: #fff; margin: 0 0 24px; text-wrap: balance;
}
.final-cta__title em { font-style: normal; color: var(--amber); }
.final-cta__sub {
font-size: 18px; line-height: 1.6;
color: rgba(255,255,255,.85); margin: 0 0 36px;
}
.final-cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.final-cta__entreprise {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,.15);
font-size: 14px;
color: rgba(255,255,255,.7);
}
.final-cta__entreprise a {
color: var(--amber); font-weight: 700;
text-decoration: underline; text-underline-offset: 4px;
}
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
.alt-intro__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.alt-intro__grid > *,
.alt-intro__media,
.alt-intro__media img {
min-width: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.motivations { grid-template-columns: repeat(2, 1fr); }
.motivation:nth-child(2) { border-right: none; }
.motivation:nth-child(1), .motivation:nth-child(2) { border-bottom: 1px solid var(--border-dark); }
.profiles__grid { grid-template-columns: 1fr; }
.rhythm-split { grid-template-columns: 1fr; margin: 0; }
.rhythm-split__media { min-height: 320px; }
.rhythm-split__content { padding: 56px 32px; }
.steps { grid-template-columns: repeat(2, 1fr); gap: 1px; }
.benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 1px; }
}
@media (max-width: 640px) {
.motivations { grid-template-columns: 1fr; }
.motivation { border-right: none; border-bottom: 1px solid var(--border-dark); }
.motivation:last-child { border-bottom: none; }
.steps { grid-template-columns: 1fr; }
.benefits-grid { grid-template-columns: 1fr; }
.rhythm-stats { grid-template-columns: 1fr; }
}
/* === recruter-alternant.html === */
/* ── INTRO ── */
.rec-intro { padding: 100px 0 80px; background: var(--bg-page); border-bottom: 1px solid var(--border-dark); }
[data-theme="light"] .rec-intro { border-color: var(--border-light); }
.rec-intro__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; }
.rec-intro__eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 700; letter-spacing: .22em;
text-transform: uppercase; color: var(--amber);
margin-bottom: 20px;
}
.rec-intro__eyebrow::before {
content: ''; width: 8px; height: 8px; border-radius: 50%;
background: var(--amber);
}
.rec-intro__title {
font-family: 'Josefin Sans', sans-serif; font-size: clamp(40px, 5.5vw, 72px);
font-weight: 700; line-height: .98; letter-spacing: -.03em; text-transform: uppercase;
color: var(--text-primary); margin: 0 0 28px; text-wrap: balance;
}
.rec-intro__title em { color: var(--teal); font-style: normal; }
.rec-intro__title span { color: var(--amber); }
.rec-intro__lead { font-size: 18px; line-height: 1.7; color: var(--muted-on-dark); }
[data-theme="light"] .rec-intro__lead { color: var(--muted-on-light); }
.rec-intro__lead strong { color: var(--text-primary); font-weight: 600; }
.rec-intro__media { position: relative; min-height: 480px; border-radius: 20px; overflow: hidden; }
.rec-intro__media image-slot { width: 100%; height: 100%; display: block; }
/* ── REASONS ── */
.reasons-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
background: var(--border-dark);
}
[data-theme="light"] .reasons-grid { background: var(--border-light); }
.reason {
background: var(--bg-dark); padding: 48px 40px;
display: grid; grid-template-columns: 56px 1fr; gap: 22px;
align-items: start;
transition: background var(--transition);
}
[data-theme="light"] .reason { background: #fff; }
.reason:hover { background: var(--bg-dark-2); }
[data-theme="light"] .reason:hover { background: var(--bg-light); }
.reason__icon {
width: 56px; height: 56px; border-radius: 14px;
background: color-mix(in oklab, var(--pole, var(--teal)) 14%, transparent);
display: flex; align-items: center; justify-content: center;
color: var(--pole, var(--teal));
}
.reason[data-pole="tech"] { --pole: var(--pole-tech); }
.reason[data-pole="graph"] { --pole: var(--pole-graph); }
.reason[data-pole="amber"] { --pole: var(--amber); }
.reason[data-pole="elec"] { --pole: var(--pole-elec); }
.reason__title {
font-family: 'Josefin Sans', sans-serif;
font-size: 22px; font-weight: 700; line-height: 1.15;
letter-spacing: -.01em; color: var(--text-primary);
margin: 0 0 10px;
}
.reason__body { font-size: 15px; line-height: 1.65; color: var(--muted-on-dark); margin: 0; }
[data-theme="light"] .reason__body { color: var(--muted-on-light); }
.reason__body strong { color: var(--text-primary); font-weight: 600; }
/* ── ADVANTAGES BANNER (teal gradient) ── */
.adv {
background: linear-gradient(135deg, #0A2E2A 0%, #1C7269 50%, #2E9988 100%);
padding: 100px 0; position: relative; overflow: hidden;
}
.adv::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse 50% 70% at 90% 30%, rgba(76,204,184,.35) 0%, transparent 60%),
radial-gradient(ellipse 40% 60% at 10% 100%, rgba(253,161,0,.18) 0%, transparent 60%);
pointer-events: none;
}
.adv__inner { position: relative; z-index: 1; }
.adv__head { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-bottom: 56px; }
.adv__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'Josefin Sans', sans-serif; font-size: 11px; font-weight: 700;
letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.85);
margin-bottom: 24px;
padding: 8px 16px; background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-pill);
backdrop-filter: blur(8px);
}
.adv__title {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(40px, 5vw, 64px);
font-weight: 700; line-height: 1;
letter-spacing: -.03em; text-transform: uppercase;
color: #fff; margin: 0 0 16px; text-wrap: balance;
max-width: 760px;
}
.adv__title em { font-style: normal; color: var(--amber); }
.adv__sub { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.85); margin: 0; max-width: 360px; }
.adv__grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.adv-card {
padding: 32px 28px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.18);
border-radius: 18px;
backdrop-filter: blur(8px);
transition: all var(--transition);
}
.adv-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.12); }
.adv-card__icon {
width: 44px; height: 44px; border-radius: 12px;
background: var(--amber);
display: flex; align-items: center; justify-content: center;
color: #0A2E2A;
margin-bottom: 16px;
}
.adv-card__num {
font-family: 'Josefin Sans', sans-serif;
font-size: 11px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: rgba(255,255,255,.6);
margin-bottom: 6px;
}
.adv-card__title {
font-family: 'Josefin Sans', sans-serif;
font-size: 20px; font-weight: 700; line-height: 1.1;
letter-spacing: -.01em; color: #fff;
margin: 0 0 10px;
}
.adv-card__body { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.78); margin: 0; }
.adv-card__body strong { color: #fff; font-weight: 600; }
/* ── PROFILE SPLIT ── */
.profile-split {
display: grid; grid-template-columns: 1fr 1fr;
gap: 48px; margin: 0;
align-items: stretch;
}
.profile-split__media {
position: relative;
min-height: 580px;
background: var(--bg-dark-2);
border-radius: 20px;
overflow: hidden;
}
.profile-split__media image-slot { width: 100%; height: 100%; display: block; }
.profile-split__content {
padding: 80px 64px; background: var(--bg-page);
display: flex; flex-direction: column; justify-content: center;
}
.profile-split__eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--teal); margin-bottom: 16px;
}
.profile-split__title {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(32px, 3.8vw, 52px); font-weight: 700;
line-height: 1; letter-spacing: -.02em; text-transform: uppercase;
color: var(--text-primary); margin: 0 0 20px; text-wrap: balance;
}
.profile-split__title em { font-style: normal; color: var(--teal); }
.profile-split__title span { color: var(--amber); }
.profile-split__body { font-size: 16px; line-height: 1.7; color: var(--muted-on-dark); margin: 0 0 28px; }
[data-theme="light"] .profile-split__body { color: var(--muted-on-light); }
.profile-split__body strong { color: var(--text-primary); font-weight: 600; }
.qualities { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.quality {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px;
background: rgba(76,204,184,.08);
border: 1px solid rgba(76,204,184,.25);
border-radius: var(--r-pill);
font-family: 'Josefin Sans', sans-serif;
font-size: 13px; font-weight: 700;
letter-spacing: .04em;
color: var(--teal);
transition: all var(--transition);
}
.quality:hover { background: rgba(76,204,184,.15); transform: translateY(-2px); }
.quality::before {
content: '✓'; font-family: 'Josefin Sans', sans-serif;
font-size: 12px; font-weight: 700;
}
/* ── DOMAINS GRID ── */
.domains-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
background: var(--border-dark);
}
[data-theme="light"] .domains-grid { background: var(--border-light); }
.domain {
background: var(--bg-dark); padding: 44px 32px;
border-top: 3px solid var(--pole, var(--teal));
display: flex; flex-direction: column; gap: 14px;
transition: background var(--transition);
cursor: pointer;
}
[data-theme="light"] .domain { background: #fff; }
.domain:hover { background: var(--bg-dark-2); }
[data-theme="light"] .domain:hover { background: var(--bg-light); }
.domain[data-pole="tech"] { --pole: var(--pole-tech); }
.domain[data-pole="graph"] { --pole: var(--pole-graph); }
.domain[data-pole="amber"] { --pole: var(--amber); }
.domain[data-pole="com"] { --pole: var(--pole-com); }
.domain__icon {
width: 56px; height: 56px; border-radius: 14px;
background: color-mix(in oklab, var(--pole, var(--teal)) 14%, transparent);
display: flex; align-items: center; justify-content: center;
color: var(--pole, var(--teal));
}
.domain__title {
font-family: 'Josefin Sans', sans-serif;
font-size: 20px; font-weight: 700; line-height: 1.1;
letter-spacing: -.01em; color: var(--text-primary);
margin: 0;
}
.domain__roles {
font-size: 13px; line-height: 1.6;
color: var(--muted-on-dark); margin: 0;
}
[data-theme="light"] .domain__roles { color: var(--muted-on-light); }
.domain__cta {
margin-top: auto;
display: inline-flex; align-items: center; gap: 8px;
padding-top: 14px;
font-family: 'Josefin Sans', sans-serif;
font-size: 12px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
color: var(--pole, var(--teal));
}
/* ── PROCESS STEPS ── */
.process {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
.process-step {
position: relative;
padding: 32px 28px;
background: var(--bg-dark);
border: 1px solid var(--border-dark);
border-radius: 18px;
display: flex; flex-direction: column; gap: 12px;
}
[data-theme="light"] .process-step { background: #fff; border-color: var(--border-light); }
.process-step__num {
font-family: 'Josefin Sans', sans-serif;
font-size: 16px; font-weight: 700;
letter-spacing: .14em; color: var(--amber);
}
.process-step__title {
font-family: 'Josefin Sans', sans-serif;
font-size: 22px; font-weight: 700; line-height: 1.1;
letter-spacing: -.01em; color: var(--text-primary);
margin: 0;
}
.process-step__body { font-size: 14px; line-height: 1.6; color: var(--muted-on-dark); margin: 0; }
[data-theme="light"] .process-step__body { color: var(--muted-on-light); }
/* ── FINAL CTA (entreprise) ── */
.final-cta {
background: linear-gradient(135deg, #0A2E2A 0%, #1C7269 70%, #2E9988 100%);
padding: 100px 0; position: relative; overflow: hidden; text-align: center;
}
.final-cta::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse 60% 70% at 50% 20%, rgba(253,161,0,.18) 0%, transparent 60%),
radial-gradient(ellipse 50% 60% at 50% 100%, rgba(76,204,184,.3) 0%, transparent 60%);
pointer-events: none;
}
.final-cta__inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.final-cta__eyebrow {
font-family: 'Josefin Sans', sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: .22em; text-transform: uppercase;
color: var(--amber); margin-bottom: 20px;
}
.final-cta__title {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(40px, 5.5vw, 80px);
font-weight: 700; line-height: .98;
letter-spacing: -.03em; text-transform: uppercase;
color: #fff; margin: 0 0 24px; text-wrap: balance;
}
.final-cta__title em { font-style: normal; color: var(--amber); }
.final-cta__sub {
font-size: 18px; line-height: 1.6;
color: rgba(255,255,255,.85); margin: 0 0 36px;
}
.final-cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
.rec-intro__grid { grid-template-columns: 1fr; gap: 40px; }
.reasons-grid { grid-template-columns: 1fr; gap: 1px; }
.adv__head { grid-template-columns: 1fr; }
.adv__grid { grid-template-columns: repeat(2, 1fr); }
.profile-split { grid-template-columns: 1fr; margin: 0; }
.profile-split__media { min-height: 320px; }
.profile-split__content { padding: 56px 32px; }
.domains-grid { grid-template-columns: repeat(2, 1fr); gap: 1px; }
.process { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.adv__grid { grid-template-columns: 1fr; }
.domains-grid { grid-template-columns: 1fr; }
.reason { padding: 32px 28px; }
}
/* === accompagnement-personnalise.html === */
/* ── INTRO MANIFESTO ── */
.ap-intro { padding: 100px 0 70px; background: var(--bg-page); border-bottom: 1px solid var(--border-dark); }
[data-theme="light"] .ap-intro { border-color: var(--border-light); }
.ap-intro__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; }
.ap-intro__title {
font-family: 'Josefin Sans', sans-serif; font-size: clamp(40px, 5vw, 64px);
font-weight: 700; line-height: .98; letter-spacing: -.03em; text-transform: uppercase;
color: var(--text-primary); margin: 0 0 24px; text-wrap: balance;
}
.ap-intro__title em { color: var(--teal); font-style: normal; }
.ap-intro__title span { color: var(--amber); }
.ap-intro__lead { font-size: 18px; line-height: 1.7; color: var(--muted-on-dark); }
[data-theme="light"] .ap-intro__lead { color: var(--muted-on-light); }
.ap-intro__lead strong { color: var(--text-primary); font-weight: 600; }
.ap-intro__actions,
.alt-intro__actions,
.rec-intro__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 30px;
}
.ap-intro__media { position: relative; min-height: 380px; border-radius: 20px; overflow: hidden; }
.ap-intro__media image-slot { width: 100%; height: 100%; display: block; }
/* ── PHASES STRIP (Avant / Pendant / Après) ── */
.phases {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
position: relative;
border-top: 1px solid var(--border-dark);
border-bottom: 1px solid var(--border-dark);
}
[data-theme="light"] .phases { border-color: var(--border-light); }
.phase {
padding: 56px 40px 48px;
border-right: 1px solid var(--border-dark);
display: flex; flex-direction: column; gap: 18px;
position: relative;
transition: background var(--transition);
}
[data-theme="light"] .phase { border-color: var(--border-light); }
.phase:last-child { border-right: none; }
.phase[data-step="avant"] { --pole: var(--pole-tech); }
.phase[data-step="pendant"] { --pole: var(--teal); }
.phase[data-step="apres"] { --pole: var(--amber); }
.phase::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 3px; background: var(--pole);
}
.phase__step {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Josefin Sans', sans-serif;
font-size: 11px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--pole);
}
.phase__step::before {
content: ''; width: 8px; height: 8px; border-radius: 50%;
background: var(--pole);
box-shadow: 0 0 12px var(--pole);
}
.phase__title {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(22px, 2.2vw, 28px);
font-weight: 700; line-height: 1.05;
letter-spacing: -.01em; color: var(--text-primary);
margin: 0;
}
.phase__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.phase__item { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.phase__icon {
width: 44px; height: 44px;
border-radius: 12px;
background: color-mix(in oklab, var(--pole) 14%, transparent);
display: flex; align-items: center; justify-content: center;
color: var(--pole);
flex-shrink: 0;
}
.phase__item-title {
font-family: 'Josefin Sans', sans-serif;
font-size: 14px; font-weight: 700; color: var(--text-primary);
margin: 2px 0 4px;
letter-spacing: -.005em;
}
.phase__item-body { font-size: 13px; line-height: 1.55; color: var(--muted-on-dark); margin: 0; }
[data-theme="light"] .phase__item-body { color: var(--muted-on-light); }
.phase__item-body strong { color: var(--text-primary); font-weight: 600; }
/* ── PROMISE / SUMMARY ── */
.summary {
background: linear-gradient(135deg, #0A2E2A 0%, #1C7269 45%, #2E9988 75%, #4CCCB8 100%);
padding: 100px 0; position: relative; overflow: hidden;
}
.summary::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse 50% 70% at 90% 30%, rgba(76,204,184,.35) 0%, transparent 60%),
radial-gradient(ellipse 40% 60% at 10% 100%, rgba(253,161,0,.15) 0%, transparent 60%);
pointer-events: none;
}
.summary__inner { position: relative; z-index: 1; }
.summary__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'Josefin Sans', sans-serif; font-size: 11px; font-weight: 700;
letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.85);
margin-bottom: 24px;
padding: 8px 16px; background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-pill);
backdrop-filter: blur(8px);
}
.summary__title {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(40px, 5vw, 64px);
font-weight: 700; line-height: 1;
letter-spacing: -.03em; text-transform: uppercase;
color: #fff; margin: 0 0 22px; text-wrap: balance;
max-width: 800px;
}
.summary__title em { font-style: normal; color: var(--amber); }
.summary__intro {
max-width: 760px;
margin: 0 0 48px;
color: rgba(255,255,255,.78);
font-size: 16px;
line-height: 1.6;
}
.summary__grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.summary-card {
min-height: 230px;
padding: 28px 26px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.15);
border-radius: 16px;
backdrop-filter: blur(8px);
transition: all var(--transition);
display: flex;
flex-direction: column;
}
.summary-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.1); }
.summary-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 20px;
}
.summary-card__label {
color: rgba(255,255,255,.72);
font-family: 'Josefin Sans', sans-serif;
font-size: 18px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
flex: 0 0 auto;
line-height: 1;
}
.summary-card__icon {
width: 36px; height: 36px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.9);
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.18);
flex: 0 0 auto;
}
.summary-card__title {
font-family: 'Josefin Sans', sans-serif;
font-size: 22px; font-weight: 700; line-height: 1;
color: #fff;
}
.summary-card__title em { font-style: normal; color: var(--amber); }
.summary-card__body {
margin: 14px 0 0;
color: rgba(255,255,255,.78);
font-size: 13px;
line-height: 1.55;
max-width: 34em;
}
/* ── COACHING SECTION ── */
.coaching-split {
display: grid; grid-template-columns: 1fr 1fr;
gap: 48px; margin: 0;
align-items: stretch;
}
.coaching-split--reverse { grid-template-columns: 1fr 1fr; }
.coaching-split--reverse .coaching-split__media { order: 2; }
.coaching-split--reverse .coaching-split__content { order: 1; }
.coaching-split__media {
position: relative;
min-height: 520px;
margin-block: clamp(20px, 2.2vw, 34px);
background: var(--bg-dark-2);
border-radius: 20px;
overflow: hidden;
}
.coaching-split__media image-slot { width: 100%; height: 100%; display: block; }
.coaching-split__content {
padding: 80px 64px; background: var(--bg-page);
display: flex; flex-direction: column; justify-content: center;
}
.coaching-split__eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--amber); margin-bottom: 16px;
}
.coaching-split__title {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(32px, 3.5vw, 48px); font-weight: 700;
line-height: 1; letter-spacing: -.02em; text-transform: uppercase;
color: var(--text-primary); margin: 0 0 24px; text-wrap: balance;
}
.coaching-split__title em { font-style: normal; color: var(--teal); }
.coaching-split__body { font-size: 16px; line-height: 1.7; color: var(--muted-on-dark); margin: 0 0 28px; }
[data-theme="light"] .coaching-split__body { color: var(--muted-on-light); }
.coaching-split__body strong { color: var(--text-primary); font-weight: 600; }
.split-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.split-list li {
display: flex; align-items: flex-start; gap: 14px;
font-size: 15px; color: var(--text-primary); line-height: 1.55;
}
.split-list li strong { font-weight: 600; }
.split-list li::before {
content: ''; flex-shrink: 0;
width: 22px; height: 22px; border-radius: 50%;
background: var(--teal); margin-top: 2px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 14px; background-position: center; background-repeat: no-repeat;
}
/* ── RESULTS CARDS ── */
.results-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
background: var(--border-dark);
}
[data-theme="light"] .results-grid { background: var(--border-light); }
.result-card {
background: var(--bg-dark); padding: 44px 36px;
display: flex; flex-direction: column; gap: 16px;
position: relative;
border-top: 3px solid var(--teal);
transition: background var(--transition);
}
[data-theme="light"] .result-card { background: #fff; }
.result-card:hover { background: var(--bg-dark-2); }
[data-theme="light"] .result-card:hover { background: var(--bg-light); }
.result-card__icon {
width: 56px; height: 56px;
border-radius: 14px;
background: rgba(76,204,184,.12);
display: flex; align-items: center; justify-content: center;
color: var(--teal);
}
.result-card__title {
font-family: 'Josefin Sans', sans-serif;
font-size: 22px; font-weight: 700; line-height: 1.1;
letter-spacing: -.01em; color: var(--text-primary);
margin: 0;
}
.result-card__body { font-size: 14px; line-height: 1.65; color: var(--muted-on-dark); margin: 0; }
[data-theme="light"] .result-card__body { color: var(--muted-on-light); }
/* ── RESOURCES GRID ── */
.resources-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.resource {
padding: 32px;
background: var(--bg-dark);
border: 1px solid var(--border-dark);
border-radius: 16px;
display: grid; grid-template-columns: 48px 1fr; gap: 20px;
align-items: start;
transition: all var(--transition);
}
[data-theme="light"] .resource { background: #fff; border-color: var(--border-light); }
.resource:hover { transform: translateY(-2px); border-color: var(--pole, var(--teal)); }
.resource[data-pole="tech"] { --pole: var(--pole-tech); }
.resource[data-pole="graph"] { --pole: var(--pole-graph); }
.resource[data-pole="com"] { --pole: var(--pole-com); }
.resource[data-pole="elec"] { --pole: var(--pole-elec); }
.resource__icon {
width: 48px; height: 48px;
border-radius: 12px;
background: color-mix(in oklab, var(--pole, var(--teal)) 12%, transparent);
display: flex; align-items: center; justify-content: center;
color: var(--pole, var(--teal));
}
.resource__title {
font-family: 'Josefin Sans', sans-serif;
font-size: 18px; font-weight: 700; line-height: 1.15;
letter-spacing: -.01em; color: var(--text-primary);
margin: 0 0 8px;
}
.resource__body { font-size: 14px; line-height: 1.6; color: var(--muted-on-dark); margin: 0; }
[data-theme="light"] .resource__body { color: var(--muted-on-light); }
/* ── FINAL BIG CTA ── */
.final-cta {
background: linear-gradient(135deg, #0A2E2A 0%, #1C7269 70%, #2E9988 100%);
padding: 100px 0; position: relative; overflow: hidden;
text-align: center;
}
.final-cta::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse 60% 70% at 50% 20%, rgba(253,161,0,.18) 0%, transparent 60%),
radial-gradient(ellipse 50% 60% at 50% 100%, rgba(76,204,184,.3) 0%, transparent 60%);
pointer-events: none;
}
.final-cta__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.final-cta__eyebrow {
font-family: 'Josefin Sans', sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: .22em; text-transform: uppercase;
color: var(--amber);
margin-bottom: 20px;
}
.final-cta__title {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(40px, 5.5vw, 72px);
font-weight: 700; line-height: .98;
letter-spacing: -.03em; text-transform: uppercase;
color: #fff; margin: 0 0 24px; text-wrap: balance;
}
.final-cta__title em { font-style: normal; color: var(--amber); }
.final-cta__sub {
font-size: 18px; line-height: 1.6;
color: rgba(255,255,255,.85); margin: 0 0 36px;
}
.final-cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
.ap-intro__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.ap-intro__grid > *,
.ap-intro__media,
.ap-intro__media img {
min-width: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.phases { grid-template-columns: 1fr; }
.phase { border-right: none; border-bottom: 1px solid var(--border-dark); }
.phase:last-child { border-bottom: none; }
.summary__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.summary-card:nth-last-child(-n+2) { grid-column: span 1; }
.coaching-split { grid-template-columns: 1fr; margin: 0; }
.coaching-split--reverse .coaching-split__media { order: 1; }
.coaching-split--reverse .coaching-split__content { order: 2; }
.coaching-split__media { min-height: 320px; margin-block: 20px; }
.coaching-split__content { padding: 56px 32px; }
.results-grid { grid-template-columns: 1fr; gap: 1px; }
.resources-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.summary__grid { grid-template-columns: 1fr; }
.resource { grid-template-columns: 1fr; }
}
/* === Astro migration helpers === */
.btn--ghost-teal {
background: transparent;
color: var(--teal);
border: 1.5px solid rgba(76,204,184,.35);
padding: 13px 28px;
}
.btn--ghost-teal:hover {
background: rgba(76,204,184,.08);
}
.btn--ghost-white {
background: transparent;
color: #fff;
border: 1.5px solid rgba(255,255,255,.34);
padding: 17px 34px;
}
.btn--ghost-white:hover {
background: rgba(255,255,255,.08);
}
html[data-theme] body[data-screen-label] .btn--teal {
color: #080F0E;
}
html[data-theme] body[data-screen-label] .btn--amber {
color: #071615;
}
html[data-theme] body[data-screen-label] .btn--dark {
color: #fff;
}
html[data-theme="light"] body[data-screen-label] .btn--ghost-white {
color: var(--text-body);
border-color: rgba(26,40,39,.3);
}
html[data-theme="light"] body[data-screen-label] .btn--ghost-white:hover {
background: rgba(26,40,39,.06);
border-color: rgba(26,40,39,.5);
}
html[data-theme] body[data-screen-label] :is(
.final-cta,
.faq-cta,
.faq-cta-banner,
.formations-cta,
.entreprise-cta,
.review-cta
) .btn--ghost-white {
color: #fff;
border-color: rgba(255,255,255,.34);
}
html[data-theme] body[data-screen-label] :is(
.final-cta,
.faq-cta,
.faq-cta-banner,
.formations-cta,
.entreprise-cta,
.review-cta
) .btn--ghost-white:hover {
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.6);
}
html[data-theme] body[data-screen-label] .btn--ghost-teal {
color: var(--teal);
}
html[data-theme="light"] body[data-screen-label] .formations .btn--ghost-teal {
color: var(--teal-dark);
border-color: var(--teal-dark);
}
html[data-theme] body[data-screen-label] .btn--ghost-dark {
color: #071615;
}
.claude-mt-18 {
margin-top: 18px;
}
.claude-flush {
padding: 0;
}
.claude-dark {
background: var(--bg-dark);
}
.claude-page .container--flush {
padding: 0;
}
.fsection__eyebrow--amber {
color: var(--amber);
}
.fsection__intro {
font-size: 17px;
line-height: 1.65;
color: var(--muted-on-dark);
margin: 0 0 40px;
}
[data-theme="light"] .fsection__intro {
color: var(--muted-on-light);
}
.fsection__intro strong {
color: var(--text-primary);
font-weight: 600;
}
/* === experience-acadenice.html === */
.xp-intro { padding: 100px 0 80px; background: var(--bg-page); border-bottom: 1px solid var(--border-dark); }
[data-theme="light"] .xp-intro { border-color: var(--border-light); }
.xp-intro__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; }
.xp-intro__title {
font-family: 'Josefin Sans', sans-serif; font-size: clamp(40px, 5vw, 64px);
font-weight: 700; line-height: .98; letter-spacing: -.03em; text-transform: uppercase;
color: var(--text-primary); margin: 0 0 24px; text-wrap: balance;
}
.xp-intro__title em { color: var(--teal); font-style: normal; }
.xp-intro__title span { color: var(--amber); }
.xp-intro__lead { font-size: 18px; line-height: 1.7; color: var(--muted-on-dark); margin: 0; }
[data-theme="light"] .xp-intro__lead { color: var(--muted-on-light); }
.xp-intro__lead strong { color: var(--text-primary); font-weight: 600; }
.xp-intro__media { position: relative; min-height: 420px; border-radius: 20px; overflow: hidden; }
.xp-intro__media image-slot { width: 100%; height: 100%; display: block; }
.callout-10 {
background: linear-gradient(135deg, #0A2E2A 0%, #1C7269 45%, #2E9988 75%, #4CCCB8 100%);
padding: 120px 0; position: relative; overflow: hidden;
}
.callout-10::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse 50% 70% at 90% 30%, rgba(76,204,184,.35) 0%, transparent 60%),
radial-gradient(ellipse 40% 60% at 10% 100%, rgba(253,161,0,.18) 0%, transparent 60%);
pointer-events: none;
}
.callout-10__inner {
position: relative; z-index: 1;
display: grid; grid-template-columns: auto 1fr; gap: 80px;
align-items: center;
}
.callout-10__num {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(180px, 24vw, 360px);
font-weight: 700; line-height: .8;
letter-spacing: -.06em; color: #fff;
position: relative;
}
.callout-10__num::after {
content: attr(data-suffix); position: absolute;
bottom: 22px; right: -40px;
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(20px, 1.6vw, 28px);
font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--amber);
padding: 6px 12px;
background: rgba(0,0,0,.25);
border-radius: var(--r-pill);
transform: rotate(-8deg);
}
.callout-10__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'Josefin Sans', sans-serif; font-size: 11px; font-weight: 700;
letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.85);
margin-bottom: 24px;
padding: 8px 16px; background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-pill);
backdrop-filter: blur(8px);
}
.callout-10__title {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(36px, 4.5vw, 56px);
font-weight: 700; line-height: 1;
letter-spacing: -.03em; text-transform: uppercase;
color: #fff; margin: 0 0 24px; text-wrap: balance;
}
.callout-10__title em { font-style: normal; color: var(--amber); }
.callout-10__body { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.88); margin: 0 0 28px; max-width: 540px; }
.callout-10__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.callout-10__list li {
display: flex; align-items: flex-start; gap: 12px;
font-size: 16px; color: #fff; line-height: 1.5;
font-weight: 500;
}
.callout-10__list li::before {
content: ''; flex-shrink: 0;
width: 22px; height: 22px; border-radius: 50%;
background: var(--amber); margin-top: 1px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 14px; background-position: center; background-repeat: no-repeat;
}
.xp-split {
display: grid; grid-template-columns: 1fr 1fr;
gap: 48px; margin: 0;
align-items: stretch;
}
.xp-split--reverse .xp-split__media { order: 2; }
.xp-split--reverse .xp-split__content { order: 1; }
.xp-split__media {
position: relative;
min-height: 540px;
background: var(--bg-dark-2);
border-radius: 20px;
overflow: hidden;
}
.xp-split__media image-slot { width: 100%; height: 100%; display: block; }
.xp-split__content {
padding: 80px 64px; background: var(--bg-page);
display: flex; flex-direction: column; justify-content: center;
}
.xp-split--dark .xp-split__content { background: var(--bg-dark); }
[data-theme="light"] .xp-split--dark .xp-split__content { background: var(--bg-mid); }
.xp-split__eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--pole, var(--amber)); margin-bottom: 16px;
}
.xp-split[data-pole="tech"] .xp-split__eyebrow { color: var(--pole-tech); }
.xp-split[data-pole="graph"] .xp-split__eyebrow { color: var(--pole-graph); }
.xp-split[data-pole="amber"] .xp-split__eyebrow { color: var(--amber); }
.xp-split[data-pole="teal"] .xp-split__eyebrow { color: var(--teal); }
.xp-split__title {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(32px, 3.5vw, 48px); font-weight: 700;
line-height: 1; letter-spacing: -.02em; text-transform: uppercase;
color: var(--text-primary); margin: 0 0 20px; text-wrap: balance;
}
.xp-split__title em { font-style: normal; color: var(--teal); }
.xp-split__title span { color: var(--amber); }
.xp-split__body { font-size: 16px; line-height: 1.7; color: var(--muted-on-dark); margin: 0 0 28px; }
[data-theme="light"] .xp-split__body { color: var(--muted-on-light); }
.xp-split__body strong { color: var(--text-primary); font-weight: 600; }
.network-strip {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
background: var(--border-dark);
}
[data-theme="light"] .network-strip { background: var(--border-light); }
.network-card {
background: var(--bg-dark); padding: 56px 36px;
display: flex; flex-direction: column; gap: 16px;
border-top: 3px solid var(--pole, var(--teal));
transition: background var(--transition);
}
[data-theme="light"] .network-card { background: #fff; }
.network-card:hover { background: var(--bg-dark-2); }
[data-theme="light"] .network-card:hover { background: var(--bg-light); }
.network-card[data-pole="tech"] { --pole: var(--pole-tech); }
.network-card[data-pole="graph"] { --pole: var(--pole-graph); }
.network-card[data-pole="amber"] { --pole: var(--amber); }
.network-card__icon {
width: 56px; height: 56px;
border-radius: 14px;
background: color-mix(in oklab, var(--pole, var(--teal)) 14%, transparent);
display: flex; align-items: center; justify-content: center;
color: var(--pole, var(--teal));
}
.network-card__title {
font-family: 'Josefin Sans', sans-serif;
font-size: 22px; font-weight: 700; line-height: 1.1;
letter-spacing: -.01em; color: var(--text-primary);
margin: 0;
}
.network-card__body { font-size: 15px; line-height: 1.6; color: var(--muted-on-dark); margin: 0; }
[data-theme="light"] .network-card__body { color: var(--muted-on-light); }
.network-card__body strong { color: var(--text-primary); font-weight: 600; }
.promo-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
grid-template-rows: 220px 220px;
gap: 16px;
}
.promo-cell {
position: relative;
border-radius: 16px; overflow: hidden;
background: var(--bg-dark-2);
}
.promo-cell image-slot,
.promo-cell__media { width: 100%; height: 100%; display: block; }
.promo-cell__media > image-slot { width: 100%; height: 100%; display: block; }
.promo-cell__overlay {
position: absolute; inset: 0; z-index: 2;
pointer-events: none;
background: linear-gradient(180deg, transparent 50%, rgba(8,15,14,.85) 100%);
display: flex; flex-direction: column; justify-content: flex-end;
padding: 24px;
}
.promo-cell__tag {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Josefin Sans', sans-serif;
font-size: 11px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--amber);
margin-bottom: 8px;
}
.promo-cell__tag::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--amber);
}
.promo-cell__title {
font-family: 'Josefin Sans', sans-serif;
font-size: 18px; font-weight: 700; line-height: 1.15;
letter-spacing: -.01em; color: #fff; margin: 0;
}
.promo-cell--wide { grid-column: span 2; }
/* === outils-methode.html === */
.om-intro {
padding: 100px 0 60px;
background: var(--bg-page);
border-bottom: 1px solid var(--border-dark);
}
[data-theme="light"] .om-intro { border-color: var(--border-light); }
.om-intro__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.om-intro__manifesto {
grid-column: 1;
min-width: 0;
}
.om-intro__manifesto h2 {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(40px, 5vw, 64px);
font-weight: 700;
line-height: .98;
letter-spacing: -.03em;
text-transform: uppercase;
color: var(--text-primary);
margin: 0 0 24px;
text-wrap: balance;
}
.om-intro__manifesto h2 em { color: var(--teal); font-style: normal; }
.om-intro__manifesto h2 span { color: var(--amber); }
.om-intro__lead {
font-size: 18px;
line-height: 1.7;
color: var(--muted-on-dark);
margin: 0;
}
[data-theme="light"] .om-intro__lead { color: var(--muted-on-light); }
.om-intro__lead strong { color: var(--text-primary); font-weight: 600; }
.om-intro__quote {
grid-column: 1;
position: relative;
padding: 36px 36px 36px 48px;
background: var(--bg-dark);
border-left: 3px solid var(--teal);
border-radius: 0 12px 12px 0;
}
[data-theme="light"] .om-intro__quote { background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,.04); }
.om-intro__quote::before {
content: '"';
position: absolute; top: 8px; left: 14px;
font-family: 'Josefin Sans', sans-serif;
font-size: 80px;
font-weight: 700;
color: var(--teal);
opacity: .25;
line-height: 1;
}
.om-intro__quote p {
font-family: 'Josefin Sans', sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 1.35;
color: var(--text-primary);
margin: 0 0 12px;
}
.om-intro__quote cite {
font-style: normal;
font-size: 13px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--muted-on-dark);
}
.om-intro__media {
grid-column: 2;
grid-row: 1 / span 2;
align-self: stretch;
min-height: clamp(280px, 34vw, 460px);
overflow: hidden;
border-radius: 8px;
border: 1px solid var(--border-dark);
background: color-mix(in oklab, var(--teal) 8%, var(--bg-dark));
}
[data-theme="light"] .om-intro__media {
border-color: var(--border-light);
background: color-mix(in oklab, var(--teal) 6%, #fff);
}
.method-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2px;
background: var(--border-dark);
}
[data-theme="light"] .method-grid { background: var(--border-light); }
.method-card {
background: var(--bg-dark);
padding: 44px 36px;
display: flex; flex-direction: column; gap: 14px;
position: relative;
transition: background var(--transition);
}
[data-theme="light"] .method-card { background: #fff; }
.method-card:hover { background: var(--bg-dark-2); }
[data-theme="light"] .method-card:hover { background: var(--bg-light); }
.method-card__num {
font-family: 'Josefin Sans', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: .14em;
color: var(--teal);
}
.method-card__title {
font-family: 'Josefin Sans', sans-serif;
font-size: 26px;
font-weight: 700;
line-height: 1.05;
letter-spacing: -.01em;
color: var(--text-primary);
margin: 0;
}
.method-card__body {
font-size: 15px;
line-height: 1.65;
color: var(--muted-on-dark);
margin: 0;
}
[data-theme="light"] .method-card__body { color: var(--muted-on-light); }
.method-card__body strong { color: var(--text-primary); font-weight: 600; }
.tools-tabs {
display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px;
}
.tools-tab {
padding: 10px 18px;
background: transparent;
border: 1px solid var(--border-dark);
border-radius: var(--r-pill);
font-family: 'Josefin Sans', sans-serif;
font-size: 12px; font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted-on-dark);
cursor: pointer;
transition: all var(--transition);
}
[data-theme="light"] .tools-tab { border-color: var(--border-light); color: var(--muted-on-light); }
.tools-tab:hover { border-color: var(--pole, var(--teal)); color: var(--pole, var(--teal)); }
.tools-tab.is-active {
background: var(--pole, var(--teal));
color: #0A2E2A;
border-color: var(--pole, var(--teal));
}
.tools-tab[data-cat="dev"] { --pole: var(--pole-tech); }
.tools-tab[data-cat="design"] { --pole: var(--pole-graph); }
.tools-tab[data-cat="collab"] { --pole: var(--amber); }
.tools-tab[data-cat="learn"] { --pole: var(--pole-elec); }
.tools-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.tool-card {
position: relative;
padding: 28px 24px 24px;
background: var(--bg-dark);
border: 1px solid var(--border-dark);
border-radius: 14px;
display: flex; flex-direction: column; gap: 10px;
transition: all var(--transition);
}
[data-theme="light"] .tool-card { background: #fff; border-color: var(--border-light); }
.tool-card:hover {
transform: translateY(-3px);
border-color: var(--pole, var(--teal));
box-shadow: 0 8px 28px color-mix(in oklab, var(--pole, var(--teal)) 20%, transparent);
}
.tool-card[data-cat="dev"] { --pole: var(--pole-tech); }
.tool-card[data-cat="design"] { --pole: var(--pole-graph); }
.tool-card[data-cat="collab"] { --pole: var(--amber); }
.tool-card[data-cat="learn"] { --pole: var(--pole-elec); }
.tool-card__cat-dot {
position: absolute; top: 16px; right: 16px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--pole, var(--teal));
}
.tool-card__logo {
width: 44px; height: 44px;
border-radius: 10px;
background: color-mix(in oklab, var(--pole, var(--teal)) 12%, transparent);
display: flex; align-items: center; justify-content: center;
font-family: 'Josefin Sans', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--pole, var(--teal));
margin-bottom: 6px;
}
.tool-card__name {
font-family: 'Josefin Sans', sans-serif;
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -.01em;
}
.tool-card__desc {
font-size: 13px;
line-height: 1.55;
color: var(--muted-on-dark);
margin: 0;
flex: 1;
}
[data-theme="light"] .tool-card__desc { color: var(--muted-on-light); }
.active-learning {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
margin: 0;
align-items: stretch;
}
.active-learning__media {
position: relative;
min-height: 480px;
background: var(--bg-dark-2);
border-radius: 20px;
overflow: hidden;
}
.active-learning__media image-slot {
width: 100%; height: 100%;
display: block;
}
.active-learning__content {
padding: 80px 64px;
background: var(--bg-page);
display: flex; flex-direction: column; justify-content: center;
}
.active-learning__eyebrow {
font-size: 11px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--amber); margin-bottom: 16px;
}
.active-learning__title {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(32px, 3.5vw, 48px);
font-weight: 700;
line-height: 1;
letter-spacing: -.02em;
text-transform: uppercase;
color: var(--text-primary);
margin: 0 0 24px;
}
.active-learning__title em { font-style: normal; color: var(--amber); }
.active-learning__body {
font-size: 16px;
line-height: 1.7;
color: var(--muted-on-dark);
margin: 0 0 28px;
}
[data-theme="light"] .active-learning__body { color: var(--muted-on-light); }
.active-learning__list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 14px;
}
.active-learning__list li {
display: flex; align-items: flex-start; gap: 14px;
font-size: 15px;
color: var(--text-primary);
line-height: 1.55;
}
.active-learning__list li::before {
content: '';
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--teal);
margin-top: 2px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 14px; background-position: center; background-repeat: no-repeat;
}
.softskills-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.softskill {
padding: 28px;
background: var(--bg-dark);
border: 1px solid var(--border-dark);
border-radius: 16px;
border-top: 3px solid var(--pole, var(--teal));
transition: all var(--transition);
}
[data-theme="light"] .softskill { background: #fff; border-color: var(--border-light); border-top-color: var(--pole, var(--teal)); }
.softskill:hover { transform: translateY(-3px); }
.softskill[data-pole="tech"] { --pole: var(--pole-tech); }
.softskill[data-pole="graph"] { --pole: var(--pole-graph); }
.softskill[data-pole="sport"] { --pole: var(--pole-sport); }
.softskill[data-pole="com"] { --pole: var(--pole-com); }
.softskill[data-pole="elec"] { --pole: var(--pole-elec); }
.softskill[data-pole="amber"] { --pole: var(--amber); }
.softskill__label {
font-family: 'Josefin Sans', sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--pole, var(--teal));
margin-bottom: 10px;
}
.softskill__title {
font-family: 'Josefin Sans', sans-serif;
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 12px;
letter-spacing: -.01em;
}
.softskill__body {
font-size: 14px;
line-height: 1.65;
color: var(--muted-on-dark);
margin: 0;
}
[data-theme="light"] .softskill__body { color: var(--muted-on-light); }
.stats-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--border-dark);
border-bottom: 1px solid var(--border-dark);
}
[data-theme="light"] .stats-strip { border-color: var(--border-light); }
.stat-cell {
padding: 40px 28px;
text-align: center;
border-right: 1px solid var(--border-dark);
}
[data-theme="light"] .stat-cell { border-color: var(--border-light); }
.stat-cell:last-child { border-right: none; }
.stat-cell__num {
font-family: 'Josefin Sans', sans-serif;
font-size: 56px;
font-weight: 700;
line-height: 1;
letter-spacing: -.03em;
color: var(--teal);
}
.stat-cell__label {
font-size: 12px;
font-weight: 600;
color: var(--muted-on-dark);
letter-spacing: .04em;
margin-top: 8px;
}
[data-theme="light"] .stat-cell__label { color: var(--muted-on-light); }
.claude-zero {
padding: 0;
}
.claude-bg-dark {
background: var(--bg-dark);
}
.claude-bg-page {
background: var(--bg-page);
}
/* === nos-locaux.html === */
.loc-intro {
padding: 100px 0 70px;
background: var(--bg-page);
border-bottom: 1px solid var(--border-dark);
}
[data-theme="light"] .loc-intro { border-color: var(--border-light); }
.loc-intro__grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 80px;
align-items: center;
}
.loc-intro__title {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(40px, 5vw, 64px);
font-weight: 700;
line-height: .98;
letter-spacing: -.03em;
text-transform: uppercase;
color: var(--text-primary);
margin: 0 0 24px;
text-wrap: balance;
}
.loc-intro__title em {
color: var(--teal);
font-style: normal;
}
.loc-intro__title span { color: var(--amber); }
.loc-intro__lead {
font-size: 18px;
line-height: 1.7;
color: var(--muted-on-dark);
margin: 0;
}
[data-theme="light"] .loc-intro__lead { color: var(--muted-on-light); }
.loc-intro__lead strong {
color: var(--text-primary);
font-weight: 600;
}
.loc-intro__media {
position: relative;
min-height: 400px;
border-radius: 20px;
overflow: hidden;
}
.loc-intro__media image-slot {
width: 100%;
height: 100%;
display: block;
}
.loc-facts-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--border-dark);
border-bottom: 1px solid var(--border-dark);
}
[data-theme="light"] .loc-facts-row { border-color: var(--border-light); }
.loc-fact {
padding: 50px 34px;
border-right: 1px solid var(--border-dark);
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
background: var(--bg-page);
}
[data-theme="light"] .loc-fact { border-color: var(--border-light); }
.loc-fact:last-child { border-right: none; }
.loc-fact[data-pole="tech"] { --pole: var(--pole-tech); }
.loc-fact[data-pole="teal"] { --pole: var(--teal); }
.loc-fact[data-pole="amber"] { --pole: var(--amber); }
.loc-fact[data-pole="graph"] { --pole: var(--pole-graph); }
.loc-fact__icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: color-mix(in oklab, var(--pole, var(--teal)) 14%, transparent);
display: flex;
align-items: center;
justify-content: center;
color: var(--pole, var(--teal));
}
.loc-fact__title {
font-family: 'Josefin Sans', sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -.01em;
color: var(--text-primary);
margin: 0;
}
.loc-fact__body {
font-size: 15px;
line-height: 1.65;
color: var(--muted-on-dark);
margin: 0;
}
[data-theme="light"] .loc-fact__body { color: var(--muted-on-light); }
.loc-fact__body strong {
color: var(--text-primary);
font-weight: 600;
}
.amenities-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
margin: 0;
align-items: stretch;
}
.amenities-split__media {
position: relative;
min-height: 580px;
background: var(--bg-dark-2);
border-radius: 20px;
overflow: hidden;
}
.amenities-split__media image-slot {
width: 100%;
height: 100%;
display: block;
}
.amenities-split__content {
padding: 80px 64px;
background: var(--bg-page);
display: flex;
flex-direction: column;
justify-content: center;
}
.amenities-split__eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--amber);
margin-bottom: 16px;
}
.amenities-split__title {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(32px, 3.5vw, 48px);
font-weight: 700;
line-height: 1;
letter-spacing: -.02em;
text-transform: uppercase;
color: var(--text-primary);
margin: 0 0 16px;
text-wrap: balance;
}
.amenities-split__title em {
font-style: normal;
color: var(--teal);
}
.amenities-split__sub {
font-size: 16px;
line-height: 1.7;
color: var(--muted-on-dark);
margin: 0 0 18px;
}
[data-theme="light"] .amenities-split__sub { color: var(--muted-on-light); }
.amenities-list {
list-style: none;
padding: 0;
margin: 18px 0 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.amenities-list li {
display: grid;
grid-template-columns: 44px 1fr;
gap: 16px;
align-items: start;
}
.amenities-list__icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(76,204,184,.12);
display: flex;
align-items: center;
justify-content: center;
color: var(--teal);
flex-shrink: 0;
}
.amenities-list__body {
font-size: 14px;
line-height: 1.55;
color: var(--muted-on-dark);
margin: 4px 0 0;
}
[data-theme="light"] .amenities-list__body { color: var(--muted-on-light); }
.loc-info-section {
border: none;
}
.loc-info-card {
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: center;
padding: 48px;
background: var(--bg-dark);
border: 1px solid var(--border-dark);
border-radius: 24px;
position: relative;
overflow: hidden;
}
[data-theme="light"] .loc-info-card {
background: #fff;
border-color: var(--border-light);
}
.loc-info-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: linear-gradient(180deg, var(--teal), var(--amber));
}
.loc-info-card__pin {
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 10px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.loc-info-card__pin::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--teal);
animation: pulse-dot 2s infinite;
}
.loc-info-card__title {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(28px, 3vw, 36px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -.02em;
color: var(--text-primary);
margin: 0 0 16px;
}
.loc-info-card__body {
font-size: 15px;
line-height: 1.65;
color: var(--muted-on-dark);
margin: 0;
}
[data-theme="light"] .loc-info-card__body { color: var(--muted-on-light); }
.loc-info-card__actions {
display: flex;
flex-direction: column;
gap: 10px;
}
.nice-banner {
background: linear-gradient(135deg, #0A2E2A 0%, #1C7269 45%, #2E9988 75%, #4CCCB8 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.nice-banner::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 70% at 90% 30%, rgba(76,204,184,.35) 0%, transparent 60%),
radial-gradient(ellipse 40% 60% at 10% 100%, rgba(253,161,0,.18) 0%, transparent 60%);
pointer-events: none;
}
.nice-banner__inner {
position: relative;
z-index: 1;
}
.nice-banner__head {
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: end;
margin-bottom: 56px;
}
.nice-banner__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(255,255,255,.85);
margin-bottom: 24px;
padding: 8px 16px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
border-radius: var(--r-pill);
backdrop-filter: blur(8px);
}
.nice-banner__title {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(40px, 5.5vw, 72px);
font-weight: 700;
line-height: .98;
letter-spacing: -.03em;
text-transform: uppercase;
color: #fff;
margin: 0;
text-wrap: balance;
}
.nice-banner__title em {
font-style: normal;
color: var(--amber);
}
.nice-banner__sub {
font-size: 17px;
line-height: 1.7;
color: rgba(255,255,255,.85);
max-width: 420px;
}
.nice-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.nice-stat {
padding: 32px 24px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.15);
border-radius: 16px;
backdrop-filter: blur(8px);
text-align: left;
transition: all var(--transition);
}
.nice-stat:hover {
transform: translateY(-3px);
background: rgba(255,255,255,.1);
}
.nice-stat__icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(255,255,255,.08);
display: flex;
align-items: center;
justify-content: center;
color: var(--amber);
margin-bottom: 14px;
}
.nice-stat__num {
font-family: 'Josefin Sans', sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.05;
letter-spacing: -.01em;
color: #fff;
margin-bottom: 8px;
}
.nice-stat__label {
font-size: 13px;
line-height: 1.5;
color: rgba(255,255,255,.72);
}
.loc-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 240px 240px;
gap: 12px;
}
.loc-gallery-cta {
display: flex;
justify-content: center;
margin: 30px 0 0;
}
.loc-gallery__cell {
position: relative;
background: var(--bg-dark-2);
border-radius: 16px;
overflow: hidden;
}
.loc-gallery__cell image-slot,
.loc-gallery__media {
width: 100%;
height: 100%;
display: block;
}
.loc-gallery__media > image-slot {
width: 100%;
height: 100%;
display: block;
}
.loc-gallery__cell--wide { grid-column: span 2; }
.loc-gallery__cell--tall { grid-row: span 2; }
/* === equipe.html === */
.team-photo-section {
padding: 0 0 40px;
background: var(--bg-page);
}
.team-photo {
position: relative;
height: clamp(360px, 50vw, 560px);
margin-top: 60px;
overflow: hidden;
border-radius: 24px;
background: rgba(255,255,255,.03);
border: 1px solid var(--border-dark);
}
.team-photo__media,
.team-photo__media image-slot {
width: 100%;
height: 100%;
display: block;
}
.team-photo__media image-slot {
color: rgba(255,255,255,.72) !important;
}
[data-theme="light"] .team-photo {
background: rgba(0,0,0,.03);
border-color: var(--border-light);
}
[data-theme="light"] .team-photo__media image-slot {
color: rgba(0,0,0,.58) !important;
}
.team-photo__caption {
position: absolute;
bottom: 24px;
left: 24px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: rgba(8,15,14,.72);
border: 1px solid rgba(255,255,255,.15);
border-radius: var(--r-pill);
backdrop-filter: blur(8px);
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: #fff;
}
[data-theme="light"] .team-photo__caption {
background: rgba(255,255,255,.85);
border-color: rgba(0,0,0,.08);
color: var(--text-body);
}
.team-photo__caption::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--teal);
animation: pulse-dot 2s infinite;
}
.team-lead {
padding: 80px 0 44px;
background: var(--bg-page);
}
.team-lead__inner {
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.team-lead__eyebrow {
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 18px;
}
.team-lead__title {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(32px, 4vw, 52px);
font-weight: 700;
line-height: 1.05;
letter-spacing: 0;
text-transform: uppercase;
color: var(--text-primary);
margin: 0 0 20px;
text-wrap: balance;
}
.team-lead__title em {
font-style: normal;
color: var(--amber);
}
.team-lead__sub {
font-size: 18px;
line-height: 1.7;
color: var(--muted-on-dark);
margin: 0;
}
[data-theme="light"] .team-lead__sub { color: var(--muted-on-light); }
.team {
padding: 56px 0 100px;
background: var(--bg-page);
}
.team-reference {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: center;
margin-bottom: 42px;
padding: 34px 38px;
background: var(--bg-dark);
border: 1px solid var(--border-dark);
border-radius: 22px;
}
[data-theme="light"] .team-reference {
background: #fff;
border-color: var(--border-light);
box-shadow: 0 4px 24px rgba(0,0,0,.04);
}
.team-reference__eyebrow {
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 10px;
}
.team-reference__title {
font-family: 'Josefin Sans', sans-serif;
font-size: clamp(28px, 3vw, 38px);
font-weight: 700;
line-height: 1.05;
letter-spacing: 0;
text-transform: uppercase;
color: var(--text-primary);
margin: 0 0 12px;
}
.team-reference__intro {
max-width: 760px;
font-size: 15px;
line-height: 1.65;
color: var(--muted-on-dark);
margin: 0;
}
[data-theme="light"] .team-reference__intro { color: var(--muted-on-light); }
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.member {
position: relative;
border-radius: 20px;
overflow: hidden;
background: var(--bg-dark);
border: 1px solid var(--border-dark);
transition: all var(--transition);
}
[data-theme="light"] .member {
background: #fff;
border-color: var(--border-light);
box-shadow: 0 4px 24px rgba(0,0,0,.04);
}
.member:hover {
transform: translateY(-4px);
border-color: var(--pole, var(--teal));
}
.member[data-pole="tech"] { --pole: var(--pole-tech); }
.member[data-pole="graph"] { --pole: var(--pole-graph); }
.member[data-pole="amber"] { --pole: var(--amber); }
.member[data-pole="teal"] { --pole: var(--teal); }
.member[data-pole="com"] { --pole: var(--pole-com); }
.member[data-pole="elec"] { --pole: var(--pole-elec); }
.member[data-pole="sport"] { --pole: var(--pole-sport); }
.member__photo {
position: relative;
height: 300px;
background:
radial-gradient(ellipse 90% 110% at 50% 110%, color-mix(in oklab, var(--pole, var(--teal)) 32%, transparent) 0%, transparent 65%),
color-mix(in oklab, var(--pole, var(--teal)) 16%, #0A2E2A);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
[data-theme="light"] .member__photo {
background:
radial-gradient(ellipse 90% 110% at 50% 110%, color-mix(in oklab, var(--pole, var(--teal)) 40%, transparent) 0%, transparent 65%),
color-mix(in oklab, var(--pole, var(--teal)) 14%, #F2F8F7);
}
.member__photo::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--pole, var(--teal));
z-index: 2;
}
.member__icon {
width: 88px;
height: 88px;
border-radius: 26px;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.2);
display: flex;
align-items: center;
justify-content: center;
color: var(--pole, var(--teal));
box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
[data-theme="light"] .member__icon {
background: rgba(255,255,255,.72);
border-color: rgba(0,0,0,.08);
}
.member__hero {
position: absolute;
top: 16px;
right: 16px;
z-index: 3;
font-family: 'Josefin Sans', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: var(--r-pill);
background: rgba(0,0,0,.45);
color: #fff;
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.22);
}
[data-theme="light"] .member__hero {
background: rgba(255,255,255,.92);
color: var(--text-body);
border-color: rgba(0,0,0,.08);
}
.member__body {
padding: 28px 28px 32px;
position: relative;
}
.member__role {
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pole, var(--teal));
margin-bottom: 8px;
}
.member__name {
font-family: 'Josefin Sans', sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--text-primary);
margin: 0 0 14px;
}
.member__bio {
font-size: 14px;
line-height: 1.65;
color: var(--muted-on-dark);
margin: 0;
}
[data-theme="light"] .member__bio { color: var(--muted-on-light); }
.member__bio strong {
color: var(--text-primary);
font-weight: 600;
}
.member__appointment {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 20px;
padding: 12px 18px 10px;
border: 1.5px solid color-mix(in oklab, var(--pole, var(--teal)) 68%, transparent);
border-radius: var(--r-pill);
background: color-mix(in oklab, var(--pole, var(--teal)) 12%, transparent);
color: var(--pole, var(--teal));
font-family: 'Josefin Sans', sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
line-height: 1;
text-transform: uppercase;
text-decoration: none;
transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.member__appointment:hover {
transform: translateY(-2px);
background: var(--pole, var(--teal));
border-color: var(--pole, var(--teal));
color: #fff;
}
/* === faq.html === */
.faq-hero .faq-search {
margin-top: 28px;
}
.faq-search {
display: flex;
align-items: center;
gap: 14px;
max-width: 680px;
padding: 16px 24px;
background: var(--bg-dark);
border: 1.5px solid var(--border-dark);
border-radius: var(--r-pill);
transition: border-color var(--transition), box-shadow var(--transition);
}
[data-theme="light"] .faq-search {
background: #fff;
border-color: var(--border-light);
box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.faq-search:focus-within {
border-color: var(--teal);
box-shadow: 0 0 0 4px rgba(76,204,184,.12);
}
.faq-search svg {
color: var(--muted-on-dark);
flex-shrink: 0;
}
.faq-search input {
flex: 1;
min-width: 0;
background: transparent;
border: 0;
outline: 0;
color: var(--text-primary);
font-family: 'Inter', sans-serif;
font-size: 16px;
}
.faq-search input::placeholder { color: var(--muted-on-dark); }
.faq-search__clear {
display: none;
padding: 4px;
background: none;
border: 0;
color: var(--muted-on-dark);
cursor: pointer;
}
.faq-search:has(input:not(:placeholder-shown)) .faq-search__clear {
display: flex;
align-items: center;
justify-content: center;
}
.faq-intro {
border-bottom: 1px solid var(--border-dark);
}
[data-theme="light"] .faq-intro { border-color: var(--border-light); }
.faq-body {
padding: 60px 0 100px;
background: var(--bg-page);
}
.faq-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 56px;
align-items: start;
}
.faq-side {
position: sticky;
top: 90px;
}
.faq-side__title {
margin: 0 0 16px;
padding-left: 14px;
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted-on-dark);
}
[data-theme="light"] .faq-side__title { color: var(--muted-on-light); }
.faq-side__list {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.faq-side__link {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-left: 3px solid transparent;
border-radius: 10px;
font-family: 'Josefin Sans', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: .04em;
color: var(--muted-on-dark);
text-decoration: none;
transition: all var(--transition);
}
[data-theme="light"] .faq-side__link { color: var(--muted-on-light); }
.faq-side__link:hover {
background: var(--bg-dark);
color: var(--text-primary);
}
[data-theme="light"] .faq-side__link:hover {
background: var(--bg-mid);
color: var(--text-body);
}
.faq-side__link.active {
background: color-mix(in oklab, var(--pole, var(--teal)) 10%, transparent);
color: var(--pole, var(--teal));
border-left-color: var(--pole, var(--teal));
}
.faq-side__icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: color-mix(in oklab, var(--pole, var(--teal)) 14%, transparent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--pole, var(--teal));
}
.faq-side__count {
margin-left: auto;
padding: 2px 8px;
border-radius: var(--r-pill);
background: color-mix(in oklab, currentColor 8%, transparent);
color: var(--muted-on-dark);
font-size: 11px;
font-weight: 700;
}
.faq-content {
min-width: 0;
}
.faq-category {
margin-bottom: 56px;
scroll-margin-top: 90px;
}
.faq-category__head {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 28px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-dark);
}
[data-theme="light"] .faq-category__head { border-color: var(--border-light); }
.faq-category__icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: color-mix(in oklab, var(--pole, var(--teal)) 14%, transparent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--pole, var(--teal));
}
.faq-category__title {
margin: 0;
font-family: 'Josefin Sans', sans-serif;
font-size: 40px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--text-primary);
}
.faq-category__sub {
margin-top: 4px;
color: var(--muted-on-dark);
font-size: 14px;
}
[data-theme="light"] .faq-category__sub { color: var(--muted-on-light); }
.faq-list {
display: flex;
flex-direction: column;
gap: 0;
}
.faq-item {
border-bottom: 1px solid var(--border-dark);
transition: padding var(--transition), margin var(--transition), border-color var(--transition);
}
.faq-item:first-child {
border-top: 1px solid var(--border-dark);
}
[data-theme="light"] .faq-item,
[data-theme="light"] .faq-item:first-child {
border-color: var(--border-light);
}
.faq-item[open] {
margin-left: -19px;
padding-right: 16px;
padding-left: 16px;
border-left: 3px solid var(--pole, var(--teal));
}
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
padding: 26px 0;
cursor: pointer;
font-family: 'Josefin Sans', sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: 0;
color: var(--text-primary);
list-style: none;
transition: color var(--transition);
}
.faq-question::-webkit-details-marker {
display: none;
}
.faq-question:hover { color: var(--pole, var(--teal)); }
.faq-icon {
width: 32px;
height: 32px;
border: 1.5px solid var(--border-dark);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--muted-on-dark);
transition: all var(--transition);
}
[data-theme="light"] .faq-icon {
border-color: rgba(26,40,39,.2);
color: rgba(26,40,39,.4);
}
.faq-item[open] .faq-icon {
border-color: var(--pole, var(--teal));
background: var(--pole, var(--teal));
color: #0A2E2A;
transform: rotate(45deg);
}
.faq-answer__inner {
max-width: 720px;
padding: 0 0 28px;
color: var(--muted-on-dark);
font-size: 15px;
line-height: 1.75;
}
[data-theme="light"] .faq-answer__inner { color: var(--muted-on-light); }
.faq-answer__inner p {
margin: 0 0 14px;
}
.faq-answer__inner p:last-child {
margin-bottom: 0;
}
.faq-answer__inner strong {
color: var(--text-primary);
font-weight: 600;
}
.faq-answer__inner a {
color: var(--pole, var(--teal));
font-weight: 600;
text-decoration: underline;
text-underline-offset: 4px;
}
.faq-related {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--border-dark);
}
[data-theme="light"] .faq-related { border-color: var(--border-light); }
.faq-related__title {
margin: 0 0 10px;
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pole, var(--teal));
}
.faq-related ul {
display: grid;
gap: 8px;
margin: 0;
padding-left: 18px;
}
.faq-empty {
display: none;
padding: 80px 32px;
border: 1.5px dashed var(--border-dark);
border-radius: 20px;
background: var(--bg-dark);
text-align: center;
}
[data-theme="light"] .faq-empty {
background: #fff;
border-color: var(--border-light);
}
.faq-empty.visible,
.faq-empty--standalone {
display: block;
}
.faq-empty__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin-bottom: 16px;
border-radius: 18px;
background: rgba(76,204,184,.1);
color: var(--teal);
}
.faq-empty__title {
margin: 0 0 8px;
font-family: 'Josefin Sans', sans-serif;
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
}
.faq-empty__sub {
max-width: 520px;
margin: 0 auto 24px;
color: var(--muted-on-dark);
font-size: 15px;
}
[data-theme="light"] .faq-empty__sub { color: var(--muted-on-light); }
.faq-cta-banner {
position: relative;
padding: 100px 0;
background:
radial-gradient(ellipse 80% 120% at 100% 0%, rgba(76,204,184,.35) 0%, transparent 55%),
radial-gradient(ellipse 60% 100% at 0% 100%, rgba(253,161,0,.12) 0%, transparent 55%),
linear-gradient(135deg, #082522 0%, #0F4540 35%, #1C7269 65%, #2E9988 100%);
overflow: hidden;
}
.faq-cta-banner__inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
flex-wrap: wrap;
}
.faq-cta-banner__text {
flex: 1 1 480px;
}
.faq-cta-banner__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(255,255,255,.85);
}
.faq-cta-banner__pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--amber);
box-shadow: 0 0 12px var(--amber);
animation: pulse-dot 2s infinite;
}
.faq-cta-banner__title {
margin: 0 0 16px;
font-family: 'Josefin Sans', sans-serif;
font-size: 56px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: #fff;
text-wrap: balance;
}
.faq-cta-banner__title em {
font-style: normal;
color: var(--amber);
}
.faq-cta-banner__sub {
max-width: 480px;
margin: 0;
color: rgba(255,255,255,.78);
font-size: 16px;
line-height: 1.6;
}
.faq-cta-banner__actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.faq-side__link[data-faq-theme="tech"],
.faq-category[data-faq-theme="tech"] { --pole: var(--pole-tech); }
.faq-side__link[data-faq-theme="amber"],
.faq-category[data-faq-theme="amber"] { --pole: var(--amber); }
.faq-side__link[data-faq-theme="teal"],
.faq-category[data-faq-theme="teal"] { --pole: var(--teal); }
.faq-side__link[data-faq-theme="graph"],
.faq-category[data-faq-theme="graph"] { --pole: var(--pole-graph); }
.faq-side__link[data-faq-theme="elec"],
.faq-category[data-faq-theme="elec"] { --pole: var(--pole-elec); }
.faq-side__link[data-faq-theme="com"],
.faq-category[data-faq-theme="com"] { --pole: var(--pole-com); }
.faq-side__link[data-faq-theme="sport"],
.faq-category[data-faq-theme="sport"] { --pole: var(--pole-sport); }
.faq-category.is-hidden,
.faq-item.is-hidden {
display: none;
}
/* === temoignages.html === */
.testimonials-intro {
border-bottom: 1px solid var(--border-dark);
}
[data-theme="light"] .testimonials-intro { border-color: var(--border-light); }
.testimonials-stats-band {
background: var(--bg-page);
}
.testimonials-stats-container {
padding: 0;
}
.t-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--border-dark);
border-bottom: 1px solid var(--border-dark);
}
[data-theme="light"] .t-stats { border-color: var(--border-light); }
.t-stat {
padding: 36px 24px;
text-align: center;
border-right: 1px solid var(--border-dark);
}
[data-theme="light"] .t-stat { border-color: var(--border-light); }
.t-stat:last-child { border-right: none; }
.t-stat__num {
font-family: 'Josefin Sans', sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
color: var(--teal);
}
.t-stat__label {
margin-top: 8px;
font-size: 13px;
color: var(--muted-on-dark);
}
[data-theme="light"] .t-stat__label { color: var(--muted-on-light); }
.t-tabs-bar {
background: var(--bg-page);
padding: 50px 0 24px;
border-bottom: 1px solid var(--border-dark);
}
[data-theme="light"] .t-tabs-bar { border-color: var(--border-light); }
.t-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.t-tabs--empty {
justify-content: flex-start;
}
.t-tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: transparent;
border: 1.5px solid var(--border-dark);
border-radius: var(--r-pill);
font-family: 'Josefin Sans', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted-on-dark);
cursor: pointer;
transition: all var(--transition);
}
[data-theme="light"] .t-tab {
border-color: var(--border-light);
color: var(--muted-on-light);
}
.t-tab:hover {
color: var(--text-primary);
border-color: var(--text-primary);
}
.t-tab.active {
background: var(--text-primary);
border-color: var(--text-primary);
color: var(--bg-page);
}
.t-tab__count {
padding: 2px 8px;
border-radius: var(--r-pill);
background: color-mix(in oklab, currentColor 15%, transparent);
font-size: 11px;
}
.t-section {
padding: 64px 0 80px;
background: var(--bg-page);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.testimonial-quote-card {
--pole: var(--teal);
position: relative;
display: flex;
flex-direction: column;
gap: 22px;
min-height: 100%;
padding: 34px 32px;
background: var(--bg-dark);
border: 1px solid var(--border-dark);
border-left: 4px solid var(--pole);
border-radius: 20px;
transition: transform var(--transition), border-color var(--transition);
}
[data-theme="light"] .testimonial-quote-card {
background: #fff;
border-color: var(--border-light);
border-left-color: var(--pole);
}
.testimonial-quote-card:hover {
transform: translateY(-2px);
}
.testimonial-quote-card[data-testimonial-theme="tech"] { --pole: var(--pole-tech); }
.testimonial-quote-card[data-testimonial-theme="graph"] { --pole: var(--pole-graph); }
.testimonial-quote-card[data-testimonial-theme="amber"] { --pole: var(--amber); }
.testimonial-quote-card[data-testimonial-theme="teal"] { --pole: var(--teal); }
.testimonial-quote-card[data-testimonial-theme="com"] { --pole: var(--pole-com); }
.testimonial-quote-card[data-testimonial-theme="elec"] { --pole: var(--pole-elec); }
.testimonial-quote-card__top {
display: flex;
align-items: center;
gap: 16px;
}
.testimonial-quote-card__media,
.testimonial-quote-card__avatar {
width: 64px;
height: 64px;
border-radius: 16px;
flex-shrink: 0;
overflow: hidden;
background: color-mix(in oklab, var(--pole) 14%, transparent);
}
.testimonial-quote-card__media img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.testimonial-quote-card__avatar {
display: flex;
align-items: center;
justify-content: center;
font-family: 'Josefin Sans', sans-serif;
font-size: 20px;
font-weight: 700;
color: var(--pole);
}
.testimonial-quote-card__type {
margin-bottom: 4px;
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pole);
}
.testimonial-quote-card__name {
margin: 0;
font-family: 'Josefin Sans', sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--text-primary);
}
.testimonial-quote-card__meta {
margin: 6px 0 0;
font-size: 13px;
color: var(--muted-on-dark);
}
[data-theme="light"] .testimonial-quote-card__meta { color: var(--muted-on-light); }
.testimonial-quote-card__text {
position: relative;
margin: 0;
padding-left: 26px;
}
.testimonial-quote-card__text::before {
content: '"';
position: absolute;
top: -22px;
left: 0;
font-family: 'Josefin Sans', sans-serif;
font-size: 70px;
line-height: 1;
color: var(--pole);
opacity: .45;
}
.testimonial-quote-card__text p {
margin: 0;
font-size: 17px;
line-height: 1.65;
color: var(--text-primary);
}
.testimonial-quote-card__context {
margin: -6px 0 0;
color: var(--muted-on-dark);
font-size: 14px;
line-height: 1.65;
}
[data-theme="light"] .testimonial-quote-card__context { color: var(--muted-on-light); }
.testimonial-quote-card__footer {
margin-top: auto;
padding-top: 18px;
border-top: 1px solid var(--border-dark);
color: var(--muted-on-dark);
font-size: 13px;
}
[data-theme="light"] .testimonial-quote-card__footer {
border-color: var(--border-light);
color: var(--muted-on-light);
}
.testimonial-related {
margin-top: 14px;
}
.testimonial-related > span {
display: block;
margin-bottom: 8px;
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--pole);
}
.testimonial-related ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
.testimonial-related a {
display: inline-flex;
padding: 7px 10px;
border-radius: var(--r-pill);
background: color-mix(in oklab, var(--pole) 12%, transparent);
color: var(--text-primary);
font-size: 12px;
font-weight: 700;
}
.testimonial-quote-card.is-hidden {
display: none;
}
.testimonials-empty {
max-width: 760px;
margin: 0 auto;
padding: 72px 42px;
text-align: center;
background: var(--bg-dark);
border: 1.5px dashed var(--border-dark);
border-radius: 22px;
}
[data-theme="light"] .testimonials-empty {
background: #fff;
border-color: var(--border-light);
}
.testimonials-empty__icon {
width: 76px;
height: 76px;
margin: 0 auto 20px;
border-radius: 24px;
background: rgba(76,204,184,.12);
color: var(--teal);
display: flex;
align-items: center;
justify-content: center;
}
.testimonials-empty h2 {
margin: 0 0 12px;
font-family: 'Josefin Sans', sans-serif;
font-size: 46px;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--text-primary);
}
.testimonials-empty p {
max-width: 560px;
margin: 0 auto 28px;
color: var(--muted-on-dark);
font-size: 16px;
line-height: 1.65;
}
[data-theme="light"] .testimonials-empty p { color: var(--muted-on-light); }
.review-cta {
background: linear-gradient(135deg, #0A2E2A 0%, #1C7269 70%, #2E9988 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
text-align: center;
}
.review-cta::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 70% at 50% 20%, rgba(253,161,0,.18) 0%, transparent 60%),
radial-gradient(ellipse 50% 60% at 50% 100%, rgba(76,204,184,.3) 0%, transparent 60%);
pointer-events: none;
}
.review-cta__inner {
position: relative;
z-index: 1;
max-width: 820px;
margin: 0 auto;
}
.review-cta__stars {
display: flex;
justify-content: center;
gap: 4px;
margin-bottom: 16px;
color: var(--amber);
}
.review-cta__rating {
margin-bottom: 18px;
font-family: 'Josefin Sans', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.7);
}
.review-cta__title {
margin: 0 0 24px;
font-family: 'Josefin Sans', sans-serif;
font-size: 72px;
font-weight: 700;
line-height: .98;
letter-spacing: 0;
text-transform: uppercase;
color: #fff;
text-wrap: balance;
}
.review-cta__title em {
color: var(--amber);
font-style: normal;
}
.review-cta__sub {
margin: 0 auto 36px;
max-width: 620px;
font-size: 18px;
line-height: 1.6;
color: rgba(255,255,255,.85);
}
.review-cta__platforms {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
.review-link {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.2);
border-radius: var(--r-pill);
color: #fff;
font-family: 'Josefin Sans', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
backdrop-filter: blur(8px);
transition: all var(--transition);
}
.review-link:hover {
background: rgba(255,255,255,.18);
transform: translateY(-2px);
}
.review-link__icon {
width: 24px;
height: 24px;
border-radius: 6px;
background: #fff;
color: var(--teal-dark);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 13px;
font-family: 'Inter', sans-serif;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .55; transform: scale(.7); }
}
/* === formations.html === */
.formations-preview-banner {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 120;
max-width: min(420px, calc(100vw - 32px));
border: 1px solid rgba(253, 161, 0, .36);
border-radius: 18px;
background: rgba(253, 161, 0, .16);
color: #fff4db;
padding: 10px 14px;
text-align: center;
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
line-height: 1.35;
text-transform: uppercase;
}
@media (max-width: 760px) {
.formations-preview-banner {
position: static;
max-width: none;
margin: 24px 16px;
border-radius: 16px;
}
}
.formations-intro {
border-bottom: 1px solid var(--border-dark);
}
[data-theme="light"] .formations-intro { border-color: var(--border-light); }
.formations-section {
padding: 80px 0 100px;
background: var(--bg-light);
}
.section-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 56px;
}
.section-head__eyebrow {
margin-bottom: 12px;
color: var(--teal-dark);
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.section-head__title {
margin: 0;
color: var(--text-body);
font-family: 'Josefin Sans', sans-serif;
font-size: 40px;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
}
.formation-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
max-width: 760px;
justify-content: flex-end;
}
.formation-filter {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
border: 1.5px solid var(--border-light);
border-radius: var(--r-pill);
background: transparent;
color: var(--muted-on-light);
cursor: pointer;
font-family: 'Josefin Sans', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
transition: all var(--transition);
}
.formation-filter:hover {
color: var(--text-body);
border-color: var(--muted-on-light);
}
.formation-filter.active {
background: var(--teal);
border-color: var(--teal);
color: #0A2E2A;
}
.formation-filter span {
font-size: 11px;
opacity: .75;
}
.formation-metier-groups {
display: grid;
gap: 48px;
}
.formation-metier-group[hidden] {
display: none;
}
.formation-metier-group__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
margin-bottom: 20px;
}
.formation-metier-group__eyebrow {
margin: 0 0 8px;
color: var(--teal-dark);
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.formation-metier-group__title {
margin: 0;
color: var(--text-body);
font-family: 'Josefin Sans', sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 1.12;
letter-spacing: 0;
text-transform: uppercase;
}
.formation-metier-group__meta {
margin: 0;
color: var(--muted-on-light);
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.formations-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
margin-bottom: 2px;
background: var(--border-light);
}
.formation-card {
--pole: var(--teal);
--pole-soft: #D0F5F0;
--formation-hover-text: #0A2E2A;
--formation-hover-border: rgba(10,46,42,.24);
--formation-hover-chip-bg: rgba(255,255,255,.34);
--formation-hover-arrow-bg: rgba(10,46,42,.08);
position: relative;
display: flex;
flex-direction: column;
min-height: 100%;
overflow: hidden;
background: #fff;
color: inherit;
text-decoration: none;
transition: transform var(--transition);
}
.formation-card.is-hidden { display: none; }
.formation-card[data-formation-theme="tech"],
.formation-filter[data-formation-theme="tech"] {
--pole: var(--pole-tech);
--pole-soft: var(--pole-tech-soft);
}
.formation-card[data-formation-theme="graph"],
.formation-filter[data-formation-theme="graph"] {
--pole: var(--pole-graph);
--pole-soft: var(--pole-graph-soft);
}
.formation-card[data-formation-theme="sport"],
.formation-filter[data-formation-theme="sport"] {
--pole: var(--pole-sport);
--pole-soft: var(--pole-sport-soft);
}
.formation-card[data-formation-theme="com"],
.formation-filter[data-formation-theme="com"] {
--pole: var(--pole-com);
--pole-soft: var(--pole-com-soft);
}
.formation-card[data-formation-theme="com"] {
--formation-hover-text: #fff;
--formation-hover-border: rgba(255,255,255,.3);
--formation-hover-chip-bg: rgba(0,0,0,.3);
--formation-hover-arrow-bg: rgba(255,255,255,.1);
}
.formation-card[data-formation-theme="elec"],
.formation-filter[data-formation-theme="elec"] {
--pole: var(--pole-elec);
--pole-soft: var(--pole-elec-soft);
}
.formation-card[data-formation-theme="elec"] {
--formation-hover-text: #fff;
--formation-hover-border: rgba(255,255,255,.3);
--formation-hover-chip-bg: rgba(0,0,0,.3);
--formation-hover-arrow-bg: rgba(255,255,255,.1);
}
.formation-card[data-formation-theme="amber"],
.formation-filter[data-formation-theme="amber"] {
--pole: var(--amber);
--pole-soft: rgba(253,161,0,.16);
}
.formation-card[data-formation-theme="teal"],
.formation-filter[data-formation-theme="teal"] {
--pole: var(--teal);
--pole-soft: #D0F5F0;
}
.formation-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
height: 4px;
background: var(--pole);
}
.formation-card:hover {
transform: translateY(-2px);
}
.formation-card--disabled {
cursor: default;
}
.formation-card--disabled:hover {
transform: none;
}
.formation-card--disabled:hover .formation-card__body::before {
transform: translateY(100%);
}
.formation-card__img {
position: relative;
width: 100%;
height: 160px;
overflow: hidden;
flex-shrink: 0;
background: #0A2E2A;
transition: opacity var(--transition);
}
.formation-card__img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.formation-card:hover .formation-card__img { opacity: .72; }
.formation-card__visual {
display: grid;
place-items: center;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #071E1B 0%, #0A2E2A 64%, color-mix(in oklab, var(--pole) 26%, #0A2E2A) 100%);
color: color-mix(in oklab, var(--pole) 68%, #fff);
}
.formation-card__visual span {
position: absolute;
top: 20px;
left: 24px;
color: rgba(255,255,255,.55);
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.formation-card__body {
position: relative;
z-index: 1;
display: flex;
flex: 1;
flex-direction: column;
gap: 16px;
padding: 28px 32px;
}
.formation-card__body::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background: var(--pole);
transform: translateY(100%);
transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.formation-card:hover .formation-card__body::before { transform: translateY(0); }
.formation-card__body > * {
position: relative;
z-index: 1;
}
.formation-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.formation-card__badge {
padding: 4px 12px;
border-radius: var(--r-pill);
background: var(--pole-soft);
color: var(--pole);
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
transition: all var(--transition);
}
.formation-card__state {
padding: 4px 10px;
border-radius: var(--r-pill);
background: rgba(10,22,21,.06);
color: rgba(10,22,21,.62);
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
transition: all var(--transition);
}
.formation-card[data-formation-state="open"] .formation-card__state {
background: rgba(76,204,184,.16);
color: #0A6B62;
}
.formation-card[data-formation-state="inactive"] {
opacity: .78;
}
.formation-card[data-formation-state="inactive"] .formation-card__state {
background: rgba(253,161,0,.16);
color: #8D5A00;
}
.formation-card__domain {
color: var(--pole);
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
transition: color var(--transition);
}
.formation-card__title {
margin: 0;
color: var(--text-body);
font-family: 'Josefin Sans', sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0;
transition: color var(--transition);
}
.formation-card__summary {
margin: 0;
color: var(--muted-on-light);
font-size: 14px;
line-height: 1.6;
transition: color var(--transition);
}
.formation-card__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: auto;
}
.formation-card__meta-tag {
padding: 4px 12px;
border: 1px solid color-mix(in oklab, var(--pole, var(--teal-dark)) 18%, transparent);
border-radius: var(--r-pill);
background: var(--pole-soft);
color: var(--pole);
font-size: 12px;
font-weight: 700;
transition: all var(--transition);
}
.formation-card__cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 0;
padding-top: 8px;
color: var(--pole);
font-size: 13px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
transition: color var(--transition);
}
.formation-card__arrow {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1.5px solid var(--pole);
border-radius: 50%;
color: var(--pole);
transition: all var(--transition);
}
.formation-card:hover .formation-card__domain,
.formation-card:hover .formation-card__title,
.formation-card:hover .formation-card__summary,
.formation-card:hover .formation-card__meta-tag,
.formation-card:hover .formation-card__state,
.formation-card:hover .formation-card__cta {
color: var(--formation-hover-text);
border-color: var(--formation-hover-border);
}
.formation-card--disabled:hover .formation-card__domain {
color: var(--pole);
}
.formation-card--disabled:hover .formation-card__title {
color: var(--text-body);
}
.formation-card--disabled:hover .formation-card__summary,
.formation-card--disabled:hover .formation-card__meta-tag {
color: var(--muted-on-light);
}
.formation-card--disabled:hover .formation-card__state {
color: rgba(10,22,21,.62);
}
.formation-card--disabled[data-formation-state="inactive"]:hover .formation-card__state {
color: #8D5A00;
}
.formation-card--disabled:hover .formation-card__cta {
color: var(--pole);
}
.formation-card:hover .formation-card__badge {
background: var(--formation-hover-chip-bg);
color: var(--formation-hover-text);
border-color: var(--formation-hover-border);
}
.formation-card--disabled:hover .formation-card__badge {
background: var(--pole-soft);
color: var(--pole);
border-color: transparent;
}
.formation-card:hover .formation-card__arrow {
background: var(--formation-hover-arrow-bg);
border-color: var(--formation-hover-text);
color: var(--formation-hover-text);
}
.formations-empty {
padding: 80px 32px;
border: 1.5px dashed var(--border-light);
border-radius: 20px;
background: #fff;
text-align: center;
}
.formations-empty[hidden] { display: none; }
.formations-empty--filtered { margin-top: 32px; }
.formations-empty__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
margin-bottom: 16px;
border-radius: 20px;
background: rgba(76,204,184,.1);
color: var(--teal);
}
.formations-empty__title {
margin: 0 0 8px;
color: var(--text-body);
font-family: 'Josefin Sans', sans-serif;
font-size: 22px;
font-weight: 700;
}
.formations-empty__sub {
max-width: 560px;
margin: 0 auto 24px;
color: var(--muted-on-light);
font-size: 15px;
}
.formations-cta {
position: relative;
overflow: hidden;
padding: 100px 0;
background: linear-gradient(135deg, #082522 0%, #0F4540 35%, #1C7269 65%, #2E9988 100%);
}
.formations-cta__inner {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 48px;
}
.formations-cta__text {
flex: 1 1 480px;
}
.formations-cta__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
color: rgba(255,255,255,.85);
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
}
.formations-cta__pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--amber);
box-shadow: 0 0 12px var(--amber);
animation: pulse-dot 2s infinite;
}
.formations-cta__title {
margin: 0 0 16px;
color: #fff;
font-family: 'Josefin Sans', sans-serif;
font-size: 56px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
text-wrap: balance;
}
.formations-cta__title em {
color: var(--amber);
font-style: normal;
}
.formations-cta__sub {
max-width: 520px;
margin: 0;
color: rgba(255,255,255,.78);
font-size: 16px;
line-height: 1.6;
}
.formations-cta__actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.formations-cta__link {
color: rgba(255,255,255,.85);
font-family: 'Josefin Sans', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
}
.formations-cta__link:hover {
color: #fff;
}
/* === offres-alternance.html === */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.jobs-hero {
position: relative;
overflow: hidden;
padding: 160px 0 60px;
background: var(--bg-page);
border-bottom: 1px solid var(--border-dark);
}
[data-theme="light"] .jobs-hero { border-color: var(--border-light); }
.jobs-hero__bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 80% at 80% 30%, rgba(76,204,184,.1) 0%, transparent 60%),
radial-gradient(ellipse 40% 60% at 10% 100%, rgba(253,161,0,.06) 0%, transparent 60%);
pointer-events: none;
}
.jobs-hero__inner {
position: relative;
z-index: 1;
max-width: 1100px;
}
.jobs-hero__breadcrumb {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
color: var(--muted-on-dark);
font-size: 12px;
}
[data-theme="light"] .jobs-hero__breadcrumb { color: var(--muted-on-light); }
.jobs-hero__breadcrumb a {
color: var(--teal);
font-weight: 600;
}
.jobs-hero__breadcrumb span { opacity: .45; }
.jobs-hero__breadcrumb span:last-child { opacity: 1; }
.jobs-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
padding: 8px 16px;
border: 1px solid rgba(253,161,0,.25);
border-radius: var(--r-pill);
background: rgba(253,161,0,.08);
color: var(--amber);
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
}
.jobs-hero__eyebrow::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--amber);
animation: pulse-dot 2s infinite;
}
.jobs-hero__title {
margin: 0 0 24px;
color: var(--text-primary);
font-family: 'Josefin Sans', sans-serif;
font-size: 84px;
font-weight: 700;
line-height: .95;
letter-spacing: 0;
text-transform: uppercase;
text-wrap: balance;
}
.jobs-hero__title em {
color: var(--teal);
font-style: normal;
}
.jobs-hero__sub {
max-width: 720px;
margin: 0;
color: var(--muted-on-dark);
font-size: 19px;
line-height: 1.65;
}
[data-theme="light"] .jobs-hero__sub { color: var(--muted-on-light); }
.jobs-hero__stats {
display: flex;
flex-wrap: wrap;
gap: 28px;
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--border-dark);
}
[data-theme="light"] .jobs-hero__stats { border-color: var(--border-light); }
.jobs-stat__num {
color: var(--teal);
font-family: 'Josefin Sans', sans-serif;
font-size: 36px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
}
.jobs-stat__label {
margin-top: 4px;
color: var(--muted-on-dark);
font-size: 13px;
}
[data-theme="light"] .jobs-stat__label { color: var(--muted-on-light); }
.jobs-intro {
border-bottom: 1px solid var(--border-dark);
}
[data-theme="light"] .jobs-intro { border-color: var(--border-light); }
.jobs-filters {
position: sticky;
top: 72px;
z-index: 30;
padding: 18px 0;
border-bottom: 1px solid var(--border-dark);
background: color-mix(in oklab, var(--bg-page) 88%, transparent);
backdrop-filter: blur(12px);
}
[data-theme="light"] .jobs-filters { border-color: var(--border-light); }
.jobs-filters__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
}
.jobs-search {
display: flex;
flex: 1;
min-width: 220px;
align-items: center;
gap: 10px;
padding: 10px 18px;
border: 1.5px solid var(--border-dark);
border-radius: var(--r-pill);
background: var(--bg-dark);
}
[data-theme="light"] .jobs-search {
background: #fff;
border-color: var(--border-light);
}
.jobs-search:focus-within { border-color: var(--teal); }
.jobs-search svg {
flex-shrink: 0;
color: var(--muted-on-dark);
}
.jobs-search input {
flex: 1;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: var(--text-primary);
font-family: 'Inter', sans-serif;
font-size: 14px;
}
.jobs-search input::placeholder { color: var(--muted-on-dark); }
.jobs-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.job-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
border: 1.5px solid var(--border-dark);
border-radius: var(--r-pill);
background: transparent;
color: var(--muted-on-dark);
cursor: pointer;
font-family: 'Josefin Sans', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
transition: all var(--transition);
}
[data-theme="light"] .job-chip {
border-color: var(--border-light);
color: var(--muted-on-light);
}
.job-chip:hover {
color: var(--text-primary);
border-color: var(--muted-on-dark);
}
.job-chip.active {
background: var(--text-primary);
border-color: var(--text-primary);
color: var(--bg-page);
}
.job-chip__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pole, var(--teal));
}
.job-chip__count {
font-size: 11px;
opacity: .75;
}
.jobs {
padding: 56px 0 100px;
background: var(--bg-page);
}
.jobs-count {
margin-bottom: 28px;
color: var(--muted-on-dark);
font-family: 'Josefin Sans', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
[data-theme="light"] .jobs-count { color: var(--muted-on-light); }
.jobs-count strong { color: var(--teal); }
.jobs-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.job-card {
--pole: var(--teal);
position: relative;
display: grid;
grid-template-columns: 64px minmax(0, 1fr) auto;
align-items: center;
gap: 24px;
padding: 24px 28px;
border: 1px solid var(--border-dark);
border-left: 4px solid var(--pole);
border-radius: 16px;
background: var(--bg-dark);
color: inherit;
text-decoration: none;
transition: all var(--transition);
}
[data-theme="light"] .job-card {
background: #fff;
border-color: var(--border-light);
border-left-color: var(--pole);
box-shadow: 0 2px 12px rgba(0,0,0,.03);
}
.job-card:hover {
transform: translateY(-2px);
border-color: var(--pole);
}
[data-theme="light"] .job-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.job-card.is-hidden { display: none; }
.job-card[data-job-theme="tech"],
.job-chip[data-job-theme="tech"] { --pole: var(--pole-tech); }
.job-card[data-job-theme="graph"],
.job-chip[data-job-theme="graph"] { --pole: var(--pole-graph); }
.job-card[data-job-theme="sport"],
.job-chip[data-job-theme="sport"] { --pole: var(--pole-sport); }
.job-card[data-job-theme="com"],
.job-chip[data-job-theme="com"] { --pole: var(--pole-com); }
.job-card[data-job-theme="elec"],
.job-chip[data-job-theme="elec"] { --pole: var(--pole-elec); }
.job-card[data-job-theme="amber"],
.job-chip[data-job-theme="amber"] { --pole: var(--amber); }
.job-card[data-job-theme="teal"],
.job-chip[data-job-theme="teal"] { --pole: var(--teal); }
.job-card__logo {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 12px;
background: color-mix(in oklab, var(--pole) 14%, transparent);
color: var(--pole);
font-family: 'Josefin Sans', sans-serif;
font-size: 22px;
font-weight: 700;
}
.job-card__main { min-width: 0; }
.job-card__top {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 4px;
}
.job-card__company {
color: var(--pole);
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.job-card__tag {
padding: 3px 8px;
border-radius: var(--r-pill);
background: rgba(253,161,0,.14);
color: var(--amber);
font-family: 'Josefin Sans', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.job-card__title {
margin: 0 0 10px;
color: var(--text-primary);
font-family: 'Josefin Sans', sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.15;
letter-spacing: 0;
}
.job-card__title a {
color: inherit;
text-decoration: none;
}
.job-card__title a:hover { color: var(--pole); }
.job-card__meta {
display: flex;
flex-wrap: wrap;
gap: 14px 18px;
color: var(--muted-on-dark);
font-size: 13px;
}
[data-theme="light"] .job-card__meta { color: var(--muted-on-light); }
.job-card__meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.job-card__meta-item svg {
flex-shrink: 0;
opacity: .75;
}
.job-card__summary {
max-width: 780px;
margin: 12px 0 0;
color: var(--muted-on-dark);
font-size: 14px;
line-height: 1.65;
}
[data-theme="light"] .job-card__summary { color: var(--muted-on-light); }
.job-card__formations {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--border-dark);
}
[data-theme="light"] .job-card__formations { border-color: var(--border-light); }
.job-card__formations > span {
display: block;
margin-bottom: 8px;
color: var(--muted-on-dark);
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
[data-theme="light"] .job-card__formations > span { color: var(--muted-on-light); }
.job-card__formations ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.job-card__formations a,
.job-card__link {
color: var(--teal);
font-weight: 700;
text-decoration: none;
}
.job-card__formations a:hover,
.job-card__link:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
.job-card__actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
}
.job-card__cta {
display: inline-flex;
flex-shrink: 0;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: var(--r-pill);
background: var(--pole);
color: #0A2E2A;
font-family: 'Josefin Sans', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: all var(--transition);
}
.job-card__cta--muted {
background: transparent;
border: 1.5px solid var(--pole);
color: var(--pole);
}
.job-card:hover .job-card__cta { transform: translateX(4px); }
.jobs-empty {
padding: 80px 32px;
border: 1.5px dashed var(--border-dark);
border-radius: 20px;
background: var(--bg-dark);
text-align: center;
}
[data-theme="light"] .jobs-empty {
background: #fff;
border-color: var(--border-light);
}
.jobs-empty[hidden] { display: none; }
.jobs-empty--filtered { margin-top: 32px; }
.jobs-empty__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
margin-bottom: 16px;
border-radius: 20px;
background: rgba(76,204,184,.1);
color: var(--teal);
}
.jobs-empty__title {
margin: 0 0 8px;
color: var(--text-primary);
font-family: 'Josefin Sans', sans-serif;
font-size: 22px;
font-weight: 700;
}
.jobs-empty__sub {
max-width: 560px;
margin: 0 auto 24px;
color: var(--muted-on-dark);
font-size: 15px;
}
[data-theme="light"] .jobs-empty__sub { color: var(--muted-on-light); }
.entreprise-cta {
position: relative;
overflow: hidden;
padding: 100px 0;
background: linear-gradient(135deg, #071E1B 0%, #0A2E2A 42%, #0F4540 100%);
}
.entreprise-cta::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 80% at 100% 0%, rgba(76,204,184,.22) 0%, transparent 60%),
radial-gradient(ellipse 50% 70% at 0% 100%, rgba(253,161,0,.12) 0%, transparent 60%);
}
.entreprise-cta__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(260px, .8fr) 1fr;
gap: 64px;
align-items: center;
}
.entreprise-cta__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
color: rgba(255,255,255,.72);
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
}
.entreprise-cta__title {
margin: 0;
color: #fff;
font-family: 'Josefin Sans', sans-serif;
font-size: 64px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
text-wrap: balance;
}
.entreprise-cta__title em {
color: var(--amber);
font-style: normal;
}
.entreprise-cta__body {
max-width: 620px;
margin: 0 0 28px;
color: rgba(255,255,255,.78);
font-size: 18px;
line-height: 1.65;
}
.entreprise-cta__btns {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
@media (max-width: 1024px) {
.xp-intro__grid { grid-template-columns: 1fr; gap: 40px; }
.callout-10__inner { grid-template-columns: 1fr; gap: 40px; text-align: left; }
.callout-10__num { font-size: clamp(140px, 26vw, 220px); }
.callout-10__num::after { right: 0; }
.xp-split { grid-template-columns: 1fr; margin: 0; }
.xp-split--reverse .xp-split__media { order: 1; }
.xp-split--reverse .xp-split__content { order: 2; }
.xp-split__media { min-height: 320px; }
.xp-split__content { padding: 56px 32px; }
.network-strip { grid-template-columns: 1fr; gap: 1px; }
.promo-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 200px); }
.promo-cell--wide { grid-column: span 2; }
.om-intro__grid { grid-template-columns: 1fr; gap: 48px; }
.om-intro__manifesto,
.om-intro__quote,
.om-intro__media {
grid-column: auto;
grid-row: auto;
}
.active-learning { grid-template-columns: 1fr; margin: 0; }
.active-learning__media { min-height: 320px; }
.active-learning__content { padding: 56px 32px; }
.tools-grid { grid-template-columns: repeat(3, 1fr); }
.softskills-grid { grid-template-columns: repeat(2, 1fr); }
.stats-strip { grid-template-columns: repeat(2, 1fr); }
.stat-cell:nth-child(2) { border-right: none; }
.stat-cell:nth-child(1), .stat-cell:nth-child(2) { border-bottom: 1px solid var(--border-dark); }
.loc-intro__grid { grid-template-columns: 1fr; gap: 40px; }
.loc-facts-row { grid-template-columns: repeat(2, 1fr); }
.loc-fact:nth-child(2) { border-right: none; }
.loc-fact:nth-child(1), .loc-fact:nth-child(2) { border-bottom: 1px solid var(--border-dark); }
.amenities-split { grid-template-columns: 1fr; margin: 0; }
.amenities-split__media { min-height: 320px; }
.amenities-split__content { padding: 56px 32px; }
.loc-info-card { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
.loc-info-card__actions { flex-direction: row; flex-wrap: wrap; }
.nice-banner__head { grid-template-columns: 1fr; }
.nice-stats { grid-template-columns: repeat(2, 1fr); }
.loc-gallery { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 200px); }
.loc-gallery__cell--wide { grid-column: span 2; }
.loc-gallery__cell--tall { grid-row: span 2; }
.team-reference { grid-template-columns: 1fr; align-items: start; }
.team-grid { grid-template-columns: repeat(2, 1fr); }
.faq-layout { grid-template-columns: 1fr; gap: 32px; }
.faq-side { position: static; }
.faq-side__title { padding-left: 0; }
.faq-side__list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.faq-side__link { flex: 0 0 auto; padding: 10px 14px; }
.faq-side__count { display: none; }
.t-stats { grid-template-columns: repeat(2, 1fr); }
.t-stat:nth-child(2) { border-right: none; }
.t-stat:nth-child(1),
.t-stat:nth-child(2) { border-bottom: 1px solid var(--border-dark); }
.testimonials-grid { grid-template-columns: 1fr; }
.formations-grid { grid-template-columns: repeat(2, 1fr); }
.section-head { flex-direction: column; align-items: flex-start; }
.formation-filters { justify-content: flex-start; }
.jobs-filters__inner { flex-direction: column; align-items: stretch; }
.jobs-search { width: 100%; }
.job-card { grid-template-columns: 56px minmax(0, 1fr); }
.job-card__logo { width: 56px; height: 56px; }
.job-card__actions {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
}
.entreprise-cta__inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
.promo-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
.promo-cell--wide { grid-column: span 1; }
.promo-cell { min-height: 220px; }
.method-grid { grid-template-columns: 1fr; }
.tools-grid { grid-template-columns: 1fr 1fr; }
.softskills-grid { grid-template-columns: 1fr; }
.stat-cell { padding: 32px 14px; }
.stat-cell__num {
font-size: clamp(24px, 7.2vw, 32px);
letter-spacing: 0;
}
.loc-facts-row { grid-template-columns: 1fr; }
.loc-fact,
.loc-fact:nth-child(2) { border-right: none; }
.loc-fact:nth-child(1),
.loc-fact:nth-child(2),
.loc-fact:nth-child(3) { border-bottom: 1px solid var(--border-dark); }
.loc-info-card__actions { flex-direction: column; }
.nice-stats { grid-template-columns: 1fr; }
.loc-gallery-cta .btn { width: 100%; justify-content: center; }
.loc-gallery { grid-template-columns: 1fr; grid-template-rows: auto; }
.loc-gallery__cell--wide,
.loc-gallery__cell--tall {
grid-column: span 1;
grid-row: span 1;
}
.loc-gallery__cell { min-height: 220px; }
.team-photo { height: 320px; margin-top: 36px; border-radius: 18px; }
.team-photo__caption { left: 16px; right: 16px; bottom: 16px; justify-content: center; }
.team-reference { padding: 28px; }
.team-grid { grid-template-columns: 1fr; }
.member__photo { height: 260px; }
.faq-search { border-radius: 18px; }
.faq-category__head { flex-wrap: wrap; }
.faq-category__title { font-size: 32px; }
.faq-question { font-size: 16px; }
.faq-cta-banner__title { font-size: 38px; }
.faq-item[open] { margin-left: 0; }
.faq-cta-banner__actions { width: 100%; }
.faq-cta-banner__actions .btn { width: 100%; justify-content: center; }
.t-tab { padding: 10px 16px; font-size: 11px; }
.t-stats { grid-template-columns: 1fr; }
.t-stat,
.t-stat:nth-child(2) {
border-right: none;
border-bottom: 1px solid var(--border-dark);
}
.t-stat:last-child { border-bottom: none; }
.testimonial-quote-card { padding: 28px 24px; }
.testimonial-quote-card__top { align-items: flex-start; }
.testimonials-empty h2 { font-size: 34px; }
.review-cta__title { font-size: 44px; }
.review-cta__platforms { flex-direction: column; align-items: stretch; }
.review-link { justify-content: center; }
.formations-section { padding: 56px 0 72px; }
.section-head__title { font-size: 32px; }
.formation-filters { gap: 6px; overflow-x: auto; flex-wrap: nowrap; width: 100%; padding-bottom: 4px; }
.formation-filter { flex: 0 0 auto; padding: 8px 14px; font-size: 11px; }
.formations-grid { grid-template-columns: 1fr; }
.formation-card__body { padding: 26px 24px; }
.formations-empty { padding: 56px 24px; }
.formations-cta__title { font-size: 44px; }
.formations-cta__actions { width: 100%; }
.formations-cta__actions .btn { width: 100%; justify-content: center; }
.jobs-hero { padding-top: 124px; }
.jobs-hero__title { font-size: 48px; }
.jobs-hero__stats { gap: 20px; }
.jobs-filters { position: static; }
.jobs-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
.job-chip { flex: 0 0 auto; }
.job-card {
grid-template-columns: 1fr;
padding: 22px;
}
.job-card__logo { display: none; }
.job-card__actions { justify-content: stretch; }
.job-card__link,
.job-card__cta { width: 100%; justify-content: center; }
.jobs-empty { padding: 56px 24px; }
.entreprise-cta__title { font-size: 44px; }
.entreprise-cta__btns { flex-direction: column; }
.entreprise-cta__btns .btn { justify-content: center; }
}
/* === index.html === */
.home-preview-banner {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 120;
max-width: min(420px, calc(100vw - 32px));
border: 1px solid rgba(253, 161, 0, .36);
border-radius: 18px;
background: rgba(253, 161, 0, .16);
color: #fff4db;
padding: 10px 14px;
text-align: center;
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
line-height: 1.35;
text-transform: uppercase;
}
@media (max-width: 760px) {
.home-preview-banner {
position: static;
max-width: none;
margin: 24px 16px;
border-radius: 16px;
}
}
.home-hero {
position: relative;
overflow: hidden;
min-height: 760px;
padding: 150px 0 96px;
background: #071615;
}
.home-hero__bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(7, 22, 21, .98) 0%, rgba(10, 46, 42, .95) 52%, rgba(8, 15, 14, .98) 100%);
}
.home-hero__bg::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: linear-gradient(to bottom, black, transparent 88%);
}
.home-hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(300px, .78fr);
gap: 72px;
align-items: center;
}
.home-hero__content { max-width: 760px; }
.home-hero__tag {
display: inline-flex;
align-items: center;
min-height: 36px;
margin: 0 0 28px;
padding: 0 16px;
border: 1px solid rgba(76,204,184,.35);
border-radius: var(--r-pill);
background: rgba(76,204,184,.1);
color: var(--teal);
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.home-hero__title {
max-width: 720px;
margin: 0;
color: #fff;
font-family: 'Josefin Sans', sans-serif;
font-size: 72px;
font-weight: 700;
line-height: .95;
letter-spacing: 0;
text-transform: uppercase;
text-wrap: balance;
}
.home-hero__sub {
max-width: 680px;
margin: 28px 0 0;
color: rgba(255,255,255,.78);
font-size: 18px;
line-height: 1.75;
}
.home-hero__ctas {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 36px;
}
.home-hero__badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 30px;
}
.home-hero__badge {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 34px;
padding: 0 13px;
border: 1px solid rgba(255,255,255,.16);
border-radius: var(--r-pill);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.76);
font-size: 13px;
font-weight: 600;
}
.home-hero__badge svg { color: var(--teal); }
.home-hero__media {
position: relative;
min-height: 480px;
margin: 0;
border: 1px solid rgba(255,255,255,.14);
border-radius: 24px;
overflow: hidden;
background: rgba(255,255,255,.92);
}
.home-hero__media img {
display: block;
width: 100%;
height: 100%;
min-height: 480px;
object-fit: cover;
}
.home-reference-strip {
background: var(--teal);
color: #071615;
}
.home-reference-strip__inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
max-width: 1280px;
margin: 0 auto;
}
.home-reference-stat {
min-height: 132px;
padding: 32px;
border-right: 1px solid rgba(7,22,21,.2);
}
.home-reference-stat:last-child { border-right: none; }
.home-reference-stat strong {
display: block;
margin-bottom: 6px;
font-family: 'Josefin Sans', sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 1;
}
.home-reference-stat span {
font-size: 12px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.home-section {
padding: 104px 0;
background: var(--bg-page);
}
.home-section--light {
background: #f4faf9;
color: #0a1615;
}
.home-section--light .home-section__title {
color: #0a1615;
}
.home-section__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
margin-bottom: 44px;
}
.home-section__head--dark .home-section__title { color: #fff; }
.home-section__eyebrow {
margin: 0 0 12px;
color: var(--teal);
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
}
.home-section__title {
max-width: 720px;
margin: 0;
color: var(--text-primary);
font-family: 'Josefin Sans', sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 1.04;
letter-spacing: 0;
text-transform: uppercase;
text-wrap: balance;
}
.home-directus-head-intro,
.home-directus-lead {
max-width: 760px;
margin: 16px 0 0;
color: var(--muted-on-dark);
font-size: 17px;
line-height: 1.75;
}
.home-section--light .home-directus-head-intro,
.home-section--light .home-directus-lead {
color: rgba(10,22,21,.68);
}
.home-directus-rich-text {
max-width: 780px;
margin-top: 28px;
color: var(--muted-on-dark);
font-size: 16px;
line-height: 1.78;
}
.home-section--light .home-directus-rich-text {
color: rgba(10,22,21,.68);
}
.home-directus-rich-text p,
.home-directus-rich-text blockquote {
margin: 0 0 16px;
}
.home-directus-rich-text h3 {
margin: 26px 0 12px;
color: var(--text-primary);
font-family: 'Josefin Sans', sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 1.1;
letter-spacing: 0;
text-transform: uppercase;
}
.home-section--light .home-directus-rich-text h3 {
color: #0a1615;
}
.home-directus-rich-text blockquote {
border-left: 3px solid var(--teal);
padding-left: 20px;
color: var(--text-primary);
font-family: 'Josefin Sans', sans-serif;
font-size: 24px;
font-weight: 600;
line-height: 1.3;
}
.home-directus-list-item {
position: relative;
padding-left: 26px;
}
.home-directus-list-item::before {
content: '';
position: absolute;
top: .72em;
left: 0;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--teal);
}
.home-directus-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.home-directus-split {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 56px;
align-items: center;
}
.home-directus-split--with-media {
grid-template-columns: minmax(0, .95fr) minmax(320px, .75fr);
}
.home-directus-media {
margin: 0;
overflow: hidden;
border: 1px solid rgba(7,22,21,.12);
border-radius: 22px;
background: rgba(255,255,255,.72);
}
.home-directus-media--wide {
max-height: 580px;
}
.home-directus-media img {
display: block;
width: 100%;
min-height: 340px;
object-fit: cover;
}
.home-card-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
background: rgba(7,22,21,.14);
}
.home-card-grid--three {
grid-template-columns: repeat(3, 1fr);
}
.home-card,
.home-quote-card,
.home-offer-card {
min-height: 270px;
padding: 34px 30px;
background: #fff;
color: #0a1615;
}
.home-card {
--home-card-accent: var(--teal);
display: flex;
flex-direction: column;
}
.home-card[data-home-theme="tech"] { --home-card-accent: var(--pole-tech); }
.home-card[data-home-theme="graph"] { --home-card-accent: var(--pole-graph); }
.home-card[data-home-theme="amber"] { --home-card-accent: var(--amber); }
.home-card[data-home-theme="com"] { --home-card-accent: var(--pole-com); }
.home-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
margin-bottom: 24px;
border-radius: 16px;
background: color-mix(in oklab, var(--home-card-accent) 15%, transparent);
color: var(--home-card-accent);
}
.home-card__meta,
.home-offer-card__meta,
.home-quote-card__type {
margin: 0 0 12px;
color: rgba(10,22,21,.56);
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.home-card__title,
.home-offer-card h3 {
margin: 0 0 14px;
color: #0a1615;
font-family: 'Josefin Sans', sans-serif;
font-size: 25px;
font-weight: 700;
line-height: 1.1;
letter-spacing: 0;
text-transform: uppercase;
}
.home-card__body,
.home-offer-card p {
margin: 0;
color: rgba(10,22,21,.68);
font-size: 14px;
line-height: 1.7;
}
.home-faq {
padding: 104px 0;
background: #071615;
}
.home-faq__list {
max-width: 920px;
border-top: 1px solid rgba(255,255,255,.14);
}
.home-faq__item {
border-bottom: 1px solid rgba(255,255,255,.14);
}
.home-faq__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 86px;
padding: 22px 0;
color: #fff;
cursor: pointer;
list-style: none;
font-family: 'Josefin Sans', sans-serif;
font-size: 23px;
font-weight: 700;
line-height: 1.2;
}
.home-faq__item summary::-webkit-details-marker { display: none; }
.home-faq__item summary svg { flex: 0 0 auto; color: var(--teal); }
.home-faq__answer {
max-width: 720px;
padding: 0 0 28px;
color: rgba(255,255,255,.72);
line-height: 1.75;
}
.home-faq__answer p { margin: 0 0 10px; }
.home-faq__category {
color: var(--teal);
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.home-quote-card {
border: 1px solid rgba(76,204,184,.16);
background: #0a201e;
color: #fff;
}
.home-quote-card blockquote {
margin: 0;
color: rgba(255,255,255,.86);
font-family: 'Josefin Sans', sans-serif;
font-size: 24px;
font-weight: 600;
line-height: 1.28;
}
.home-quote-card__author {
margin: 28px 0 0;
color: rgba(255,255,255,.62);
font-size: 13px;
}
.home-offer-card {
display: flex;
flex-direction: column;
gap: 14px;
}
.home-offer-card a {
margin-top: auto;
color: var(--teal);
font-weight: 800;
}
.home-empty-panel {
padding: 68px 32px;
border: 1.5px dashed rgba(10,22,21,.22);
border-radius: 22px;
background: #fff;
text-align: center;
}
.home-empty-panel--wide {
max-width: 880px;
margin: 0 auto;
}
.home-empty-panel__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
margin-bottom: 20px;
border-radius: 20px;
background: rgba(76,204,184,.12);
color: var(--teal);
}
.home-empty-panel h2,
.home-empty-panel h3 {
max-width: 720px;
margin: 0 auto 12px;
color: #0a1615;
font-family: 'Josefin Sans', sans-serif;
font-size: 34px;
font-weight: 700;
line-height: 1.08;
letter-spacing: 0;
text-transform: uppercase;
}
.home-empty-panel p {
max-width: 700px;
margin: 0 auto;
color: rgba(10,22,21,.66);
font-size: 15px;
line-height: 1.75;
}
.home-empty-panel__actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 26px;
}
.home-final-cta {
padding: 96px 0;
background: var(--teal);
color: #071615;
}
.home-final-cta__inner {
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.home-final-cta__eyebrow {
margin: 0 0 12px;
color: rgba(7,22,21,.62);
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
}
.home-final-cta h2 {
margin: 0;
font-family: 'Josefin Sans', sans-serif;
font-size: 56px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
text-wrap: balance;
}
.home-final-cta p:not(.home-final-cta__eyebrow) {
max-width: 700px;
margin: 18px auto 0;
color: rgba(7,22,21,.72);
font-size: 17px;
line-height: 1.7;
}
.home-final-cta__actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
margin-top: 34px;
}
.btn--ghost-dark {
border: 1.5px solid rgba(7,22,21,.32);
color: #071615;
}
.btn--ghost-dark:hover {
border-color: #071615;
background: rgba(7,22,21,.08);
}
@media (max-width: 1024px) {
.home-hero {
min-height: auto;
padding: 132px 0 82px;
}
.home-hero__inner {
grid-template-columns: 1fr;
gap: 46px;
}
.home-hero__title { font-size: 58px; }
.home-hero__media,
.home-hero__media img {
min-height: 360px;
}
.home-section__head {
align-items: flex-start;
flex-direction: column;
}
.home-card-grid,
.home-card-grid--three {
grid-template-columns: repeat(2, 1fr);
}
.home-card-grid--three > :last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.home-directus-split,
.home-directus-split--with-media {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.home-hero {
padding: 118px 0 64px;
}
.home-hero__title { font-size: 44px; }
.home-hero__sub { font-size: 16px; }
.home-hero__ctas .btn,
.home-final-cta__actions .btn {
width: 100%;
justify-content: center;
}
.home-hero__media,
.home-hero__media img {
min-height: 280px;
}
.home-reference-strip__inner,
.home-card-grid,
.home-card-grid--three {
grid-template-columns: 1fr;
}
.home-reference-stat {
min-height: 104px;
border-right: none;
border-bottom: 1px solid rgba(7,22,21,.2);
}
.home-section,
.home-faq,
.home-final-cta {
padding: 68px 0;
}
.home-section__title,
.home-final-cta h2 {
font-size: 36px;
}
.home-card,
.home-quote-card,
.home-offer-card {
min-height: 0;
padding: 28px 24px;
}
.home-directus-media img {
min-height: 260px;
}
.home-faq__item summary {
min-height: 72px;
font-size: 18px;
}
.home-empty-panel {
padding: 48px 24px;
}
.home-empty-panel h2,
.home-empty-panel h3 {
font-size: 28px;
}
}