/* =====================================================
POLICES AUTO-HÉBERGÉES — 23/09/2026.
Raleway et Inter étaient chargées depuis fonts.bunny.net, ce qui
transmettait à un tiers l'adresse IP, le navigateur et la page
d'origine de chaque visiteur, à chaque visite. Les fichiers sont
désormais servis depuis assets/fonts. Licence SIL Open Font License
1.1 pour les deux familles, l'auto-hébergement est autorisé.
Voir assets/fonts/LICENSE-Raleway.txt et LICENSE-Inter.txt.
font-display: swap conserve le comportement d'affichage antérieur.
===================================================== */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url('assets/fonts/raleway-latin-100-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url('assets/fonts/raleway-latin-200-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('assets/fonts/raleway-latin-300-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('assets/fonts/raleway-latin-400-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('assets/fonts/raleway-latin-500-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('assets/fonts/raleway-latin-600-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('assets/fonts/raleway-latin-ext-300-normal.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('assets/fonts/raleway-latin-ext-400-normal.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('assets/fonts/inter-latin-300-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('assets/fonts/inter-latin-500-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('assets/fonts/inter-latin-300-italic.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('assets/fonts/inter-latin-ext-300-normal.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('assets/fonts/inter-latin-400-italic.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('assets/fonts/inter-latin-ext-400-normal.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* =============================================================
SABATIER FORMATION — STYLE.CSS
v1 — avril 2026 — refonte site
Palette nuit-bleu / bleu acier / bleu vif
Typo Raleway (titres) + Inter (corps)
============================================================= */
/* Protection globale : blocage sélection / drag / long-press iOS sur toutes les images */
img,
picture,
.hero-bg,
.env-tile,
.env-bloc,
.pilier-line,
.cc-bandeau-img,
.expertise-background,
.filiales-background {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-drag: none;
user-drag: none;
-webkit-touch-callout: none;
}
/* ---------- VARIABLES GLOBALES ---------- */
:root {
/* Palette — validée DA */
--nuit-1: #001019;
--nuit-2: #092737;
--bleu-profond: #28567e;
--bleu-acier: #3a8ab8;
--bleu-vif: #5ebdf2;
--bleu-clair: #b5dff7;
--bleu-ardoise: #8dafc2;
--blanc: #f8f9fb;
/* Typographies */
--font-titre: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-corps: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Espacements */
--pad-section: 7rem 0;
--pad-section-mobile: 4rem 0;
--container-max: 1200px;
/* Transitions */
--t-fast: 200ms ease;
--t-base: 300ms ease;
--t-slow: 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
background: var(--nuit-1);
color: var(--blanc);
font-family: var(--font-corps);
font-weight: 300;
font-size: 16px;
line-height: 1.7;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
/* ---------- TYPOGRAPHIE BASE ---------- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-titre);
font-weight: 300;
letter-spacing: -0.01em;
line-height: 1.2;
}
em { font-family: var(--font-corps); font-style: italic; font-weight: 300; }
/* ---------- CONTAINER ---------- */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 4rem;
}
@media (max-width: 768px) {
.container { padding: 0 1.5rem; }
}
/* ---------- LABELS DE SECTION (eyebrow) ---------- */
.section-label {
font-family: var(--font-titre);
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--bleu-acier);
margin-bottom: 2.5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.section-label::before {
content: '';
width: 2rem;
height: 1px;
background: var(--bleu-acier);
opacity: 0.6;
}
/* ============================================================
NAVIGATION
============================================================ */
nav#mainNav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.4rem 4rem;
background: rgba(0, 16, 25, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(94, 189, 242, 0.08);
transition: padding var(--t-base);
}
.nav-logo {
display: flex;
align-items: center;
color: var(--blanc);
font-family: var(--font-titre);
line-height: 1;
}
.nav-logo .nav-logo-text {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1;
}
.nav-logo .nav-logo-main {
font-size: 1rem;
font-weight: 300;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--blanc);
}
.nav-logo .nav-logo-sub {
font-size: 0.55rem;
font-weight: 300;
letter-spacing: 0.45em;
text-transform: uppercase;
color: var(--bleu-clair);
margin-top: 0.25rem;
padding-left: 0.45em;
}
.nav-logo .dots {
display: inline-flex;
gap: 0.28rem;
margin-top: 0.35rem;
justify-content: center;
}
.nav-logo .dot { display: inline-block; width: 0.4rem; height: 0.4rem; border-radius: 50%; }
/* Mode hero (home page) : le logo entier disparaît en fondu doux tant que le hero est à l'écran */
#mainNav .nav-logo {
transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
filter 900ms cubic-bezier(0.16, 1, 0.3, 1);
transform: translateY(0);
filter: blur(0);
}
#mainNav.hero-mode .nav-logo {
opacity: 0;
transform: translateY(-8px);
filter: blur(3px);
pointer-events: none;
}
.nav-logo .dot-1 { background: var(--bleu-profond); }
.nav-logo .dot-2 { background: var(--bleu-acier); }
.nav-logo .dot-3 { background: var(--bleu-clair); }
.nav-links {
display: flex;
gap: 2.5rem;
list-style: none;
}
.nav-links a {
font-family: var(--font-titre);
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--bleu-ardoise);
transition: color var(--t-base);
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -0.4rem; left: 0;
width: 0; height: 1px;
background: var(--bleu-vif);
transition: width var(--t-base);
}
.nav-links a:hover { color: var(--blanc); }
.nav-links a:hover::after { width: 100%; }
.nav-cta {
font-family: var(--font-titre);
font-size: 0.68rem;
font-weight: 400;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--bleu-vif);
border: 1px solid var(--bleu-vif);
padding: 0.6rem 1.4rem;
transition: background var(--t-base), color var(--t-base);
}
.nav-cta:hover { background: var(--bleu-vif); color: var(--nuit-1); }
@media (max-width: 1150px) {
nav#mainNav { padding: 1rem 1.5rem; }
.nav-links, nav#mainNav > .nav-cta { display: none; }
.nav-burger { display: flex; }
}
/* ============================================================
MENU BURGER MOBILE
============================================================ */
.nav-burger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
width: 36px;
height: 36px;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
z-index: 110;
position: relative;
}
.nav-burger span {
display: block;
width: 26px;
height: 1.5px;
background: var(--bleu-clair);
transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 200ms ease;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.nav-burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.mobile-menu {
position: fixed;
inset: 0;
background: var(--nuit-1);
z-index: 99;
opacity: 0;
pointer-events: none;
transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 5rem 2rem 3rem;
overflow-y: auto;
}
.mobile-menu::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(40, 86, 126, 0.25) 0%, transparent 70%);
pointer-events: none;
}
.mobile-menu.open {
opacity: 1;
pointer-events: auto;
}
.mobile-menu-links {
list-style: none;
text-align: center;
margin: 0;
padding: 0;
position: relative;
z-index: 1;
}
.mobile-menu-links li {
margin-bottom: 1.8rem;
opacity: 0;
transform: translateY(15px);
transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu.open .mobile-menu-links li { opacity: 1; transform: translateY(0); }
.mobile-menu.open .mobile-menu-links li:nth-child(1) { transition-delay: 200ms; }
.mobile-menu.open .mobile-menu-links li:nth-child(2) { transition-delay: 280ms; }
.mobile-menu.open .mobile-menu-links li:nth-child(3) { transition-delay: 360ms; }
.mobile-menu.open .mobile-menu-links li:nth-child(4) { transition-delay: 440ms; }
.mobile-menu.open .mobile-menu-links li:nth-child(5) { transition-delay: 520ms; }
.mobile-menu-links a {
font-family: var(--font-titre);
font-size: clamp(1.4rem, 4vw, 1.8rem);
font-weight: 200;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--blanc);
text-decoration: none;
display: inline-block;
padding: 0.5rem 0;
transition: color var(--t-base);
}
.mobile-menu-links a:hover,
.mobile-menu-links a:focus { color: var(--bleu-vif); }
.mobile-menu-footer {
margin-top: 3rem;
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
justify-content: center;
font-family: var(--font-titre);
font-size: 0.7rem;
letter-spacing: 0.25em;
text-transform: uppercase;
position: relative;
z-index: 1;
opacity: 0;
transition: opacity 700ms ease 700ms;
}
.mobile-menu.open .mobile-menu-footer { opacity: 1; }
.mobile-menu-footer a {
color: var(--bleu-ardoise);
text-decoration: none;
transition: color var(--t-base);
}
.mobile-menu-footer a:hover { color: var(--blanc); }
.mobile-menu-contact {
margin-top: 2rem;
position: relative;
z-index: 1;
opacity: 0;
transition: opacity 700ms ease 800ms;
}
.mobile-menu.open .mobile-menu-contact { opacity: 1; }
.mobile-menu-contact a {
font-family: var(--font-titre);
font-size: 0.75rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--bleu-vif);
border: 1px solid var(--bleu-vif);
padding: 0.9rem 2.2rem;
text-decoration: none;
transition: all var(--t-base);
}
.mobile-menu-contact a:hover {
background: var(--bleu-vif);
color: var(--nuit-1);
}
/* Empêcher le scroll du body quand le menu est ouvert */
body.menu-open { overflow: hidden; }
/* ============================================================
ACCESSIBILITÉ — focus visible + reduced motion
============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--bleu-vif);
outline-offset: 4px;
}
/* Skip link (accessibilité — clavier) */
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: 200;
font-family: var(--font-titre);
font-size: 0.8rem;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.skip-link:focus,
.skip-link:focus-visible {
position: fixed;
top: 1rem;
left: 1rem;
width: auto;
height: auto;
padding: 0.8rem 1.4rem;
background: var(--nuit-2);
color: var(--bleu-vif);
border: 1px solid var(--bleu-vif);
text-decoration: none;
}
/* Visually-hidden utility (titres SEO non visibles à l'œil mais lus par lecteurs d'écran) */
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Page 404 */
.page-404 {
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 12rem 2rem 6rem;
background: linear-gradient(160deg, var(--nuit-2) 0%, var(--nuit-1) 100%);
position: relative;
overflow: hidden;
}
.page-404 .container { max-width: 640px; position: relative; z-index: 1; }
.page-404 .num-404 {
font-family: var(--font-titre);
font-weight: 100;
font-size: clamp(5rem, 12vw, 10rem);
color: var(--bleu-acier);
line-height: 1;
margin-bottom: 1.5rem;
letter-spacing: 0.05em;
}
.page-404 h1 {
font-family: var(--font-titre);
font-weight: 200;
font-size: clamp(1.6rem, 3vw, 2.2rem);
color: var(--blanc);
margin-bottom: 1.5rem;
letter-spacing: 0.005em;
}
.page-404 p {
font-size: 1rem;
color: rgba(248, 249, 251, 0.5);
line-height: 1.85;
margin-bottom: 3rem;
}
/* Aucune gestion globale de prefers-reduced-motion n'est actuellement
en place. À traiter ultérieurement si arbitré. */
/* ============================================================
MOBILE PRIORITAIRE — confort lecture, boutons, formulaire
============================================================ */
@media (max-width: 768px) {
.section-label {
font-size: 0.62rem;
letter-spacing: 0.22em;
line-height: 1.5;
}
.btn-primary,
.btn-hero,
.cta-teaser,
.contact-form-submit {
width: 100%;
justify-content: center;
text-align: center;
letter-spacing: 0.18em;
}
.env-secteurs {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: flex-start;
}
.env-secteurs span {
white-space: normal;
line-height: 1.4;
padding-right: 1.2rem;
}
.env-secteurs span:not(:last-child)::after { right: 0.2rem; }
.ticker-track {
animation-duration: 45s;
}
.mobile-menu {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.contact-coord-value {
font-size: 1.1rem;
word-break: break-word;
}
.contact-coord-value a { word-break: break-all; }
}
/* ============================================================
FIX DÉGRADÉS MOBILE
- Active GPU rendering (évite le banding)
- Renforce le contraste des dégradés sur petit écran
============================================================ */
@media (max-width: 900px) {
.hero-bg,
.hero-noise,
section#hero,
section#metier::before,
section#methode::before,
section#expertises::before,
section#realisations::before,
section#equipe::before,
section#contact::before,
section#environnements::before {
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* Hero — dégradé plus marqué pour mobile */
.hero-bg {
background:
radial-gradient(ellipse 95% 70% at 50% 35%, rgba(58, 138, 184, 0.48) 0%, transparent 60%),
radial-gradient(ellipse 50% 40% at 50% 55%, rgba(94, 189, 242, 0.10) 0%, transparent 60%),
linear-gradient(180deg, var(--nuit-2) 0%, var(--nuit-1) 75%, #000508 100%);
}
/* Sections — halos plus visibles */
section#metier { background: linear-gradient(180deg, var(--nuit-1) 0%, rgba(9, 39, 55, 0.7) 100%); }
section#methode { background: linear-gradient(180deg, rgba(9, 39, 55, 0.7) 0%, var(--nuit-1) 100%); }
section#expertises { background: linear-gradient(180deg, var(--nuit-1) 0%, rgba(9, 39, 55, 0.6) 100%); }
section#realisations { background: linear-gradient(180deg, rgba(9, 39, 55, 0.6) 0%, var(--nuit-1) 100%); }
section#equipe { background: linear-gradient(180deg, var(--nuit-1) 0%, rgba(9, 39, 55, 0.7) 100%); }
/* Mobile : rien de spécial à faire pour le fond, il est déjà uniforme. */
}
/* ============================================================
HERO
============================================================ */
section#hero {
min-height: 100vh;
padding: 6rem 0 4rem;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
background: var(--nuit-1);
}
.hero-bg {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 80% 70% at 50% 45%, rgba(40, 86, 126, 0.32) 0%, transparent 70%),
radial-gradient(ellipse 40% 30% at 50% 50%, rgba(94, 189, 242, 0.05) 0%, transparent 60%),
linear-gradient(180deg, var(--nuit-2) 0%, var(--nuit-1) 70%);
}
.hero-noise {
position: absolute; inset: 0;
pointer-events: none;
opacity: 0.35;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
}
/* Indicateur de scroll — filet + chevron cliquable, disparaît au premier scroll */
.hero-scroll-indicator {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.7rem;
color: var(--bleu-clair);
text-decoration: none;
padding: 0.5rem 1rem 0.35rem;
border-radius: 10px;
opacity: 1;
transition: opacity 400ms ease, transform 400ms ease;
z-index: 4;
}
.hero-scroll-indicator__line {
display: block;
width: 1px;
height: 2.75rem;
background: linear-gradient(to bottom, transparent, var(--bleu-clair));
animation: hero-scroll-line 3.6s ease-in-out infinite;
}
.hero-scroll-indicator__chevron {
width: 30px;
height: 30px;
display: block;
animation: hero-scroll-chevron 1.8s ease-in-out infinite;
will-change: transform;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
@keyframes hero-scroll-line {
0%, 100% { opacity: 0.55; height: 2.25rem; }
50% { opacity: 1; height: 3rem; }
}
@keyframes hero-scroll-chevron {
0%, 100% { transform: translateY(0); opacity: 0.9; }
50% { transform: translateY(8px); opacity: 1; }
}
.hero-scroll-indicator:hover .hero-scroll-indicator__chevron {
animation-duration: 1.2s;
}
.hero-scroll-indicator:focus-visible {
outline: 2px solid var(--bleu-vif);
outline-offset: 3px;
}
body.is-scrolled .hero-scroll-indicator {
opacity: 0;
pointer-events: none;
transform: translate(-50%, 10px);
}
.hero-content {
position: relative;
z-index: 2;
padding: 0 2rem;
}
.hero-logo {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 1.5rem;
line-height: 1;
}
.hero-logo-main {
font-family: var(--font-titre);
font-size: clamp(4.91rem, 12.64vw, 9.83rem);
font-weight: 200;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--blanc);
line-height: 1;
}
.hero-logo-sub {
font-family: var(--font-titre);
font-size: clamp(1.54rem, 3.09vw, 2.39rem);
font-weight: 300;
letter-spacing: 0.55em;
text-transform: uppercase;
color: var(--bleu-clair);
margin-top: 0.84rem;
padding-left: 0.55em; /* compense le letter-spacing du dernier caractère pour centrer */
}
.hero-dots {
display: flex;
justify-content: center;
gap: 0.7rem;
margin: 2.1rem 0 2.93rem;
}
.hero-dots .dot {
width: 0.99rem;
height: 0.99rem;
border-radius: 50%;
}
.hero-dots .dot-1 { background: var(--bleu-profond); }
.hero-dots .dot-2 { background: var(--bleu-acier); }
.hero-dots .dot-3 { background: var(--bleu-clair); }
.hero-baseline {
font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
font-size: clamp(1.43rem, 2.34vw, 1.82rem);
font-style: italic;
font-weight: 400;
letter-spacing: 0.02em;
color: rgba(141, 175, 194, 0.85);
margin-bottom: 4rem;
}
.hero-baseline em {
font-style: italic;
}
.hero-baseline .bullet {
font-style: normal;
color: var(--bleu-vif);
margin: 0 1rem;
font-size: 0.85em;
vertical-align: middle;
}
.btn-hero {
display: inline-block;
font-family: var(--font-titre);
font-size: 0.82rem;
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--bleu-ardoise);
border: 1px solid rgba(141, 175, 194, 0.3);
padding: 1.05rem 2.81rem;
transition: all var(--t-base);
}
.btn-hero:hover {
color: var(--blanc);
border-color: var(--bleu-vif);
transform: translateY(-2px);
}
/* Baseline "Comprendre · Structurer · Progresser" au-dessus du bouton Découvrir */
.hero-baseline {
margin: 2.81rem auto 3.51rem;
font-family: var(--font-titre);
font-weight: 300;
font-style: normal;
font-size: 1.78rem;
letter-spacing: 0.14em;
color: rgba(248, 249, 251, 0.85);
text-align: center;
}
/* UVP quand elle passe SOUS le bouton — descend + réduit de 30% */
.hero-uvp.hero-uvp-below { margin-top: 5.5rem; font-size: 1.09rem; }
@media (max-width: 700px) {
.hero-baseline { font-size: 1.43rem; letter-spacing: 0.1em; margin: 2rem auto 2.4rem; }
.hero-uvp.hero-uvp-below { margin-top: 3.5rem; font-size: 0.97rem; }
}
/* ============================================================
SECTIONS GÉNÉRIQUES
============================================================ */
section {
padding: var(--pad-section);
position: relative;
overflow: hidden;
}
@media (max-width: 768px) {
section { padding: var(--pad-section-mobile); }
}
.divider {
height: 1px;
background: linear-gradient(to right, transparent, rgba(94, 189, 242, 0.15), transparent);
margin: 0 auto;
max-width: 80%;
}
/* ---------- Fond global homogène ----------
Fond uniforme nuit-1 partout, sans dégradés ni halos qui
créent des artefacts visuels. Les "respirations" lumineuses
sont confinées au hero et au bloc contact. */
body {
background: var(--nuit-1);
}
section#metier,
section#methode,
section#expertises,
section#realisations,
section#equipe,
section#environnements {
background: transparent;
}
section#contact {
position: relative;
overflow: hidden;
background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(40, 86, 126, 0.25) 0%, transparent 70%), var(--nuit-1);
}
/* Fond photo — bandeau CTA « Échangeons » */
.contact-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.contact-bg picture,
.contact-bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
transform: scale(1.01);
filter: brightness(.78) saturate(.92);
}
.contact-bg::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 58% 52% at 50% 50%, rgba(4, 19, 27, .18) 0%, rgba(4, 19, 27, .52) 100%),
linear-gradient(180deg, rgba(4, 19, 27, .42) 0%, rgba(4, 19, 27, .28) 45%, rgba(4, 19, 27, .62) 100%);
}
/* Garantir que les contenus passent au-dessus de l'ambiance */
section .container,
section#contact .container { position: relative; z-index: 1; }
/* ============================================================
ENVIRONNEMENTS
============================================================ */
.env-headline {
font-family: var(--font-titre);
font-size: clamp(1.9rem, 3.6vw, 2.9rem);
font-weight: 200;
color: var(--blanc);
max-width: 900px;
line-height: 1.3;
margin-bottom: 2.5rem;
letter-spacing: 0.005em;
}
.env-body {
font-size: 0.98rem;
color: rgba(248, 249, 251, 0.42);
max-width: 720px;
line-height: 1.95;
margin-bottom: 4rem;
}
.env-secteurs {
display: flex;
flex-wrap: wrap;
gap: 1.5rem 2.5rem;
font-family: var(--font-titre);
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--bleu-clair);
}
.env-secteurs span {
position: relative;
padding-right: 2.5rem;
}
.env-secteurs span:not(:last-child)::after {
content: '•';
position: absolute;
right: 0.5rem;
color: var(--bleu-acier);
opacity: 0.5;
}
@media (max-width: 768px) {
.env-secteurs { flex-direction: column; gap: 0.8rem; }
.env-secteurs span { padding-right: 0; }
.env-secteurs span:not(:last-child)::after { display: none; }
}
/* ============================================================
BANDEAU CLIENTS (TICKER) — repris fidèlement de la v originale
============================================================ */
section#clients {
padding: 5rem 0;
background: rgba(9, 39, 55, 0.3);
border-top: 1px solid rgba(94, 189, 242, 0.08);
border-bottom: 1px solid rgba(94, 189, 242, 0.08);
overflow: hidden;
position: relative;
}
.clients-label {
text-align: center;
font-family: var(--font-titre);
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0.5em;
text-transform: uppercase;
color: rgba(141, 175, 194, 0.78);
margin-bottom: 3rem;
}
.clients-sub {
display: block;
margin-top: 0.9rem;
font-family: 'Inter', sans-serif;
font-weight: 300;
font-style: italic;
font-size: 0.72rem;
letter-spacing: 0.05em;
text-transform: none;
color: rgba(141, 175, 194, 0.55);
}
.ticker-wrapper {
width: 100%;
overflow: hidden;
position: relative;
}
section#clients::before,
section#clients::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 120px;
z-index: 2;
pointer-events: none;
}
section#clients::before {
left: 0;
background: linear-gradient(to right, var(--nuit-1), transparent);
}
section#clients::after {
right: 0;
background: linear-gradient(to left, var(--nuit-1), transparent);
}
.ticker-track {
display: flex;
width: max-content;
align-items: center;
gap: 0;
animation: ticker 110s linear infinite;
}
/* Ticker : le défilement continue même quand la souris survole */
@keyframes ticker {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.ticker-item {
display: flex;
align-items: center;
justify-content: center;
padding: 0 5rem;
flex-shrink: 0;
position: relative;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.ticker-item:focus-visible {
outline: 1px solid rgba(94, 189, 242, 0.6);
outline-offset: 4px;
}
.ticker-item::after {
content: '';
position: absolute;
right: 0;
width: 1px;
height: 28px;
background: rgba(94, 189, 242, 0.1);
}
.ticker-item .dot {
width: 4px; height: 4px;
border-radius: 50%;
background: var(--bleu-vif);
opacity: 0.3;
margin-right: 1.2rem;
flex-shrink: 0;
transition: opacity var(--t-base);
}
.ticker-name {
font-family: var(--font-titre);
font-weight: 200;
font-size: 2.05rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(248, 249, 251, 0.35);
white-space: nowrap;
transition: color var(--t-base);
}
.ticker-item:hover .ticker-name { color: rgba(248, 249, 251, 0.75); }
.ticker-item:hover .dot { opacity: 1; }
/* ============================================================
MÉTIER
============================================================ */
.metier-headline {
font-size: clamp(1.9rem, 3.2vw, 2.6rem);
font-weight: 300;
color: var(--blanc);
max-width: 850px;
line-height: 1.3;
margin-bottom: 1.2rem;
}
.metier-subline {
font-family: var(--font-titre);
font-weight: 200;
font-size: clamp(1.1rem, 1.6vw, 1.3rem);
color: rgba(181, 223, 247, 0.7);
max-width: 720px;
line-height: 1.6;
margin-bottom: 3rem;
letter-spacing: 0.02em;
}
.metier-intro {
font-size: 0.98rem;
color: rgba(248, 249, 251, 0.42);
max-width: 780px;
line-height: 1.95;
margin-bottom: 6rem;
}
.metier-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4rem 5rem;
}
.metier-bloc h4 {
font-family: var(--font-titre);
font-size: 1.05rem;
font-weight: 500;
color: var(--blanc);
margin-bottom: 1.2rem;
letter-spacing: 0.02em;
}
.metier-bloc p {
font-size: 0.9rem;
color: rgba(248, 249, 251, 0.4);
line-height: 1.95;
}
@media (max-width: 768px) {
.metier-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
/* ============================================================
MÉTHODE
============================================================ */
.methode-headline {
font-family: var(--font-titre);
font-weight: 200;
font-size: clamp(1.9rem, 3.2vw, 2.6rem);
color: var(--blanc);
max-width: 750px;
line-height: 1.3;
margin-bottom: 1.5rem;
letter-spacing: 0.005em;
}
.methode-sub {
font-size: 0.98rem;
color: rgba(248, 249, 251, 0.4);
max-width: 720px;
line-height: 1.95;
margin-bottom: 5rem;
}
.methode-list {
list-style: none;
display: grid;
gap: 2rem;
max-width: 850px;
}
.methode-step {
display: grid;
grid-template-columns: 8rem 1fr;
gap: 2.5rem;
align-items: center;
padding: 2.5rem 0;
border-top: 1px solid rgba(94, 189, 242, 0.08);
}
.methode-step:last-child { border-bottom: 1px solid rgba(94, 189, 242, 0.08); }
.methode-num {
font-family: var(--font-titre);
font-size: clamp(3rem, 5vw, 4.5rem);
font-weight: 100;
color: var(--bleu-acier);
letter-spacing: 0;
line-height: 1;
opacity: 0.85;
}
.methode-step h4 {
font-family: var(--font-titre);
font-size: clamp(1.2rem, 1.6vw, 1.4rem);
font-weight: 400;
color: var(--blanc);
margin-bottom: 0.7rem;
letter-spacing: 0.005em;
}
.methode-step p {
font-size: 0.95rem;
color: rgba(248, 249, 251, 0.45);
line-height: 1.85;
}
@media (max-width: 768px) {
.methode-step { grid-template-columns: 5rem 1fr; gap: 1.5rem; padding: 1.8rem 0; }
.methode-num { font-size: 2.6rem; }
}
/* ============================================================
EXPERTISES
============================================================ */
.expertise-headline {
font-family: var(--font-titre);
font-weight: 200;
font-size: clamp(1.9rem, 3.2vw, 2.6rem);
color: var(--blanc);
max-width: 850px;
line-height: 1.3;
margin-bottom: 1.5rem;
letter-spacing: 0.005em;
}
.expertise-sub {
font-size: 0.98rem;
color: rgba(248, 249, 251, 0.55);
max-width: 760px;
line-height: 1.95;
margin-bottom: 5rem;
}
.expertise-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem 4rem;
}
.expertise-bloc {
padding: 2rem 0;
border-top: 1px solid rgba(94, 189, 242, 0.08);
}
.expertise-bloc h3 {
font-family: var(--font-titre);
font-size: 1.15rem;
font-weight: 400;
color: var(--blanc);
margin-bottom: 1.2rem;
letter-spacing: 0.005em;
}
.expertise-bloc p {
font-size: 0.9rem;
color: rgba(248, 249, 251, 0.4);
line-height: 1.95;
}
@media (max-width: 768px) {
.expertise-grid { grid-template-columns: 1fr; gap: 1rem; }
}
/* ============================================================
RÉALISATIONS
============================================================ */
.real-headline {
font-family: var(--font-titre);
font-weight: 200;
font-size: clamp(1.9rem, 3.2vw, 2.6rem);
color: var(--blanc);
max-width: 900px;
line-height: 1.35;
margin-bottom: 5rem;
letter-spacing: 0.005em;
}
.real-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
margin-bottom: 5rem;
}
.real-bloc {
padding: 2rem;
background: rgba(9, 39, 55, 0.3);
border: 1px solid rgba(94, 189, 242, 0.06);
transition: border-color var(--t-base), background var(--t-base);
}
.real-bloc:hover {
border-color: rgba(94, 189, 242, 0.18);
background: rgba(9, 39, 55, 0.5);
}
.real-bloc h4 {
font-family: var(--font-titre);
font-size: 1rem;
font-weight: 500;
color: var(--blanc);
margin-bottom: 1.2rem;
line-height: 1.4;
letter-spacing: 0.01em;
}
.real-bloc p {
font-size: 0.85rem;
color: rgba(248, 249, 251, 0.4);
line-height: 1.95;
}
.real-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
padding: 3rem 0;
border-top: 1px solid rgba(94, 189, 242, 0.08);
}
.real-stat {
text-align: center;
}
.real-stat .num {
font-family: var(--font-titre);
font-size: clamp(1.8rem, 3vw, 2.5rem);
font-weight: 200;
color: var(--bleu-vif);
margin-bottom: 0.5rem;
letter-spacing: 0.02em;
}
.real-stat .label {
font-family: var(--font-titre);
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--bleu-ardoise);
}
@media (max-width: 900px) {
.real-grid { grid-template-columns: 1fr; }
.real-stats { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
}
/* ============================================================
ÉQUIPE (sobre)
============================================================ */
.equipe-headline {
font-family: var(--font-titre);
font-weight: 200;
font-size: clamp(1.9rem, 3.2vw, 2.6rem);
color: var(--blanc);
max-width: 750px;
line-height: 1.3;
margin-bottom: 2rem;
letter-spacing: 0.005em;
}
.equipe-intro {
font-family: var(--font-titre);
font-weight: 200;
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: rgba(181, 223, 247, 0.55);
max-width: 720px;
line-height: 1.75;
margin-bottom: 6rem;
letter-spacing: 0.02em;
}
.equipe-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2rem;
margin-bottom: 4rem;
}
.equipe-card {
text-align: center;
}
.equipe-photo {
width: 100%;
aspect-ratio: 4 / 5;
background: var(--nuit-2);
border: 1px solid rgba(94, 189, 242, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-titre);
font-size: 1.4rem;
font-weight: 200;
color: var(--bleu-acier);
letter-spacing: 0.1em;
margin-bottom: 1.2rem;
overflow: hidden;
}
.equipe-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2); }
.equipe-card h3, .equipe-card h4 {
font-family: var(--font-titre);
font-size: 0.95rem;
font-weight: 500;
color: var(--blanc);
margin-bottom: 0.3rem;
}
.equipe-role {
font-family: var(--font-corps);
font-size: 0.78rem;
font-style: italic;
color: rgba(248, 249, 251, 0.5);
line-height: 1.5;
margin-bottom: 0.7rem;
min-height: 2.5rem;
}
.equipe-linkedin {
font-family: var(--font-titre);
font-size: 0.65rem;
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--bleu-vif);
transition: color var(--t-base);
}
.equipe-linkedin:hover { color: var(--bleu-clair); }
@media (max-width: 1100px) {
.equipe-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
.equipe-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.equipe-grid { grid-template-columns: 1fr; max-width: 320px; margin-left: auto; margin-right: auto; }
}
/* ============================================================
CTA TEASER (lien "Voir...")
============================================================ */
.cta-teaser {
display: inline-flex;
align-items: center;
gap: 0.7rem;
margin-top: 3rem;
font-family: var(--font-titre);
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--bleu-vif);
border-bottom: 1px solid rgba(94, 189, 242, 0.4);
padding-bottom: 0.5rem;
transition: all var(--t-base);
}
.cta-teaser::after { content: '→'; transition: transform var(--t-base); }
.cta-teaser:hover { color: var(--blanc); border-color: var(--blanc); }
.cta-teaser:hover::after { transform: translateX(4px); }
/* ============================================================
CONTACT
============================================================ */
section#contact {
text-align: center;
border-top: 1px solid rgba(94, 189, 242, 0.08);
}
section#contact .section-label { justify-content: center; }
section#contact .section-label::before { display: none; }
.contact-headline {
font-family: var(--font-titre);
font-weight: 200;
font-size: clamp(1.9rem, 3.6vw, 2.9rem);
color: var(--blanc);
max-width: 800px;
margin: 0 auto 2.5rem;
line-height: 1.3;
letter-spacing: 0.005em;
}
.contact-sub {
font-size: 0.98rem;
color: rgba(248, 249, 251, 0.72);
max-width: 640px;
margin: 0 auto 4rem;
line-height: 1.95;
}
.btn-primary {
display: inline-block;
font-family: var(--font-titre);
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--bleu-vif);
background: transparent;
border: 1px solid var(--bleu-vif);
padding: 1rem 2.5rem;
cursor: pointer;
transition: all var(--t-base);
}
.btn-primary:hover { background: var(--bleu-vif); color: var(--nuit-1); transform: translateY(-2px); }
/* ============================================================
FOOTER
============================================================ */
footer {
padding: 3rem 4rem;
background: var(--nuit-1);
border-top: 1px solid rgba(94, 189, 242, 0.08);
font-family: var(--font-titre);
font-size: 0.72rem;
letter-spacing: 0.15em;
}
.footer-grid {
max-width: var(--container-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: end;
}
.footer-left .footer-logo {
font-family: 'Raleway', sans-serif !important;
font-size: 1.05rem;
font-weight: 300;
letter-spacing: 0.16em;
color: var(--blanc);
margin-bottom: 0.6rem;
display: flex;
align-items: center;
gap: 0.55rem;
}
.footer-baseline {
font-size: 0.65rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--bleu-ardoise);
margin-bottom: 1.5rem;
}
.footer-groupe {
font-size: 0.68rem;
letter-spacing: 0.15em;
color: var(--bleu-ardoise);
}
.footer-groupe a { color: var(--bleu-vif); transition: color var(--t-base); }
.footer-groupe a:hover { color: var(--blanc); }
.footer-groupe .groupe-link { color: var(--bleu-ardoise); }
.footer-groupe a.groupe-link { text-decoration: none; }
.footer-groupe a.groupe-link:hover { color: var(--bleu-vif); }
/* Logo footer cliquable (Sabatier Formation → LinkedIn) */
.footer-left .footer-logo a {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: inherit;
text-decoration: none;
transition: color var(--t-base);
}
.footer-left .footer-logo a:hover { color: var(--bleu-vif); }
.footer-right {
text-align: right;
font-size: 0.68rem;
letter-spacing: 0.15em;
color: var(--bleu-ardoise);
}
.footer-utility {
display: flex;
justify-content: flex-end;
gap: 1.2rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.footer-utility a {
color: var(--bleu-ardoise);
transition: color var(--t-base);
position: relative;
}
.footer-utility a:hover { color: var(--blanc); }
.footer-utility a:not(:last-child)::after {
content: '·';
position: absolute;
right: -0.85rem;
color: var(--bleu-acier);
opacity: 0.6;
}
.footer-copy { font-family: 'Raleway', sans-serif !important; font-weight: 300; font-size: 0.75rem; letter-spacing: 0.16em; color: rgba(141, 175, 194, 0.78); }
footer, footer * { font-family: 'Raleway', sans-serif; }
@media (max-width: 768px) {
footer { padding: 2.5rem 1.5rem; }
.footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.footer-right { text-align: left; }
.footer-utility { justify-content: flex-start; }
}
/* ============================================================
ANIMATIONS REVEAL — fade pur, sans aucun mouvement
Déclenché par IntersectionObserver (JS)
============================================================ */
@keyframes reveal-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* État initial : invisible */
.reveal {
opacity: 0;
transition: opacity 3000ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity;
}
.reveal.visible { opacity: 1; }
.reveal-delay-1 { transition-delay: 150ms; }
.reveal-delay-2 { transition-delay: 300ms; }
.reveal-delay-3 { transition-delay: 450ms; }
.reveal-delay-4 { transition-delay: 600ms; }
/* Hero : animation plus lente et plus contemplative au chargement */
#hero .reveal { transition-duration: 4800ms; }
#hero .reveal-delay-1 { transition-delay: 600ms; }
#hero .reveal-delay-2 { transition-delay: 1100ms; }
#hero .reveal-delay-3 { transition-delay: 1700ms; }
/* Fallback no-JS : anim auto au chargement */
.no-js .reveal {
animation: reveal-fade 3000ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.no-js .reveal-delay-1 { animation-delay: 150ms; }
.no-js .reveal-delay-2 { animation-delay: 300ms; }
.no-js .reveal-delay-3 { animation-delay: 450ms; }
.no-js .reveal-delay-4 { animation-delay: 600ms; }
/* Aucune règle prefers-reduced-motion n'est active dans cette feuille. */
/* ============================================================
SPLITTEXT — Animation mot par mot
============================================================ */
.splittext .split-word {
display: inline-block;
overflow: hidden;
vertical-align: top;
line-height: inherit;
}
.splittext .split-word-inner {
display: inline-block;
opacity: 0;
transform: translateY(110%);
transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms),
transform 1100ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms);
will-change: opacity, transform;
}
.splittext.split-visible .split-word-inner {
opacity: 1;
transform: translateY(0);
}
/* ============================================================
NAV — Transition compact
============================================================ */
nav#mainNav {
transition: padding 400ms cubic-bezier(0.22, 1, 0.36, 1),
background 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
nav#mainNav.compact {
padding: 0.85rem 4rem;
background: rgba(0, 16, 25, 0.96);
}
@media (max-width: 900px) {
nav#mainNav.compact { padding: 0.75rem 1.5rem; }
}
/* ============================================================
HOVER DÉTAILLÉS — Cartes Équipe + Réalisations
============================================================ */
/* ÉQUIPE — élévation + lumière qui passe */
.equipe-card {
cursor: default;
transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.equipe-card:hover { transform: translateY(-6px); }
.equipe-photo {
position: relative;
overflow: hidden;
transition: border-color var(--t-base);
}
.equipe-photo::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 80%;
height: 100%;
background: linear-gradient(
100deg,
transparent 0%,
rgba(94, 189, 242, 0.12) 50%,
transparent 100%
);
pointer-events: none;
transition: left 1300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.equipe-card:hover .equipe-photo {
border-color: rgba(94, 189, 242, 0.35);
}
.equipe-card:hover .equipe-photo::after {
left: 130%;
}
.equipe-card:hover .equipe-photo img {
filter: grayscale(0) brightness(1.05);
transition: filter 800ms ease;
}
/* RÉALISATIONS — hover détaillé (élévation + lumière) */
.real-bloc {
cursor: default;
position: relative;
overflow: hidden;
transition: border-color 500ms ease,
background 500ms ease,
transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.real-bloc::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(
100deg,
transparent 0%,
rgba(94, 189, 242, 0.06) 50%,
transparent 100%
);
pointer-events: none;
transition: left 1000ms cubic-bezier(0.22, 1, 0.36, 1);
z-index: 0;
}
.real-bloc:hover {
transform: translateY(-4px);
border-color: rgba(94, 189, 242, 0.25);
background: rgba(9, 39, 55, 0.55);
}
.real-bloc:hover::before { left: 130%; }
.real-bloc > * { position: relative; z-index: 1; }
/* PROGRAMMES — hover plus marqué */
.prog-item {
position: relative;
overflow: hidden;
}
.prog-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
100deg,
transparent 0%,
rgba(94, 189, 242, 0.05) 50%,
transparent 100%
);
pointer-events: none;
transition: left 900ms cubic-bezier(0.22, 1, 0.36, 1);
z-index: 0;
}
.prog-item:hover::before { left: 130%; }
.prog-item > * { position: relative; z-index: 1; }
/* Indicateurs Qualiopi — hover identique */
.ind-item {
position: relative;
overflow: hidden;
transition: border-color 500ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ind-item:hover { transform: translateY(-3px); }
/* Boutons CTA — magnetic-like (très subtil) */
.btn-primary, .btn-hero, .nav-cta, .cta-teaser, .btn-ghost {
transition: all 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* ============================================================
PAGES INTERNES — HERO COURT
============================================================ */
.inner-hero {
padding: 8.5rem 0 4rem;
background: linear-gradient(160deg, var(--nuit-2) 0%, var(--nuit-1) 100%);
border-bottom: 1px solid rgba(94, 189, 242, 0.08);
position: relative;
overflow: hidden;
}
.inner-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 70% at 70% 50%, rgba(40, 86, 126, 0.18) 0%, transparent 70%);
pointer-events: none;
}
.inner-hero .container { position: relative; z-index: 1; }
.inner-hero-eyebrow {
font-family: var(--font-titre);
font-size: 0.6rem;
font-weight: 400;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--bleu-acier);
margin-bottom: 2.5rem;
}
.inner-hero h1 {
font-family: var(--font-titre);
font-weight: 200;
font-size: clamp(2.5rem, 5vw, 4.2rem);
line-height: 1.15;
color: var(--blanc);
margin-bottom: 2rem;
letter-spacing: 0.005em;
}
.inner-hero h1 em {
font-style: normal;
color: var(--bleu-clair);
}
.inner-hero p {
font-size: 1rem;
line-height: 1.95;
color: rgba(248, 249, 251, 0.42);
max-width: 640px;
}
/* ============================================================
PROGRAMMES — CATALOGUE
============================================================ */
.format-block {
margin-bottom: 5rem;
padding-top: 4rem;
border-top: 1px solid rgba(94, 189, 242, 0.08);
}
.format-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
margin-bottom: 3rem;
}
.format-header h2 {
font-family: var(--font-titre);
font-weight: 200;
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
color: var(--blanc);
margin-right: 1rem;
}
.format-badge {
font-family: var(--font-titre);
font-size: 0.65rem;
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--bleu-ardoise);
border: 1px solid rgba(141, 175, 194, 0.25);
padding: 0.4rem 0.9rem;
}
.devis-badge {
font-family: var(--font-titre);
font-size: 0.65rem;
font-weight: 400;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--bleu-vif);
border: 1px solid var(--bleu-vif);
padding: 0.4rem 0.9rem;
margin-left: auto;
}
.prog-list { display: grid; gap: 1rem; }
.prog-item {
border: 1px solid rgba(94, 189, 242, 0.08);
background: rgba(9, 39, 55, 0.2);
cursor: pointer;
transition: border-color var(--t-base), background var(--t-base);
}
.prog-item:hover { border-color: rgba(94, 189, 242, 0.2); background: rgba(9, 39, 55, 0.4); }
.prog-header {
display: grid;
grid-template-columns: 1fr auto;
gap: 2rem;
align-items: center;
padding: 1.6rem 2rem;
}
.prog-level {
font-family: var(--font-titre);
font-size: 0.65rem;
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--bleu-acier);
margin-bottom: 0.6rem;
}
.prog-header h3 {
font-family: var(--font-titre);
font-weight: 300;
font-size: 1.05rem;
color: var(--blanc);
line-height: 1.4;
margin-bottom: 0.6rem;
}
.prog-sub {
font-size: 0.85rem;
color: rgba(248, 249, 251, 0.45);
line-height: 1.7;
}
.prog-right {
display: flex;
align-items: center;
gap: 1.5rem;
flex-shrink: 0;
}
.prog-duration {
font-family: var(--font-titre);
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.1em;
color: var(--bleu-ardoise);
text-align: right;
line-height: 1.5;
}
.prog-toggle {
width: 2rem; height: 2rem;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-titre);
font-size: 1.2rem;
font-weight: 200;
color: var(--bleu-vif);
border: 1px solid rgba(94, 189, 242, 0.3);
border-radius: 50%;
transition: transform var(--t-base), background var(--t-base);
}
.prog-item.open .prog-toggle { transform: rotate(45deg); background: var(--bleu-vif); color: var(--nuit-1); }
.prog-body {
/* Le plafond en dur de 1500px tronquait 9 fiches sur 12 en mobile depuis
l'ajout du bloc reglementaire. La grille 0fr vers 1fr s'anime sans
valeur magique et ne peut pas couper le contenu. */
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 600ms ease;
}
.prog-body > * {
overflow: hidden;
min-height: 0;
}
.prog-item.open .prog-body { grid-template-rows: 1fr; }
.prog-body-inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
padding: 0 2rem 2.5rem;
border-top: 1px solid rgba(94, 189, 242, 0.06);
padding-top: 2rem;
}
.prog-body-inner h4, .prog-body-inner h5 {
font-family: var(--font-titre);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--bleu-acier);
margin-bottom: 1rem;
}
.prog-body-inner ul { list-style: none; }
.prog-body-inner li,
.prog-body-inner p {
font-size: 0.85rem;
color: rgba(248, 249, 251, 0.5);
line-height: 1.85;
margin-bottom: 0.5rem;
padding-left: 1.6rem;
position: relative;
}
.prog-body-inner li::before {
content: '—';
position: absolute;
left: 0;
color: var(--bleu-acier);
}
.prog-body-inner p { padding-left: 0; }
.prog-body-inner p::before { display: none; }
.btn-ghost {
display: inline-block;
font-family: var(--font-titre);
font-size: 0.65rem;
font-weight: 400;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--bleu-vif);
border: 1px solid rgba(94, 189, 242, 0.3);
padding: 0.6rem 1.4rem;
margin-top: 1rem;
transition: all var(--t-base);
}
.btn-ghost:hover { border-color: var(--bleu-vif); background: rgba(94, 189, 242, 0.08); }
@media (max-width: 900px) {
.prog-body-inner { grid-template-columns: 1fr; gap: 2rem; }
.prog-header { grid-template-columns: 1fr; }
.prog-right { justify-content: space-between; }
.devis-badge { margin-left: 0; }
}
/* ============================================================
QUALIOPI — RÉFÉRENTIEL & MENTIONS
============================================================ */
.qualiopi-intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-bottom: 6rem;
align-items: start;
}
.qualiopi-intro h2 {
font-family: var(--font-titre);
font-weight: 200;
font-size: clamp(1.8rem, 3vw, 2.6rem);
color: var(--blanc);
line-height: 1.25;
margin-bottom: 2rem;
}
.qualiopi-intro p {
font-size: 0.95rem;
color: rgba(248, 249, 251, 0.5);
line-height: 1.95;
margin-bottom: 1.2rem;
}
.cert-block {
padding: 2.5rem;
background: rgba(9, 39, 55, 0.4);
border: 1px solid rgba(94, 189, 242, 0.12);
}
.cert-label {
font-family: var(--font-titre);
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--bleu-vif);
margin-bottom: 2rem;
}
.cert-row { display: grid; gap: 1.2rem; }
.cert-field {
display: grid;
grid-template-columns: 200px 1fr;
gap: 1.5rem;
padding-bottom: 1.2rem;
border-bottom: 1px solid rgba(94, 189, 242, 0.06);
align-items: baseline;
}
.cert-field:last-child { border-bottom: none; padding-bottom: 0; }
.cert-field-key {
font-family: var(--font-titre);
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--bleu-ardoise);
}
.cert-field-val {
font-family: var(--font-corps);
font-size: 0.92rem;
color: var(--blanc);
}
.placeholder, .placeholder-text {
color: rgba(141, 175, 194, 0.5);
font-style: italic;
font-size: 0.85rem;
}
.indicateurs-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-bottom: 5rem;
}
.ind-item {
padding: 2rem 1.5rem;
background: rgba(9, 39, 55, 0.3);
border: 1px solid rgba(94, 189, 242, 0.06);
transition: border-color var(--t-base);
}
.ind-item:hover { border-color: rgba(94, 189, 242, 0.18); }
.ind-num {
font-family: var(--font-titre);
font-size: 1.6rem;
font-weight: 200;
color: var(--bleu-vif);
margin-bottom: 1rem;
letter-spacing: 0.05em;
}
.ind-item h3, .ind-item h4 {
font-family: var(--font-titre);
font-size: 0.95rem;
font-weight: 500;
color: var(--blanc);
margin-bottom: 0.8rem;
line-height: 1.4;
}
.ind-item p {
font-size: 0.82rem;
color: rgba(248, 249, 251, 0.45);
line-height: 1.85;
}
.mentions-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
margin-bottom: 5rem;
}
.mention-block {
padding: 2rem;
background: rgba(9, 39, 55, 0.25);
border-left: 2px solid var(--bleu-acier);
}
.mention-block h4 {
font-family: var(--font-titre);
font-size: 0.95rem;
font-weight: 500;
color: var(--blanc);
margin-bottom: 1.2rem;
letter-spacing: 0.02em;
}
.mention-block p,
.mention-block li {
font-size: 0.88rem;
color: rgba(248, 249, 251, 0.5);
line-height: 1.95;
margin-bottom: 0.5rem;
}
.mention-block ul { list-style: none; }
.mention-block ul li { padding-left: 1.6rem; position: relative; }
.mention-block ul li::before {
content: '—';
position: absolute;
left: 0;
color: var(--bleu-acier);
}
.mention-block a { color: var(--bleu-vif); }
.mention-block a:hover { color: var(--bleu-clair); }
.recours-block {
padding: 2.5rem;
background: rgba(9, 39, 55, 0.4);
border: 1px solid rgba(94, 189, 242, 0.1);
margin-bottom: 4rem;
}
.recours-block h4 {
font-family: var(--font-titre);
font-size: 1rem;
font-weight: 500;
color: var(--blanc);
margin-bottom: 1.2rem;
}
.recours-block p {
font-size: 0.9rem;
color: rgba(248, 249, 251, 0.5);
line-height: 1.95;
margin-bottom: 0.8rem;
}
.recours-block a { color: var(--bleu-vif); }
@media (max-width: 900px) {
.qualiopi-intro { grid-template-columns: 1fr; }
.indicateurs-grid { grid-template-columns: repeat(2, 1fr); }
.mentions-grid { grid-template-columns: 1fr; }
.cert-field { grid-template-columns: 1fr; gap: 0.4rem; }
}
/* ============================================================
PAGES LÉGALES & PAGES INTERNES — contenu typographique
============================================================ */
.legal-content {
padding: 4rem 0 8rem;
}
.legal-content .container { max-width: 880px; }
/* Page Qualiopi : container élargi pour aligner hero + contenu et laisser respirer les 7 indicateurs */
body.page-qualiopi .legal-content .container { max-width: 1240px; }
/* Pages légales (engagements, mentions, confidentialité) : hero rétréci pour matcher le container 880 du contenu */
body.page-legal .inner-hero .container { max-width: 880px; }
.legal-content h2 {
font-family: var(--font-titre);
font-weight: 400;
font-size: clamp(1.2rem, 1.8vw, 1.55rem);
color: var(--blanc);
margin: 4rem 0 1.5rem;
letter-spacing: 0.005em;
padding-top: 2rem;
border-top: 1px solid rgba(94, 189, 242, 0.08);
}
.legal-content h2:first-child {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.legal-content p,
.legal-content li {
font-size: 0.95rem;
color: rgba(248, 249, 251, 0.55);
line-height: 1.95;
margin-bottom: 1rem;
}
.legal-content a {
color: var(--bleu-vif);
border-bottom: 1px solid rgba(94, 189, 242, 0.3);
transition: color var(--t-base), border-color var(--t-base);
}
.legal-content a:hover {
color: var(--bleu-clair);
border-color: var(--bleu-clair);
}
.legal-content strong {
color: var(--blanc);
font-weight: 500;
}
.legal-list {
list-style: none;
padding-left: 1.2rem;
margin: 1rem 0 1.5rem;
}
.legal-list li {
position: relative;
padding-left: 1.6rem;
}
.legal-list li::before {
content: '—';
position: absolute;
left: -1.6rem;
color: var(--bleu-acier);
}
.legal-dl {
display: grid;
grid-template-columns: 240px 1fr;
gap: 1rem 2rem;
margin: 1rem 0 2rem;
padding: 2rem;
background: rgba(9, 39, 55, 0.35);
border-left: 2px solid var(--bleu-acier);
}
.legal-dl dt {
font-family: var(--font-titre);
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--bleu-ardoise);
align-self: center;
}
.legal-dl dd {
font-size: 0.95rem;
color: var(--blanc);
}
.legal-dl dd a {
color: var(--bleu-vif);
border-bottom: 1px solid rgba(94, 189, 242, 0.3);
}
.legal-todo {
display: inline-block;
padding: 0.15rem 0.6rem;
font-family: var(--font-corps);
font-size: 0.85rem;
font-style: italic;
color: rgba(141, 175, 194, 0.6);
background: rgba(141, 175, 194, 0.08);
border-radius: 2px;
}
@media (max-width: 768px) {
.legal-dl {
grid-template-columns: 1fr;
gap: 0.3rem;
padding: 1.5rem;
}
.legal-dl dt { margin-top: 0.8rem; }
.legal-dl dt:first-child { margin-top: 0; }
}
/* ============================================================
PLACEHOLDER (pages en cours de finalisation)
============================================================ */
.placeholder-page {
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 12rem 2rem 6rem;
background: linear-gradient(160deg, var(--nuit-2) 0%, var(--nuit-1) 100%);
position: relative;
overflow: hidden;
}
.placeholder-page::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(40, 86, 126, 0.18) 0%, transparent 70%);
pointer-events: none;
}
.placeholder-content { position: relative; z-index: 1; max-width: 640px; }
.placeholder-eyebrow {
font-family: var(--font-titre);
font-size: 0.6rem;
font-weight: 400;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--bleu-acier);
margin-bottom: 2.5rem;
}
.placeholder-page h1 {
font-family: var(--font-titre);
font-weight: 200;
font-size: clamp(2rem, 4vw, 3.2rem);
color: var(--blanc);
margin-bottom: 2rem;
letter-spacing: 0.005em;
}
.placeholder-page p {
font-size: 1rem;
color: rgba(248, 249, 251, 0.5);
line-height: 1.85;
margin-bottom: 3rem;
}
/* ============================================================
FORMULAIRE DE CONTACT
============================================================ */
.contact-page-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 6rem;
margin-top: 5rem;
}
.contact-coord {
padding: 3rem 0;
}
.contact-coord-block {
margin-bottom: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(94, 189, 242, 0.08);
}
.contact-coord-block:last-child { border-bottom: none; }
.contact-coord-label {
font-family: var(--font-titre);
font-size: 0.6rem;
font-weight: 400;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--bleu-acier);
margin-bottom: 1rem;
}
.contact-coord-value {
font-family: var(--font-titre);
font-weight: 200;
font-size: 1.4rem;
color: var(--blanc);
margin-bottom: 0.5rem;
letter-spacing: 0.005em;
}
.contact-coord-value a { color: var(--blanc); transition: color var(--t-base); }
.contact-coord-value a:hover { color: var(--bleu-vif); }
.contact-coord-note {
font-size: 0.85rem;
color: rgba(248, 249, 251, 0.55);
line-height: 1.85;
}
.contact-form {
background: rgba(9, 39, 55, 0.35);
border: 1px solid rgba(94, 189, 242, 0.1);
padding: 3.5rem 3rem;
}
.contact-form-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-bottom: 2rem;
}
.contact-form-field {
display: flex;
flex-direction: column;
}
.contact-form-field.full { grid-column: 1 / -1; }
.contact-form-field label {
font-family: var(--font-titre);
font-size: 0.65rem;
font-weight: 400;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--bleu-acier);
margin-bottom: 0.7rem;
}
.contact-form-field input,
.contact-form-field textarea,
.contact-form-field select {
font-family: var(--font-corps);
font-size: 0.95rem;
font-weight: 300;
color: var(--blanc);
background: transparent;
border: none;
border-bottom: 1px solid rgba(141, 175, 194, 0.3);
padding: 0.6rem 0;
transition: border-color var(--t-base);
appearance: none;
-webkit-appearance: none;
border-radius: 0;
}
.contact-form-field textarea {
resize: vertical;
min-height: 120px;
border: 1px solid rgba(141, 175, 194, 0.3);
padding: 1rem;
}
.contact-form-field input:focus,
.contact-form-field textarea:focus,
.contact-form-field select:focus {
outline: none;
border-color: var(--bleu-vif);
}
.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {
color: rgba(141, 175, 194, 0.4);
}
.contact-form-field select {
border-bottom: 1px solid rgba(141, 175, 194, 0.3);
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 10px 6px;
padding-right: 1.5rem;
}
.contact-form-field select option {
background: var(--nuit-2);
color: var(--blanc);
}
.contact-form-rgpd {
display: flex;
align-items: flex-start;
gap: 0.8rem;
margin-bottom: 2.5rem;
font-size: 0.78rem;
color: rgba(248, 249, 251, 0.5);
line-height: 1.7;
}
.contact-form-rgpd input[type="checkbox"] {
margin-top: 0.3rem;
appearance: none;
-webkit-appearance: none;
width: 1rem; height: 1rem;
border: 1px solid rgba(141, 175, 194, 0.4);
background: transparent;
cursor: pointer;
flex-shrink: 0;
transition: all var(--t-base);
position: relative;
}
.contact-form-rgpd input[type="checkbox"]:checked {
background: var(--bleu-vif);
border-color: var(--bleu-vif);
}
.contact-form-rgpd input[type="checkbox"]:checked::after {
content: '✓';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
color: var(--nuit-1);
font-weight: 600;
}
.contact-form-rgpd a { color: var(--bleu-vif); }
.contact-form-submit {
font-family: var(--font-titre);
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--bleu-vif);
background: transparent;
border: 1px solid var(--bleu-vif);
padding: 1rem 2.5rem;
cursor: pointer;
transition: all var(--t-base);
}
.contact-form-submit:hover { background: var(--bleu-vif); color: var(--nuit-1); }
.contact-form-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.form-status {
margin-top: 1.5rem;
padding: 1rem;
font-size: 0.85rem;
text-align: center;
}
.form-status.success { color: var(--bleu-clair); border: 1px solid rgba(181, 223, 247, 0.3); background: rgba(94, 189, 242, 0.05); }
.form-status.error { color: #ff8a9c; border: 1px solid rgba(255, 138, 156, 0.3); background: rgba(255, 138, 156, 0.05); }
@media (max-width: 900px) {
.contact-page-grid { grid-template-columns: 1fr; gap: 3rem; }
.contact-form { padding: 2rem 1.5rem; }
.contact-form-row { grid-template-columns: 1fr; gap: 1.5rem; }
}
/* =================================================================
============ V2 — REFONTE JUIN 2026 (Prompts PDF) ===============
Bloc CSS ajouté pour les nouveaux composants. Aucune modification
des couleurs, polices ou marges globales du V1.1 (variables CSS
inchangées). Suppression de ces lignes pour revenir au V1.1.
================================================================= */
/* Prompt 3 — Hero : écartement des 3 points + style UVP (agrandi +20%) */
.hero-dots.hero-dots-wide { gap: 2.25rem; }
.hero-dots.hero-dots-wide .dot { width: 15px; height: 15px; }
.hero-uvp {
font-family: 'Inter', sans-serif; font-style: italic; font-weight: 300;
font-size: 1.55rem; color: rgba(248,249,251,0.72); text-align: center;
max-width: 810px; margin: 2.81rem auto 3.51rem; line-height: 1.6; padding: 0 1.5rem;
}
@media (max-width: 700px) { .hero-uvp { font-size: 1.38rem; } }
/* Ajustements mobile hero — évite débordement horizontal */
@media (max-width: 700px) {
.hero-logo-main { font-size: 3.96rem; }
.hero-logo-sub { font-size: 1.22rem; letter-spacing: 0.45em; margin-top: 0.72rem; padding-left: 0.45em; }
.hero-dots.hero-dots-wide { gap: 1.44rem; }
.hero-dots.hero-dots-wide .dot { width: 12px; height: 12px; }
.btn-hero { font-size: 0.7rem; padding: 0.9rem 2.16rem; }
}
@media (max-width: 480px) {
.hero-logo-main { font-size: 3.06rem; letter-spacing: 0.09em; }
.hero-logo-sub { font-size: 0.99rem; letter-spacing: 0.4em; padding-left: 0.4em; }
.hero-uvp { font-size: 1.04rem; }
}
/* Prompt 4 — Grille 3×2 vignettes secteurs */
.env-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3.5rem; }
.env-tile {
position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 3;
overflow: hidden; border-radius: 4px; text-decoration: none; background-size: cover;
background-position: center; transition: transform 0.4s ease; padding: 1.4rem;
}
.env-tile-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,16,25,0.1) 0%, rgba(0,16,25,0.78) 100%);
z-index: 1; pointer-events: none; transition: background 0.4s ease;
}
.env-tile-label {
position: relative; z-index: 2; color: #f8f9fb; font-family: 'Raleway', sans-serif;
font-weight: 300; font-size: 1.15rem; letter-spacing: 0.05em; text-transform: uppercase;
}
.env-tile:hover { transform: translateY(-3px); }
.env-tile:hover .env-tile-overlay {
background: linear-gradient(180deg, rgba(0,16,25,0.1) 0%, rgba(40,86,126,0.85) 100%);
}
.env-cta-wrapper { text-align: center; margin-top: 3rem; }
@media (max-width: 900px) { .env-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 480px) { .env-grid { grid-template-columns: 1fr; } }
/* Prompt 6 — Alternance verticale [Image|Titre|Image|Titre] */
.piliers-alt {
display: grid; grid-template-columns: 80px 1fr 80px 1fr; gap: 2rem;
align-items: center; margin: 4rem 0 2rem;
}
.pilier-illu-fine { height: 200px; overflow: hidden; border-radius: 2px; background: transparent; line-height: 0; font-size: 0; }
.pilier-illu-fine img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pilier-titre {
font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 1.15rem;
color: var(--blanc); letter-spacing: 0.03em; line-height: 1.4;
}
@media (max-width: 900px) {
.piliers-alt { grid-template-columns: 60px 1fr; gap: 1.5rem; }
.pilier-illu-fine { height: 120px; }
.pilier-titre { font-size: 1rem; }
}
/* ============================================================
4 NIVEAUX D'INTERVENTION — Grille 2×2 avec animations
============================================================ */
.niveaux-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-top: 4rem;
}
.niveau-card {
position: relative;
padding: 3rem 2.5rem 2.8rem;
background: rgba(9, 39, 55, 0.55);
border: 1px solid rgba(94, 189, 242, 0.15);
border-radius: 6px;
overflow: hidden;
cursor: default;
transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 550ms ease,
background 550ms ease,
box-shadow 550ms ease;
}
.niveau-card::before {
/* halo bleu diffus qui apparait au hover */
content: '';
position: absolute;
top: -50%; right: -30%;
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(94, 189, 242, 0.18) 0%, transparent 65%);
opacity: 0;
transition: opacity 700ms ease;
pointer-events: none;
}
.niveau-card::after {
/* barre en bas qui se déploie au hover */
content: '';
position: absolute;
bottom: 0; left: 0;
height: 3px;
width: 0;
background: linear-gradient(90deg, var(--bleu-vif), var(--bleu-clair));
box-shadow: 0 0 12px rgba(94, 189, 242, 0.5);
transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.niveau-card:hover {
transform: translateY(-10px);
border-color: rgba(94, 189, 242, 0.5);
background: rgba(40, 86, 126, 0.3);
box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.6),
0 0 40px -10px rgba(94, 189, 242, 0.2);
}
.niveau-card:hover::before { opacity: 1; }
.niveau-card:hover::after { width: 100%; }
.niveau-num {
font-family: var(--font-titre);
font-weight: 200;
font-size: 3.6rem;
color: rgba(94, 189, 242, 0.4);
letter-spacing: 0.05em;
line-height: 1;
margin-bottom: 1.6rem;
transition: color 550ms ease,
transform 550ms cubic-bezier(0.22, 1, 0.36, 1),
text-shadow 550ms ease;
display: inline-block;
}
.niveau-card:hover .niveau-num {
color: var(--bleu-clair);
transform: scale(1.08) translateY(-2px);
text-shadow: 0 0 20px rgba(94, 189, 242, 0.5);
}
.niveau-card h4 {
font-family: var(--font-titre);
font-weight: 300;
font-size: 1.55rem;
color: var(--blanc);
margin: 0 0 1.2rem;
letter-spacing: 0.03em;
line-height: 1.25;
position: relative;
transition: color 450ms ease;
}
.niveau-card:hover h4 {
color: var(--bleu-clair);
}
.niveau-card p {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 1rem;
color: rgba(248, 249, 251, 0.78);
line-height: 1.7;
margin: 0;
position: relative;
}
@media (max-width: 800px) {
.niveaux-grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; }
.niveau-card { padding: 2rem 1.75rem; }
.niveau-num { font-size: 3rem; margin-bottom: 1.2rem; }
.niveau-card h4 { font-size: 1.35rem; }
}
/* ============================================================
RESPIRATIONS CHROMATIQUES — rompt le mono-fond bleu-nuit
============================================================ */
/* Chapitre Expertise : fond un cran plus clair pour marquer l'entrée méthodo */
#expertises {
background: linear-gradient(180deg, var(--nuit-1) 0%, var(--nuit-2) 8%, var(--nuit-2) 92%, var(--nuit-1) 100%);
}
/* Chapitre Méthode : fond très légèrement teinté pour distinguer du bloc suivant */
#methode {
background: linear-gradient(180deg, var(--nuit-1) 0%, rgba(9, 39, 55, 0.45) 20%, rgba(9, 39, 55, 0.45) 80%, var(--nuit-1) 100%);
}
/* ============================================================
PILIERS ÉDITORIAUX — bande typographique (rompt les grilles)
============================================================ */
.piliers-editorial {
margin-top: 3rem;
border-top: 1px solid rgba(94, 189, 242, 0.1);
}
.pilier-line {
display: grid;
grid-template-columns: 90px 1fr;
gap: 2.5rem;
padding: 2.2rem 0 2.2rem 0.5rem;
border-bottom: 1px solid rgba(94, 189, 242, 0.08);
align-items: baseline;
transition: padding-left 500ms cubic-bezier(0.22, 1, 0.36, 1),
background 400ms ease;
}
.pilier-line.in-view {
padding-left: 1.8rem;
background: linear-gradient(90deg, rgba(94, 189, 242, 0.04) 0%, rgba(94, 189, 242, 0) 90%);
}
/* Photo de fond révélée au passage (variante piliers-with-bg / home) */
.piliers-with-bg .pilier-line { position: relative; overflow: hidden; isolation: isolate; }
.piliers-with-bg .pilier-line::before {
content: "";
position: absolute; inset: 0;
background-image: var(--pilier-img);
background-size: cover;
background-position: center right;
opacity: 0;
transition: opacity 900ms ease;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.75) 100%);
mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.75) 100%);
pointer-events: none;
z-index: -1;
}
/* Voile sombre pour préserver la lisibilité du texte au-dessus */
.piliers-with-bg .pilier-line::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(0,16,25,0.95) 0%, rgba(0,16,25,0.55) 60%, rgba(0,16,25,0.35) 100%);
opacity: 0;
transition: opacity 900ms ease;
pointer-events: none;
z-index: -1;
}
.piliers-with-bg .pilier-line.in-view::before { opacity: 0.72; }
.piliers-with-bg .pilier-line.in-view::after { opacity: 1; }
.piliers-with-bg .pilier-line.in-view { background: transparent; }
.pilier-initial {
font-family: var(--font-titre);
font-weight: 100;
font-size: clamp(2.6rem, 4.2vw, 4rem);
color: rgba(94, 189, 242, 0.35);
line-height: 1;
letter-spacing: 0.04em;
transition: color 500ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
display: inline-block;
}
.pilier-line.in-view .pilier-initial {
color: var(--bleu-clair);
transform: translateX(-3px);
text-shadow: 0 0 15px rgba(94, 189, 242, 0.35);
}
.pilier-line h3 {
font-family: var(--font-titre);
font-weight: 300;
font-size: clamp(1.35rem, 2vw, 1.75rem);
color: var(--blanc);
margin: 0;
letter-spacing: 0.03em;
line-height: 1.3;
transition: color 400ms ease;
}
.pilier-line.in-view h3 { color: var(--bleu-clair); }
/* Variante détaillée (page expertise) : initiale + titre + paragraphe */
.piliers-editorial-detail .pilier-line { grid-template-columns: 110px 1fr; padding: 2.8rem 0 2.8rem 0.5rem; }
.pilier-body { display: flex; flex-direction: column; gap: 0.9rem; }
.pilier-body h3 {
font-family: var(--font-titre);
font-weight: 300;
font-size: clamp(1.4rem, 2vw, 1.75rem);
color: var(--blanc);
margin: 0;
letter-spacing: 0.03em;
line-height: 1.25;
transition: color 400ms ease;
}
.pilier-line.in-view .pilier-body h3 { color: var(--bleu-clair); }
.pilier-body p {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 1.02rem;
color: rgba(248, 249, 251, 0.72);
line-height: 1.75;
margin: 0;
max-width: 680px;
}
@media (max-width: 700px) {
.pilier-line { grid-template-columns: 60px 1fr; gap: 1.5rem; padding: 1.8rem 0; }
.piliers-editorial-detail .pilier-line { grid-template-columns: 60px 1fr; padding: 2rem 0; }
}
/* ============================================================
CITATION SPLIT — rupture éditoriale (image + verbatim)
============================================================ */
.citation-split {
display: grid;
grid-template-columns: 240px 1fr;
gap: 3.5rem;
align-items: center;
max-width: 1000px;
margin: 4rem auto 3rem;
padding: 3rem 3rem;
background: linear-gradient(135deg, rgba(94, 189, 242, 0.03) 0%, transparent 60%);
border-top: 1px solid rgba(94, 189, 242, 0.1);
border-bottom: 1px solid rgba(94, 189, 242, 0.1);
position: relative;
}
/* Variante texte seul (sans portrait) : recentrage sur le verbatim */
.citation-split.citation-split--text {
grid-template-columns: 1fr;
max-width: 860px;
padding: 3.5rem 3rem;
text-align: center;
}
.citation-split.citation-split--text .citation-split-content { max-width: 720px; margin: 0 auto; }
.citation-split.citation-split--text .citation-mark { display: block; margin: 0 auto 0.5rem; }
.citation-split.citation-split--text .citation-attribution { justify-content: center; }
.citation-split-media {
position: relative;
width: 240px;
height: 300px;
overflow: hidden;
border-radius: 2px;
box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.55);
display: block;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.citation-split-media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 18%;
filter: grayscale(0.35) brightness(0.92) contrast(1.05);
transition: transform 2s ease, filter 2s ease;
}
a.citation-split-media:hover img {
transform: scale(1.05);
filter: grayscale(0.05) brightness(1) contrast(1.05);
}
.citation-split-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(0, 16, 25, 0.7) 100%);
pointer-events: none;
transition: background 500ms ease;
}
a.citation-split-media:hover .citation-split-overlay {
background: linear-gradient(180deg, transparent 25%, rgba(0, 16, 25, 0.85) 100%);
}
.citation-split-hint {
position: absolute;
bottom: 1.2rem; left: 1.2rem; right: 1.2rem;
font-family: var(--font-titre);
font-weight: 400;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bleu-clair);
opacity: 0;
transform: translateY(6px);
transition: opacity 400ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
z-index: 2;
}
a.citation-split-media:hover .citation-split-hint,
a.citation-split-media:focus-visible .citation-split-hint {
opacity: 1;
transform: translateY(0);
}
a.citation-split-media:focus-visible {
outline: 2px solid rgba(94, 189, 242, 0.6);
outline-offset: 4px;
}
.citation-split-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0;
position: relative;
}
.citation-mark {
font-family: 'Palatino Linotype', Palatino, Georgia, serif;
font-size: 5rem;
line-height: 0.3;
color: var(--bleu-vif);
opacity: 0.45;
margin-bottom: 1.4rem;
font-style: italic;
display: block;
height: 2.2rem;
}
.citation-split blockquote {
margin: 0;
padding: 0;
border: 0;
}
.citation-split blockquote p {
font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
font-style: italic;
font-weight: 400;
font-size: clamp(1.35rem, 2vw, 1.75rem);
color: rgba(248, 249, 251, 0.94);
line-height: 1.55;
letter-spacing: 0.005em;
margin: 0 0 2rem;
}
.citation-split blockquote em {
color: var(--bleu-clair);
font-style: italic;
}
.citation-attribution {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.citation-attribution {
padding-top: 1.2rem;
border-top: 1px solid rgba(94, 189, 242, 0.15);
max-width: 280px;
}
.citation-name {
font-family: var(--font-titre);
font-weight: 400;
font-size: 1rem;
letter-spacing: 0.08em;
text-transform: none;
color: var(--bleu-clair);
display: block;
}
.citation-role {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 0.78rem;
color: rgba(248, 249, 251, 0.5);
letter-spacing: 0.04em;
margin-top: 0.35rem;
display: block;
}
@media (max-width: 800px) {
.citation-split {
grid-template-columns: 1fr;
gap: 2rem;
max-width: 520px;
margin: 4rem auto 2rem;
padding: 2.5rem 1.5rem;
text-align: center;
justify-items: center;
}
.citation-split-media { width: 160px; height: 200px; }
.citation-split-content { text-align: center; align-items: center; }
.citation-mark { font-size: 4rem; height: 1.8rem; }
.citation-attribution { margin: 0 auto; }
}
/* ============================================================
PAGE NOTRE ÉQUIPE — Fiche CV
============================================================ */
.back-link {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-titre);
font-weight: 400;
font-size: 0.78rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(141, 175, 194, 0.7);
text-decoration: none;
margin-bottom: 2.5rem;
transition: color 300ms ease, gap 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.back-link:hover {
color: var(--bleu-clair);
gap: 1rem;
}
.back-arrow {
font-size: 1.1rem;
transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
display: inline-block;
}
.back-link:hover .back-arrow { transform: translateX(-4px); }
.cv-section {
padding: 4rem 0 6rem;
}
.cv-fiche {
display: grid;
grid-template-columns: 320px 1fr;
gap: 4rem;
align-items: start;
max-width: 1100px;
margin: 0 auto;
padding: 3rem 0;
scroll-margin-top: 100px;
}
.cv-fiche + .cv-fiche {
margin-top: 2rem;
padding-top: 5rem;
border-top: 1px solid rgba(94, 189, 242, 0.1);
}
/* Zigzag éditorial : la 2e fiche a la photo à droite */
.cv-fiche--reverse { grid-template-columns: 1fr 320px; }
.cv-fiche--reverse .cv-photo { order: 2; }
.cv-fiche--reverse .cv-content { order: 1; }
@media (max-width: 800px) {
.cv-fiche--reverse { grid-template-columns: 1fr; }
.cv-fiche--reverse .cv-photo { order: 0; }
.cv-fiche--reverse .cv-content { order: 1; }
}
.cv-photo {
position: relative;
width: 320px;
height: 400px;
overflow: hidden;
border-radius: 2px;
box-shadow: 0 25px 55px -18px rgba(0, 0, 0, 0.7);
display: block;
text-decoration: none;
color: inherit;
}
a.cv-photo { cursor: pointer; }
a.cv-photo:focus-visible { outline: 2px solid var(--bleu-vif); outline-offset: 4px; }
.cv-photo::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 65%, rgba(0, 16, 25, 0.35) 100%);
pointer-events: none;
}
.cv-photo img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 18%;
filter: grayscale(0.85) brightness(0.95) contrast(1.05);
transition: filter 900ms ease;
animation: cv-ken-burns 14s ease-in-out infinite alternate;
transform-origin: center 30%;
will-change: transform;
}
/* Décalages + origines variables pour un effet organique entre fiches */
.cv-fiche:nth-of-type(2) .cv-photo img { animation-delay: -3.5s; transform-origin: 60% 30%; }
.cv-fiche:nth-of-type(3) .cv-photo img { animation-delay: -7s; transform-origin: 40% 35%; }
.cv-fiche:nth-of-type(4) .cv-photo img { animation-delay: -10.5s; transform-origin: 55% 25%; }
@keyframes cv-ken-burns {
0% { transform: scale(1.02) translate(0, 0); }
100% { transform: scale(1.15) translate(-2%, 1%); }
}
.cv-photo:hover img {
filter: grayscale(0.15) brightness(1.05) contrast(1.05);
}
.cv-content { padding-top: 0.5rem; }
.cv-header {
padding-bottom: 1.8rem;
border-bottom: 1px solid rgba(94, 189, 242, 0.15);
margin-bottom: 2.2rem;
}
.cv-header h2 {
font-family: var(--font-titre);
font-weight: 200;
font-size: clamp(2.4rem, 4vw, 3.4rem);
color: var(--blanc);
margin: 0 0 0.6rem;
letter-spacing: 0.02em;
line-height: 1.1;
}
.cv-role {
font-family: var(--font-titre);
font-weight: 400;
font-size: 0.85rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--bleu-clair);
margin: 0;
}
.cv-bio p {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 1.02rem;
color: rgba(248, 249, 251, 0.78);
line-height: 1.8;
margin: 0 0 1.2rem;
max-width: 620px;
}
.cv-bio p:last-child { margin-bottom: 2.2rem; }
.cv-blocks {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
padding: 2rem 0;
border-top: 1px solid rgba(94, 189, 242, 0.08);
border-bottom: 1px solid rgba(94, 189, 242, 0.08);
margin-bottom: 2.5rem;
}
.cv-block h3, .cv-block h4 {
font-family: var(--font-titre);
font-weight: 400;
font-size: 0.72rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--bleu-vif);
margin: 0 0 1.2rem;
}
.cv-block ul {
list-style: none;
padding: 0;
margin: 0;
}
.cv-block li {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 0.95rem;
color: rgba(248, 249, 251, 0.72);
line-height: 1.6;
padding: 0.4rem 0 0.4rem 1rem;
position: relative;
}
.cv-block li::before {
content: '';
position: absolute;
left: 0; top: 0.9em;
width: 4px; height: 4px;
background: var(--bleu-vif);
border-radius: 50%;
opacity: 0.6;
}
.cv-actions {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.btn-linkedin {
display: inline-flex;
align-items: center;
gap: 0.7rem;
font-family: var(--font-titre);
font-weight: 400;
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--blanc);
background: #0077B5;
padding: 0.9rem 1.6rem;
text-decoration: none;
border: 1px solid #0077B5;
transition: background 300ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease;
}
.btn-linkedin:hover {
background: #005a8c;
border-color: #005a8c;
transform: translateY(-2px);
box-shadow: 0 10px 25px -8px rgba(0, 119, 181, 0.5);
}
.btn-linkedin svg { flex-shrink: 0; }
.btn-secondary {
display: inline-flex;
align-items: center;
font-family: var(--font-titre);
font-weight: 400;
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bleu-clair);
background: transparent;
padding: 0.9rem 1.8rem;
text-decoration: none;
border: 1px solid rgba(94, 189, 242, 0.35);
transition: background 300ms ease, border-color 300ms ease, color 300ms ease, transform 300ms ease;
}
.btn-secondary:hover {
background: rgba(94, 189, 242, 0.08);
border-color: var(--bleu-vif);
color: var(--blanc);
transform: translateY(-2px);
}
.cv-back-section {
padding: 3rem 0 5rem;
text-align: center;
border-top: 1px solid rgba(94, 189, 242, 0.08);
}
.btn-back {
display: inline-flex;
align-items: center;
gap: 0.8rem;
font-family: var(--font-titre);
font-weight: 400;
font-size: 0.85rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--bleu-clair);
background: transparent;
padding: 1.1rem 2.4rem;
text-decoration: none;
border: 1px solid rgba(94, 189, 242, 0.35);
transition: background 300ms ease, border-color 300ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1), gap 300ms ease;
}
.btn-back:hover {
background: rgba(94, 189, 242, 0.08);
border-color: var(--bleu-vif);
gap: 1.2rem;
transform: translateY(-2px);
}
@media (max-width: 800px) {
.cv-fiche { grid-template-columns: 1fr; gap: 2.5rem; padding: 1.5rem 0; }
.cv-photo { width: 100%; max-width: 320px; height: 380px; margin: 0 auto; }
.cv-blocks { grid-template-columns: 1fr; gap: 2rem; }
.cv-actions { justify-content: center; }
.cv-section { padding: 2rem 0 4rem; }
}
/* ============================================================
REAL POSTER — chiffre géant éditorial (rompt les stats grid)
============================================================ */
.real-poster {
text-align: center;
padding: 4rem 2rem 3.5rem;
margin: 3rem 0 0;
border-top: 1px solid rgba(94, 189, 242, 0.1);
border-bottom: 1px solid rgba(94, 189, 242, 0.1);
background: linear-gradient(180deg, rgba(94, 189, 242, 0.02) 0%, transparent 100%);
position: relative;
}
.real-poster-num {
font-family: var(--font-titre);
font-weight: 100;
font-size: clamp(6rem, 15vw, 12rem);
line-height: 0.95;
letter-spacing: -0.025em;
margin-bottom: 1.8rem;
background: linear-gradient(180deg, var(--blanc) 0%, var(--bleu-clair) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
display: inline-block;
}
.real-poster-plus {
font-weight: 200;
font-size: 0.55em;
vertical-align: super;
margin-left: 0.06em;
color: var(--bleu-vif);
-webkit-text-fill-color: var(--bleu-vif);
background: none;
-webkit-background-clip: initial;
background-clip: initial;
}
.real-poster-label {
font-family: var(--font-titre);
font-weight: 300;
font-size: clamp(1.05rem, 1.6vw, 1.35rem);
color: rgba(248, 249, 251, 0.88);
letter-spacing: 0.06em;
margin: 0 auto 2.8rem;
max-width: 640px;
line-height: 1.45;
}
.real-poster-meta {
display: flex;
justify-content: center;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 0.88rem;
color: rgba(248, 249, 251, 0.55);
letter-spacing: 0.04em;
}
.real-poster-meta .sep {
color: var(--bleu-vif);
opacity: 0.5;
font-weight: 400;
}
@media (max-width: 700px) {
.real-poster { padding: 3rem 1rem 2.5rem; margin: 3rem 0 0; }
.real-poster-label { font-size: 1rem; margin-bottom: 2rem; }
.real-poster-meta { flex-direction: column; gap: 0.4rem; }
.real-poster-meta .sep { display: none; }
}
/* Prompt 8 — Triptyque méthode (hover bleu plus clair) */
.triptyque { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 4rem; }
.triptyque-step {
padding: 2.5rem 2rem; border: 1px solid rgba(94,189,242,0.12); border-radius: 4px;
background: var(--nuit-2); transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.triptyque-step:hover {
background: rgba(40,86,126,0.3); border-color: var(--bleu-vif); transform: translateY(-3px);
}
.triptyque-step:hover .triptyque-num, .triptyque-step:hover h4 { color: var(--bleu-clair); }
.triptyque-num {
font-family: 'Raleway', sans-serif; font-weight: 200; font-size: 2.8rem;
color: var(--bleu-acier); line-height: 1; margin-bottom: 1rem; transition: color 0.3s;
}
.triptyque-step h4 {
font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 1.4rem;
color: var(--blanc); letter-spacing: 0.03em; margin: 0 0 1rem; transition: color 0.3s;
}
.triptyque-step p {
font-family: 'Inter', sans-serif; font-weight: 300; color: rgba(248,249,251,0.65);
line-height: 1.65; margin: 0;
}
@media (max-width: 900px) { .triptyque { grid-template-columns: 1fr; gap: 1rem; } }
/* Prompt 9 — Photos équipe réelles + 4 colonnes */
.equipe-grid.equipe-grid-4 { grid-template-columns: repeat(4, 1fr); }
.equipe-photo.equipe-photo-real {
width: 100%; aspect-ratio: 1; background: var(--nuit-2); overflow: hidden;
display: block; border-radius: 2px;
}
.equipe-photo.equipe-photo-real img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(0.85) contrast(1.05); transition: filter 0.4s, transform 0.6s;
}
.equipe-card:hover .equipe-photo.equipe-photo-real img {
filter: grayscale(0.2); transform: scale(1.03);
}
@media (max-width: 900px) { .equipe-grid.equipe-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .equipe-grid.equipe-grid-4 { grid-template-columns: 1fr; } }
/* Prompt 11 — Footer LinkedIn inline */
.footer-social-inline {
display: inline-flex; align-items: center; gap: 0.5rem; margin-left: 1.2rem;
font-size: 0.68rem; letter-spacing: 0.12em; color: rgba(248,249,251,0.5);
}
.footer-social-inline a { color: var(--bleu-vif); display: inline-flex; align-items: center; transition: color 0.3s; }
.footer-social-inline a:hover { color: var(--bleu-clair); }
/* Prompt 12 — Page Contact : titre minimal + formulaire blanc */
.contact-title-bar { padding: 8rem 0 2rem; background: var(--nuit-1); text-align: center; }
.contact-title-h1 {
font-family: 'Raleway', sans-serif; font-weight: 200; font-size: 3rem;
color: var(--blanc); letter-spacing: 0.03em; margin: 0;
}
@media (max-width: 700px) { .contact-title-bar { padding: 6rem 0 1rem; } .contact-title-h1 { font-size: 2.2rem; } }
.contact-section-light { padding: 3rem 0 8rem; background: var(--nuit-1); }
.contact-form.contact-form-white {
background: var(--bleu-profond);
padding: 3rem;
border-radius: 4px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.contact-form.contact-form-white label { color: #ffffff; }
.contact-form.contact-form-white input,
.contact-form.contact-form-white select,
.contact-form.contact-form-white textarea {
background: #ffffff;
color: var(--nuit-1);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 2px;
padding: 0.75rem 0.9rem;
}
.contact-form.contact-form-white input:hover,
.contact-form.contact-form-white select:hover,
.contact-form.contact-form-white textarea:hover {
border-color: rgba(255, 255, 255, 0.55);
}
.contact-form.contact-form-white input:focus,
.contact-form.contact-form-white select:focus,
.contact-form.contact-form-white textarea:focus {
border-color: var(--bleu-clair);
outline: none;
box-shadow: 0 0 0 3px rgba(181, 223, 247, 0.28);
}
.contact-form.contact-form-white input::placeholder,
.contact-form.contact-form-white textarea::placeholder { color: rgba(0, 16, 25, 0.55); }
.contact-form.contact-form-white select { color: rgba(0, 16, 25, 0.72); }
.contact-form.contact-form-white select:has(option:checked:not([value=""])) { color: var(--nuit-1); }
.contact-form.contact-form-white .contact-form-rgpd { color: rgba(255, 255, 255, 0.86); }
.contact-form.contact-form-white .contact-form-rgpd input[type="checkbox"] {
border-color: rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.08);
}
.contact-form.contact-form-white .contact-form-rgpd a { color: var(--bleu-clair); }
.contact-form.contact-form-white .contact-form-submit {
background: var(--bleu-vif);
color: var(--nuit-1);
border: 1px solid var(--bleu-vif);
}
.contact-form.contact-form-white .contact-form-submit:hover {
background: #ffffff;
color: var(--nuit-1);
border-color: #ffffff;
}
@media (max-width: 700px) { .contact-form.contact-form-white { padding: 2rem 1.5rem; } }
/* Prompt 14 — Page nos-environnements : 6 blocs image en arrière-plan */
.env-detail-section { padding: 4rem 0 6rem; }
.env-bloc {
position: relative; padding: 5rem 3rem; margin-bottom: 2.5rem; border-radius: 4px;
overflow: hidden; background-size: cover; background-position: center; min-height: 360px;
display: flex; align-items: flex-end;
}
/* Ken Burns : l'image de fond respire lentement (scale + panoramique) */
.env-bloc::before {
content: '';
position: absolute; inset: 0;
background: inherit;
background-size: cover;
background-position: center;
z-index: 0;
transform-origin: center center;
animation: env-ken-burns 26s ease-in-out infinite alternate;
will-change: transform;
}
/* Décalage de départ pour éviter la synchronisation entre les 6 blocs */
.env-bloc:nth-child(2)::before { animation-delay: -4s; transform-origin: 65% 45%; }
.env-bloc:nth-child(3)::before { animation-delay: -8s; transform-origin: 40% 55%; }
.env-bloc:nth-child(4)::before { animation-delay: -12s; transform-origin: 55% 40%; }
.env-bloc:nth-child(5)::before { animation-delay: -16s; transform-origin: 35% 60%; }
.env-bloc:nth-child(6)::before { animation-delay: -20s; transform-origin: 60% 50%; }
@keyframes env-ken-burns {
from { transform: scale(1.04); }
to { transform: scale(1.10); }
}
.env-bloc-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,16,25,0.45) 0%, rgba(0,16,25,0.92) 100%);
z-index: 1;
}
.env-bloc-inner { position: relative; z-index: 2; max-width: 740px; }
.env-bloc-inner h2 {
font-family: 'Raleway', sans-serif; font-weight: 200; font-size: 2.4rem;
color: var(--blanc); margin: 0 0 1.5rem; letter-spacing: 0.02em;
}
.env-bloc-inner p {
font-family: 'Inter', sans-serif; font-weight: 300; font-size: 1rem;
color: rgba(248,249,251,0.85); line-height: 1.7; margin: 0;
}
@media (max-width: 700px) {
.env-bloc { padding: 3rem 1.5rem; min-height: 280px; }
.env-bloc-inner h2 { font-size: 1.8rem; }
}
/* ============================================================
ANIMATION ENVIRONNEMENTS — "Réveil cinématographique"
Fondu + slide + rideau qui s'ouvre + ligne éditoriale
+ titre/paragraphe qui glissent + photo qui se net-ifie
============================================================ */
/* La bande entière : fondu + slide latéral au scroll (alternance G/D) */
.env-bloc.reveal {
transform: translateX(-60px);
transition: opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.env-bloc.reveal:nth-child(even) { transform: translateX(60px); }
.env-bloc.reveal.visible { transform: translateX(0); }
/* Photo (::before) : entrée avec scale + blur qui se dissout */
.env-bloc.reveal::before {
transform: scale(1.18);
filter: blur(6px) brightness(0.7);
transition: transform 1600ms cubic-bezier(0.22, 1, 0.36, 1),
filter 1400ms ease;
}
.env-bloc.reveal.visible::before {
transform: scale(1.06);
filter: blur(0) brightness(1);
}
/* Overlay : "rideau" qui s'ouvre (opacité + gradient qui s'éclaircit) */
.env-bloc.reveal .env-bloc-overlay {
opacity: 1;
transition: opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.env-bloc.reveal.visible .env-bloc-overlay { opacity: 0.85; }
/* Ligne éditoriale : plus longue, plus épaisse, glow bleu */
.env-bloc-line {
display: block;
width: 0;
height: 2px;
background: var(--bleu-clair);
box-shadow: 0 0 12px rgba(94, 189, 242, 0.55);
margin-bottom: 1.8rem;
transition: width 1000ms cubic-bezier(0.22, 1, 0.36, 1) 400ms;
will-change: width;
}
.env-bloc.reveal.visible .env-bloc-line { width: 180px; }
/* Titre : grosse translation + léger scale + glow au moment de l'entrée */
.env-bloc.reveal .env-bloc-inner h2 {
transform: translateY(50px);
opacity: 0;
transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 900ms ease,
text-shadow 1200ms ease;
will-change: transform, opacity;
}
.env-bloc.reveal.visible .env-bloc-inner h2 {
transform: translateY(0);
opacity: 1;
transition-delay: 600ms;
}
/* Paragraphe : arrive après le titre */
.env-bloc.reveal .env-bloc-inner p {
transform: translateY(40px);
opacity: 0;
transition: transform 1000ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 900ms ease;
will-change: transform, opacity;
}
.env-bloc.reveal.visible .env-bloc-inner p {
transform: translateY(0);
opacity: 1;
transition-delay: 900ms;
}
/* Prompt 15 — Page Expertise grille 2×2 */
.expertise-piliers-section { padding: 4rem 0 6rem; }
/* ============================================================
PAGE EXPERTISE — MÉTHODE (5 étapes typographiques)
Rendu sobre, cohérent avec .expertise-panels-section.
Aucune nouvelle animation : reveal scroll existant seulement.
============================================================ */
.methode-section { padding: 5rem 0 6rem; }
.methode-steps {
list-style: none;
margin: 3.5rem auto 0;
padding: 0;
max-width: 900px;
display: flex;
flex-direction: column;
gap: 2.4rem;
}
.methode-step {
display: grid;
grid-template-columns: 88px 1fr;
gap: 2rem;
align-items: baseline;
padding-bottom: 2.2rem;
border-bottom: 1px solid rgba(94, 189, 242, 0.08);
}
.methode-step:last-child { border-bottom: 0; padding-bottom: 0; }
.methode-step__num {
font-family: var(--font-titre);
font-size: clamp(1.6rem, 2.4vw, 2.2rem);
font-weight: 200;
color: var(--bleu-vif);
letter-spacing: 0.05em;
line-height: 1;
}
.methode-step__body h3 {
font-family: var(--font-titre);
font-size: clamp(1.1rem, 1.5vw, 1.35rem);
font-weight: 400;
color: var(--blanc);
margin: 0 0 0.7rem;
letter-spacing: 0.01em;
}
.methode-step__body p {
font-family: 'Inter', sans-serif;
font-size: 0.98rem;
font-weight: 300;
color: rgba(248, 249, 251, 0.72);
line-height: 1.75;
margin: 0;
max-width: 640px;
}
/* ============================================================
PAGE EXPERTISE — CHAÎNE DE SERVICE (6 items sobres, grille 3×2)
============================================================ */
.chaine-section { padding: 5rem 0 6rem; }
.chaine-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.2rem 3rem;
margin-top: 3.5rem;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.chaine-item {
padding: 1.4rem 0;
border-top: 1px solid rgba(94, 189, 242, 0.12);
}
.chaine-item h3,
.chaine-item h4 {
font-family: var(--font-titre);
font-weight: 400;
font-size: 1.05rem;
color: var(--blanc);
margin: 0 0 0.7rem;
letter-spacing: 0.02em;
}
.chaine-item p {
font-family: 'Inter', sans-serif;
font-size: 0.92rem;
font-weight: 300;
color: rgba(248, 249, 251, 0.68);
line-height: 1.7;
margin: 0;
}
/* ============================================================
PAGE EXPERTISE — CLAUSE ANTI-CATALOGUE + CTA final
============================================================ */
.clause-section { padding: 4rem 0 7rem; text-align: center; }
.clause-catalogue {
max-width: 720px;
margin: 0 auto;
font-family: 'Inter', sans-serif;
font-size: 1rem;
font-weight: 300;
line-height: 1.8;
color: rgba(248, 249, 251, 0.65);
font-style: italic;
}
.clause-cta { margin-top: 2.5rem; }
/* Responsive méthode/chaîne */
@media (max-width: 800px) {
.methode-step { grid-template-columns: 60px 1fr; gap: 1.2rem; }
.chaine-grid { grid-template-columns: 1fr; gap: 0; }
.chaine-item + .chaine-item { margin-top: 0.4rem; }
}
.piliers-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.pilier-detail {
display: grid; grid-template-columns: 60px 1fr; gap: 1.5rem;
padding: 2rem; background: var(--nuit-2); border: 1px solid rgba(94,189,242,0.1);
border-radius: 4px; transition: border-color 0.3s, transform 0.3s;
}
.pilier-detail:hover { border-color: rgba(94,189,242,0.3); transform: translateY(-2px); }
.pilier-detail-illu { height: 200px; overflow: hidden; border-radius: 2px; }
.pilier-detail-illu img { width: 100%; height: 100%; object-fit: cover; }
.pilier-detail-content h3 {
font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 1.25rem;
color: var(--blanc); margin: 0 0 1rem;
}
.pilier-detail-content p {
font-family: 'Inter', sans-serif; font-weight: 300; color: rgba(248,249,251,0.7);
line-height: 1.65; margin: 0;
}
@media (max-width: 900px) { .piliers-detail-grid { grid-template-columns: 1fr; } }
/* Prompt 16 — Page À propos : grille 2×2 cartes colorées */
.apropos-section { padding: 4rem 0 6rem; }
.apropos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.apropos-card {
display: grid; grid-template-columns: 240px 1fr; min-height: 280px;
border-radius: 4px; overflow: hidden; background: var(--nuit-2);
border: 1px solid rgba(94,189,242,0.08);
}
.apropos-card-logo {
background: var(--card-color, var(--bleu-profond)) center/cover no-repeat;
min-height: 260px;
position: relative;
overflow: hidden;
filter: grayscale(0.72) brightness(0.93) contrast(1.04);
transition: filter 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.apropos-card:hover .apropos-card-logo {
filter: grayscale(0) brightness(1) contrast(1.03);
}
.apropos-card-logo::after {
/* léger dégradé pour ancrer visuellement l'image sur le bord droit */
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 75%, rgba(9, 39, 55, 0.35) 100%);
pointer-events: none;
}
.apropos-card-body { padding: 2rem; display: flex; flex-direction: column; }
.apropos-card-body h3 {
font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 1.4rem;
color: var(--blanc); margin: 0 0 1rem;
}
.apropos-card-body p {
font-family: 'Inter', sans-serif; font-weight: 300; color: rgba(248,249,251,0.7);
line-height: 1.6; margin: 0 0 1.5rem; flex: 1; font-size: 0.95rem;
}
.apropos-card-link {
color: var(--bleu-vif); font-family: 'Raleway', sans-serif;
font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
text-decoration: none; transition: color 0.3s;
}
.apropos-card-link:hover { color: var(--bleu-clair); }
.apropos-card-link-disabled { color: rgba(248,249,251,0.35); pointer-events: none; cursor: default; }
/* CTA discret sous les photos équipe (home) — style "En savoir plus →" */
.equipe-cta-wrap { text-align: center; margin-top: 4rem; }
.equipe-cta-link {
display: inline-block;
color: var(--bleu-vif);
font-family: 'Raleway', sans-serif;
font-size: 0.95rem;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
padding-bottom: 0.65rem;
border-bottom: 1px solid rgba(96, 165, 250, 0.35);
transition: color 0.3s ease, border-color 0.3s ease, letter-spacing 0.3s ease;
}
.equipe-cta-link span { display: inline-block; margin-left: 0.6rem; transition: transform 0.3s ease; }
.equipe-cta-link:hover { color: var(--bleu-clair); border-bottom-color: var(--bleu-clair); }
.equipe-cta-link:hover span { transform: translateX(4px); }
@media (max-width: 900px) {
.apropos-grid { grid-template-columns: 1fr; }
.apropos-card {
display: flex !important;
flex-direction: column !important;
grid-template-columns: 1fr;
}
.apropos-card-logo {
width: 100%;
aspect-ratio: 16 / 9;
min-height: 0 !important;
height: auto;
padding: 0;
background-size: cover !important;
background-position: center top !important;
flex-shrink: 0;
}
/* Cartes avec image dont le sujet est centré verticalement (logo au milieu) */
.apropos-card--pos-center .apropos-card-logo {
background-position: center center !important;
}
.apropos-card-body { padding: 1.5rem; }
}
/* Prompt 17 — Page Cas Clients : bandeaux alternance + modal */
.cc-section { padding: 4rem 0 8rem; }
.cc-bandeau {
display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 3rem;
border-radius: 4px; overflow: hidden; min-height: 360px;
}
.cc-bandeau-reverse { direction: rtl; }
.cc-bandeau-reverse > * { direction: ltr; }
.cc-bandeau-img {
background-size: cover; background-position: center;
transition: transform 0.8s, filter 0.5s ease;
min-height: 280px;
}
.cc-bandeau { cursor: pointer; }
.cc-bandeau:hover .cc-bandeau-img { transform: scale(1.04); }
.cc-bandeau-img[role="button"] { cursor: pointer; }
/* Protection : blocage sélection, drag, callout iOS sur les visuels cas clients */
.cc-bandeau-img,
.cc-modal img {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
user-drag: none;
-webkit-touch-callout: none;
}
.cc-bandeau-img[role="button"]:hover { filter: brightness(1.08); }
.cc-bandeau-img[role="button"]:focus-visible { outline: 2px solid var(--bleu-clair); outline-offset: -4px; }
.cc-bandeau-content {
display: flex; flex-direction: column; justify-content: center; padding: 3rem;
background: linear-gradient(135deg, var(--bleu-profond) 0%, var(--nuit-2) 100%);
color: var(--blanc);
}
.cc-bandeau-eyebrow {
font-family: 'Raleway', sans-serif; font-size: 0.68rem; letter-spacing: 0.2em;
text-transform: uppercase; opacity: 0.65; margin-bottom: 1.2rem;
}
.cc-bandeau h2 {
font-family: 'Raleway', sans-serif; font-weight: 200; font-size: 1.7rem;
letter-spacing: 0.02em; margin: 0 0 1.2rem; line-height: 1.25;
}
.cc-bandeau-sous {
font-family: 'Inter', sans-serif; font-weight: 300; font-size: 0.98rem;
opacity: 0.75; line-height: 1.6; margin: 0 0 2rem;
}
.cc-bandeau-btn {
background: transparent; color: inherit; border: 1px solid currentColor;
padding: 0.85rem 1.8rem; font-family: 'Raleway', sans-serif; font-weight: 300;
letter-spacing: 0.1em; font-size: 0.8rem; text-transform: uppercase;
cursor: pointer; border-radius: 2px; transition: background 0.3s, color 0.3s;
align-self: flex-start;
}
.cc-bandeau-btn:hover { background: var(--bleu-vif); color: var(--nuit-1); border-color: var(--bleu-vif); }
@media (max-width: 900px) {
.cc-bandeau { grid-template-columns: 1fr; }
.cc-bandeau-reverse { direction: ltr; }
.cc-bandeau-content { padding: 2rem; }
.cc-bandeau h2 { font-size: 1.4rem; }
}
/* Modal cas clients */
.cc-modal {
position: fixed; inset: 0; z-index: 9999; display: flex;
align-items: center; justify-content: center; padding: 2rem;
}
.cc-modal[hidden] { display: none; }
.cc-modal-backdrop {
position: absolute; inset: 0; background: rgba(0,16,25,0.85);
backdrop-filter: blur(8px); cursor: pointer;
}
.cc-modal-dialog {
position: relative; background: var(--nuit-2); border: 1px solid rgba(94,189,242,0.15);
border-radius: 4px; max-width: 820px; width: 100%; max-height: 88vh;
overflow-y: auto; overscroll-behavior: contain;
padding: 3.5rem 3rem; box-shadow: 0 40px 100px rgba(0,0,0,0.6);
/* Scrollbar Firefox : discrète, apparaît au hover */
scrollbar-width: thin;
scrollbar-color: transparent transparent;
transition: scrollbar-color 0.35s ease;
}
.cc-modal-dialog:hover,
.cc-modal-dialog:focus-within {
scrollbar-color: rgba(94, 189, 242, 0.4) transparent;
}
/* Scrollbar WebKit/Blink (Chrome, Edge, Safari) */
.cc-modal-dialog::-webkit-scrollbar { width: 8px; }
.cc-modal-dialog::-webkit-scrollbar-track { background: transparent; }
.cc-modal-dialog::-webkit-scrollbar-thumb {
background: transparent; border-radius: 4px;
transition: background 0.35s ease;
}
.cc-modal-dialog:hover::-webkit-scrollbar-thumb,
.cc-modal-dialog:focus-within::-webkit-scrollbar-thumb {
background: rgba(94, 189, 242, 0.4);
}
.cc-modal-dialog::-webkit-scrollbar-thumb:hover {
background: rgba(94, 189, 242, 0.7);
}
.cc-modal-close {
position: absolute; top: 1.2rem; right: 1.2rem; width: 36px; height: 36px;
border: none; background: transparent; color: rgba(248,249,251,0.5); font-size: 1.8rem;
cursor: pointer; line-height: 1; border-radius: 50%; transition: color 0.3s, background 0.3s;
}
.cc-modal-close:hover { color: var(--blanc); background: rgba(94,189,242,0.1); }
.cc-modal-eyebrow {
font-family: 'Raleway', sans-serif; font-size: 0.68rem; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--bleu-vif); margin-bottom: 1.2rem;
}
.cc-modal h2 {
font-family: 'Raleway', sans-serif; font-weight: 200; font-size: 1.9rem;
color: var(--blanc); letter-spacing: 0.02em; margin: 0 0 1rem; line-height: 1.25;
}
.cc-modal-sous {
font-family: 'Inter', sans-serif; font-weight: 300; font-style: italic;
color: rgba(248,249,251,0.65); font-size: 1.02rem; margin: 0 0 2.5rem; line-height: 1.6;
}
.cc-modal-body h3 {
font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 1.1rem;
color: var(--bleu-clair); letter-spacing: 0.02em; margin: 2rem 0 1rem;
}
.cc-modal-body p {
font-family: 'Inter', sans-serif; font-weight: 300; font-size: 0.95rem;
color: rgba(248,249,251,0.78); line-height: 1.75; margin: 0 0 1rem;
}
/* Listes des modales cas clients — ajouté 22/09/2026.
Les énumérations étaient balisées en , elles sont désormais en . */
.cc-modal-body ul.cc-liste {
list-style: none;
margin: 0 0 1.25rem;
padding: 0;
}
.cc-modal-body ul.cc-liste li {
font-family: 'Inter', sans-serif; font-weight: 300; font-size: 0.95rem;
color: rgba(248,249,251,0.78); line-height: 1.75;
position: relative;
padding-left: 1.6rem;
margin: 0 0 0.35rem;
}
.cc-modal-body ul.cc-liste li::before {
content: '\2014';
position: absolute;
left: 0;
top: 0;
color: var(--bleu-acier);
}
@media (max-width: 700px) {
.cc-modal { padding: 1rem; }
.cc-modal-dialog { padding: 2.5rem 1.5rem; }
.cc-modal h2 { font-size: 1.4rem; }
}
/* =================================================================
3 POINTS HERO — PULSATION EN VAGUE (en boucle, dot-1 → dot-2 → dot-3)
Ajouté juillet 2026. Uniquement sur les points du hero, pas sur ceux du logo nav.
================================================================= */
@keyframes hero-dots-wave {
0%, 60%, 100% { transform: scale(1); opacity: 1; }
28% { transform: scale(1.45); opacity: 0.82; }
}
.hero-dots .dot {
animation: hero-dots-wave 3.2s ease-in-out infinite;
}
.hero-dots .dot-1 { animation-delay: 0s; }
.hero-dots .dot-2 { animation-delay: 0.45s; }
.hero-dots .dot-3 { animation-delay: 0.9s; }
/* =================================================================
HERO — MOUVEMENT LÉGER DU FOND (dérive lente du dégradé, 28 s)
Aucun conflit avec le parallax JS qui utilise transform.
L'animation joue sur background-position (canvas 130% de la div).
================================================================= */
/* Pulsation douce du fond du hero — cycle 12 s, respiration lente
Utilise opacity + filter (pas transform) pour ne pas entrer en conflit
avec le parallax JS qui pose déjà un transform sur .hero-bg */
.hero-bg {
animation: hero-bg-breathe 10s ease-in-out infinite;
}
@keyframes hero-bg-breathe {
0%, 100% { opacity: 0.55; filter: brightness(0.8) saturate(0.9); }
50% { opacity: 1; filter: brightness(1.5) saturate(1.35); }
}
/* =====================================================
FIX RESPONSIVE — patch en fin de fichier pour override
la règle .nav-burger { display: none } déclarée après
le media query dans l'ordre source (cascade CSS)
===================================================== */
@media (max-width: 1150px) {
nav#mainNav .nav-links,
nav#mainNav > .nav-cta { display: none !important; }
nav#mainNav .nav-burger { display: flex !important; }
}
/* ============================================================
NOTRE EXPERTISE — Matrice éditoriale 2×2 (page expertise.html)
Cartographie typographique, sobre, contour unique + séparations
============================================================ */
.expertise-matrix-section { padding: 5rem 0 7.5rem; }
.expertise-matrix-title {
font-family: var(--font-titre);
font-weight: 200;
font-size: clamp(2.1rem, 3.2vw, 2.9rem);
line-height: 1.1;
color: var(--blanc);
letter-spacing: 0.005em;
max-width: 650px;
margin: 1.2rem 0 2rem;
}
.expertise-matrix-intro {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 1rem;
line-height: 1.65;
color: rgba(248, 249, 251, 0.82);
max-width: 700px;
margin: 0 0 5rem;
}
.expertise-matrix {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 1200px;
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.11);
background: rgba(8, 36, 48, 0.30);
margin: 0 auto;
}
.expertise-matrix-cell {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2.9rem 3.2rem;
min-height: 240px;
transition: background-color 300ms ease,
transform 300ms ease,
color 300ms ease;
}
/* Séparations centrales, moins contrastées */
.expertise-matrix-cell:nth-child(odd) {
border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.expertise-matrix-cell:nth-child(-n+2) {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* Fine ligne éditoriale bleu clair au-dessus du titre */
.expertise-matrix-rule {
display: block;
width: 28px;
height: 1px;
background: var(--bleu-clair);
margin-bottom: 1.4rem;
transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.expertise-matrix-body { margin: 0; }
.expertise-matrix-headline {
font-family: var(--font-titre);
font-weight: 300;
font-size: clamp(1.75rem, 2.15vw, 2.05rem);
line-height: 1.15;
color: var(--blanc);
margin: 0 0 1.7rem;
letter-spacing: 0.005em;
text-transform: none;
transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.expertise-matrix-desc {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 1.05rem;
line-height: 1.55;
color: rgba(248, 249, 251, 0.85);
max-width: 420px;
margin: 0;
}
.expertise-matrix-tags {
font-family: var(--font-titre);
font-weight: 400;
font-size: 0.85rem;
letter-spacing: 0.03em;
color: rgba(248, 249, 251, 0.7);
margin-top: 2.4rem;
}
/* Hover : fond légèrement plus clair + ligne qui s'étend + titre qui glisse */
.expertise-matrix-cell:hover {
background-color: rgba(12, 49, 64, 0.52);
}
.expertise-matrix-cell:hover .expertise-matrix-rule {
width: 54px;
}
.expertise-matrix-cell:hover .expertise-matrix-headline {
transform: translateX(3px);
}
/* Tablette : padding réduit, 2×2 conservé */
@media (max-width: 900px) {
.expertise-matrix-cell { padding: 2rem; min-height: 220px; }
.expertise-matrix-headline { font-size: 1.6rem; }
}
/* Mobile : 1 colonne, séparations horizontales seulement */
@media (max-width: 640px) {
.expertise-matrix { grid-template-columns: 1fr; }
.expertise-matrix-cell {
padding: 1.75rem;
border-right: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.expertise-matrix-cell:last-child { border-bottom: none !important; }
.expertise-matrix-headline { font-size: 1.55rem; }
.expertise-matrix-desc { font-size: 1rem; }
.expertise-matrix-tags { margin-top: 1.8rem; font-size: 0.82rem; }
}
/* ============================================================
RÉALISATIONS — 2 boutons d'accès (cas clients + formations)
Style identique au CTA Contact du header (.nav-cta) :
petit, cadre bleu vif, uppercase, hover plein
============================================================ */
.real-ctas {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 1.5rem 2rem;
margin-top: 4rem;
}
.real-ctas .btn-primary,
.real-ctas .btn-ghost {
/* Reset des variantes CSS d'origine */
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 0;
margin: 0;
text-decoration: none;
background: transparent;
/* Style identique à .nav-cta */
font-family: var(--font-titre);
font-size: 0.68rem;
font-weight: 400;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--bleu-vif);
border: 1px solid var(--bleu-vif);
padding: 0.6rem 1.4rem;
transition: background var(--t-base), color var(--t-base);
transform: none;
}
.real-ctas .btn-primary:hover,
.real-ctas .btn-ghost:hover {
background: var(--bleu-vif);
color: var(--nuit-1);
transform: none;
border-color: var(--bleu-vif);
}
@media (max-width: 700px) {
.real-ctas { flex-direction: column; align-items: center; gap: 1rem; }
.real-ctas .btn-primary,
.real-ctas .btn-ghost { letter-spacing: 0.22em; }
}
/* ============================================================
NOTRE EXPERTISE — v3 : CSS Grid + 4 états explicites
Système complet réécrit — supprime toute la mécanique flex,
toutes les variables --media-x/--media-y/--panel-offset-x,
toutes les cascades sur nth-child au reveal, tous les masques
overflow sur les titres. Interaction pilotée par data-active +
is-active + has-active posés par JS uniquement au hover.
============================================================ */
.expertise-panels-section { padding: 5.5rem 0 8rem; }
.expertise-panels-title {
font-family: var(--font-titre);
font-weight: 200;
font-size: clamp(2.2rem, 3.2vw, 2.9rem);
line-height: 1.1;
color: var(--blanc);
letter-spacing: 0.005em;
max-width: 650px;
margin: 1.2rem 0 5rem;
}
/* -- Conteneur -------------------------------------------------- */
.expertise-visual {
position: relative;
width: min(1460px, calc(100vw - 80px));
margin: 0 auto;
overflow: hidden;
min-height: clamp(520px, 46vw, 650px);
background: #061923;
isolation: isolate;
}
/* Reveal simple : clip-path gauche→droite + montée du contenu */
.expertise-visual:not(.is-visible) { clip-path: inset(0 100% 0 0); }
.expertise-visual { transition: clip-path 950ms cubic-bezier(.76, 0, .24, 1); }
/* -- Couches d'images (fond changeant selon le panneau actif) -- */
.expertise-backgrounds {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.expertise-background {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 1600ms cubic-bezier(.32, .72, 0, 1),
visibility 0s linear 1600ms;
will-change: opacity;
}
.expertise-background.is-visible {
opacity: 1;
visibility: visible;
transition: opacity 1600ms cubic-bezier(.32, .72, 0, 1),
visibility 0s linear 0s;
}
.expertise-background img {
display: block;
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.045);
filter: brightness(.72);
transition: transform 2000ms cubic-bezier(.32, .72, 0, 1),
filter 1600ms cubic-bezier(.32, .72, 0, 1);
will-change: transform;
}
.expertise-background.is-visible img {
transform: scale(1.015);
filter: brightness(.80);
}
/* Voile global unique — appliqué au conteneur */
.expertise-visual::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(2, 17, 25, .16) 0%,
rgba(2, 17, 25, .24) 42%,
rgba(2, 17, 25, .72) 100%
);
}
/* -- Panneaux : CSS Grid 4 colonnes égales ---------------------- */
.expertise-panels {
position: relative;
z-index: 2;
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr)
minmax(0, 1fr)
minmax(0, 1fr);
width: 100%;
min-height: inherit;
transition: grid-template-columns 1500ms cubic-bezier(.32, .72, 0, 1);
will-change: grid-template-columns;
}
/* 4 états explicites d'expansion — pilotés par data-active sur le conteneur */
.expertise-visual[data-active="0"] .expertise-panels {
grid-template-columns: minmax(0, 1.7fr) minmax(0, .77fr) minmax(0, .77fr) minmax(0, .77fr);
}
.expertise-visual[data-active="1"] .expertise-panels {
grid-template-columns: minmax(0, .77fr) minmax(0, 1.7fr) minmax(0, .77fr) minmax(0, .77fr);
}
.expertise-visual[data-active="2"] .expertise-panels {
grid-template-columns: minmax(0, .77fr) minmax(0, .77fr) minmax(0, 1.7fr) minmax(0, .77fr);
}
.expertise-visual[data-active="3"] .expertise-panels {
grid-template-columns: minmax(0, .77fr) minmax(0, .77fr) minmax(0, .77fr) minmax(0, 1.7fr);
}
.expertise-panel {
position: relative;
min-width: 0;
overflow: hidden;
display: flex;
align-items: flex-end;
padding: clamp(24px, 2.4vw, 42px);
border-left: 1px solid rgba(255, 255, 255, .16);
transition: padding 1500ms cubic-bezier(.32, .72, 0, 1);
}
.expertise-panel:first-child { border-left: 0; }
/* Voile individuel : léger assombrissement des panneaux inactifs */
.expertise-panel::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: rgba(0, 18, 27, 0);
transition: background-color 1500ms cubic-bezier(.32, .72, 0, 1);
will-change: background-color;
}
.expertise-visual.has-active .expertise-panel:not(.is-active)::after {
background: rgba(0, 18, 27, .38);
}
/* Padding réduit sur les panneaux inactifs (transitionné) */
.expertise-visual.has-active .expertise-panel:not(.is-active) {
padding-left: 20px;
padding-right: 12px;
}
/* -- Contenu (au-dessus du voile) ------------------------------- */
.expertise-panel__content {
position: relative;
z-index: 3;
width: 100%;
max-width: 500px;
opacity: 1;
transform: translateY(0);
transition: opacity 520ms ease 380ms,
transform 700ms cubic-bezier(.22, .61, .36, 1);
}
.expertise-visual:not(.is-visible) .expertise-panel__content {
opacity: 0;
transform: translateY(15px);
transition-delay: 0ms, 380ms;
}
/* Titre ancré en bas — pas de translation globale du bloc */
/* -- Titres ---------------------------------------------------- */
.expertise-panel h3 {
margin: 0;
max-width: none;
white-space: nowrap;
font-family: var(--font-titre);
font-weight: 300;
font-size: clamp(27px, 2.1vw, 39px);
line-height: 1.08;
color: rgba(244, 244, 239, .94);
transform: translateY(0);
transition: transform 1400ms cubic-bezier(.32, .72, 0, 1),
color 1300ms cubic-bezier(.32, .72, 0, 1);
}
.expertise-panel.is-active h3 { color: #ffffff; }
.expertise-visual.has-active .expertise-panel:not(.is-active) h3 {
color: rgba(239, 242, 241, .68);
}
/* -- Filets ---------------------------------------------------- */
.expertise-panel__line {
display: block;
width: 28px;
height: 1px;
margin-bottom: 18px;
background: rgba(171, 220, 232, .9);
transition: width 1400ms cubic-bezier(.32, .72, 0, 1),
opacity 1300ms cubic-bezier(.32, .72, 0, 1);
}
.expertise-panel.is-active .expertise-panel__line { width: 72px; }
.expertise-visual.has-active .expertise-panel:not(.is-active) .expertise-panel__line {
width: 17px;
opacity: .42;
}
/* -- Paragraphe révélé au hover -------------------------------- */
.expertise-panel__reveal {
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(14px);
transition: max-height 1500ms cubic-bezier(.32, .72, 0, 1),
opacity 1100ms cubic-bezier(.32, .72, 0, 1),
transform 1400ms cubic-bezier(.32, .72, 0, 1);
}
.expertise-panel.is-active .expertise-panel__reveal {
max-height: 260px;
opacity: 1;
transform: translateY(0);
margin-bottom: 26px;
transition-delay: 0ms, 380ms, 280ms, 280ms;
}
.expertise-visual.has-active .expertise-panel:not(.is-active) .expertise-panel__reveal {
max-height: 0;
opacity: 0;
transform: translateY(14px);
}
.expertise-panel__description {
margin: 0;
max-width: 470px;
font-family: 'Inter', sans-serif;
font-size: clamp(15px, 1.05vw, 17px);
font-weight: 400;
line-height: 1.58;
color: rgba(239, 242, 241, .84);
}
/* Lien d'action optionnel dans un panneau (utilisé pour les filiales À propos) */
.expertise-panel__link {
display: inline-block;
margin-top: 1rem;
font-family: var(--font-titre);
font-size: 0.68rem;
font-weight: 400;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--bleu-vif);
text-decoration: none;
padding: 0.55rem 1.4rem;
border: 1px solid currentColor;
transition: background-color 340ms ease, color 340ms ease;
}
.expertise-panel__link:hover {
background: var(--bleu-vif);
color: var(--nuit-1);
}
.expertise-panel__link--disabled {
opacity: 0.55;
border-style: dashed;
cursor: default;
pointer-events: none;
}
/* -- Mobile & tactile ------------------------------------------ */
@media (hover: none), (max-width: 767px) {
.expertise-visual { width: calc(100vw - 24px); min-height: 0; }
.expertise-panels { display: flex; flex-direction: column; }
.expertise-panel {
flex: none;
min-height: 260px;
padding: 28px;
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .15);
}
.expertise-panel:first-child { border-top: 0; }
.expertise-panel::after { background: rgba(0, 18, 27, .30); }
.expertise-panel h3 {
font-size: clamp(26px, 8vw, 32px);
max-width: none;
white-space: normal;
}
.expertise-visual[data-active] .expertise-panels { grid-template-columns: none; }
.expertise-visual.has-active .expertise-panel:not(.is-active) {
padding: 28px;
}
/* Sur mobile : chaque paragraphe est toujours visible */
.expertise-panel__reveal {
max-height: none;
opacity: 1;
transform: none;
overflow: visible;
margin-top: 16px;
}
.expertise-panel__description {
margin: 0;
max-width: none;
font-size: 15px;
}
.expertise-panel__content { transform: none !important; max-width: none; }
}
/* ============================================================
MODAL CERTIFICAT QUALIOPI
============================================================ */
.qcert-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(16px, 4vw, 48px);
}
.qcert-modal[hidden] { display: none; }
.qcert-backdrop {
position: absolute;
inset: 0;
background: rgba(2, 17, 25, .88);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
cursor: pointer;
}
.qcert-dialog {
position: relative;
z-index: 1;
max-width: min(760px, 100%);
max-height: 92vh;
background: transparent;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
animation: qcert-in 320ms cubic-bezier(.22, .61, .36, 1);
}
@keyframes qcert-in {
from { opacity: 0; transform: translateY(12px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.qcert-dialog img {
display: block;
width: 100%;
height: auto;
max-height: 82vh;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
/* Protections : blocage sélection, drag, clic droit direct, long-press iOS */
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
-webkit-touch-callout: none;
pointer-events: none;
}
.qcert-close {
position: absolute;
top: -14px;
right: -14px;
width: 42px; height: 42px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .3);
background: rgba(2, 17, 25, .95);
color: #fff;
font-size: 26px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 240ms ease, border-color 240ms ease;
}
.qcert-close:hover { background: var(--bleu-vif); border-color: var(--bleu-vif); }
.qcert-footer {
font-family: var(--font-titre);
font-size: 0.72rem;
letter-spacing: 0.24em;
text-transform: uppercase;
}
.qcert-footer a {
color: var(--bleu-clair);
text-decoration: none;
padding: 0.55rem 1.4rem;
border: 1px solid currentColor;
display: inline-block;
transition: background-color 240ms ease, color 240ms ease;
}
.qcert-footer a:hover { background: var(--bleu-clair); color: var(--nuit-1); }
@media (max-width: 767px) {
.qcert-close { top: 4px; right: 4px; }
}
/* ============================================================
FILIALES — Version mobile en cartes empilées (page À propos)
Sur desktop : réutilise le carrousel horizontal .expertise-visual
Sur mobile : chaque panel devient une carte avec sa propre image
============================================================ */
@media (max-width: 767px) {
#filiales .expertise-backgrounds { display: none; }
#filiales .expertise-visual { background: transparent; overflow: visible; }
#filiales .expertise-visual::before { display: none; }
#filiales .expertise-panels { display: flex; flex-direction: column; gap: 1rem; padding: 0 12px; }
#filiales .expertise-panel {
position: relative;
min-height: 320px;
padding: 1.75rem 1.5rem;
border: 0;
background: var(--panel-bg) center / cover no-repeat #061923;
display: flex;
align-items: flex-end;
overflow: hidden;
border-radius: 3px;
}
/* Nova Stella : recadrer sur l'étoile (haut de la photo) */
#filiales .expertise-panel[data-panel="2"] {
background-position: center 12%;
}
/* Voile sombre gradient sur chaque carte pour lisibilité */
#filiales .expertise-panel::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(2,17,25,.22) 0%, rgba(2,17,25,.55) 50%, rgba(2,17,25,.90) 100%);
z-index: 1;
pointer-events: none;
}
#filiales .expertise-panel__content {
position: relative; z-index: 2;
width: 100%;
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
gap: 0.9rem;
}
#filiales .expertise-panel h3 {
margin: 0;
font-size: clamp(24px, 6.2vw, 30px);
line-height: 1.12;
white-space: normal;
color: #ffffff;
}
#filiales .expertise-panel__line {
display: block; width: 40px; height: 1px; margin: 0;
background: rgba(171, 220, 232, .95);
}
#filiales .expertise-panel__reveal {
max-height: none; opacity: 1; overflow: visible; transform: none;
margin: 0;
}
#filiales .expertise-panel__description {
margin: 0 0 0.9rem;
font-size: 14.5px; line-height: 1.55;
color: rgba(239,242,241,.92);
}
#filiales .expertise-panel__link { margin-top: 0.2rem; }
}
/* =========================================================================
EXPERTISE — enrichissements éditoriaux
(hero, piliers, champs, méthode, formations, anti-catalogue, poursuivre)
========================================================================= */
/* Hero — paragraphe d'accroche */
.inner-hero .hero-lead {
font-family: var(--font-corps);
font-size: 1.08rem;
line-height: 1.75;
color: rgba(239, 242, 241, 0.95);
max-width: 780px;
margin-top: 1.75rem;
}
/* Piliers — phrase accentuée */
.pilier-accent {
margin-top: 1.1rem;
padding-top: 1.1rem;
border-top: 1px solid rgba(94, 189, 242, 0.18);
font-family: var(--font-corps);
font-style: italic;
font-size: 1rem;
line-height: 1.65;
color: var(--bleu-clair);
letter-spacing: 0.005em;
}
/* Sections éditoriales partagées (champs, formations, poursuivre) */
.champs-section,
.formations-section,
.poursuivre-section {
padding: 6rem 0;
background: var(--nuit-1);
color: var(--blanc);
}
.champs-section .section-label,
.champs-section .expertise-panels-title,
.champs-section .expertise-sub,
.formations-section .section-label,
.formations-section .expertise-panels-title,
.formations-section .expertise-sub,
.poursuivre-section .section-label,
.poursuivre-section .expertise-panels-title {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.champs-section .expertise-sub,
.formations-section .expertise-sub {
max-width: 820px;
margin-bottom: 3.25rem;
}
/* Carte partagée pour champs, formations, catalogues */
.champs-item,
.formations-item,
.catalogues-item {
padding: 1.65rem 1.5rem;
background: rgba(23, 42, 63, 0.55);
border: 1px solid rgba(94, 189, 242, 0.14);
transition: border-color 300ms ease, background 300ms ease, transform 300ms ease;
}
.champs-item { border-left: 2px solid rgba(94, 189, 242, 0.55); }
.catalogues-item { border-top: 2px solid rgba(94, 189, 242, 0.5); }
.champs-item:hover,
.formations-item:hover,
.catalogues-item:hover {
border-color: rgba(94, 189, 242, 0.32);
background: rgba(23, 42, 63, 0.72);
transform: translateY(-2px);
}
.champs-item:hover { border-left-color: var(--bleu-vif); }
.catalogues-item:hover { border-top-color: var(--bleu-vif); }
.champs-item h3,
.formations-item h3,
.formations-item h4,
.catalogues-item h3 {
font-family: var(--font-titre);
font-weight: 400;
font-size: 1.02rem;
line-height: 1.35;
color: var(--bleu-clair);
margin: 0 0 0.65rem;
letter-spacing: 0.005em;
}
.champs-item p,
.formations-item p,
.catalogues-item p {
font-family: var(--font-corps);
font-size: 0.95rem;
line-height: 1.6;
color: rgba(239, 242, 241, 0.86);
margin: 0;
}
/* Grilles */
.champs-grid,
.formations-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.6rem;
margin-top: 2rem;
}
.catalogues-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin: 2.75rem 0 2.5rem;
}
/* Notes finales de section (champs) */
.champs-note {
margin-top: 2.75rem;
padding-top: 1.75rem;
border-top: 1px solid rgba(94, 189, 242, 0.16);
font-family: var(--font-corps);
font-style: italic;
font-size: 0.98rem;
line-height: 1.7;
color: rgba(239, 242, 241, 0.85);
max-width: 820px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* Méthode — Repère concret */
.methode-step__concret {
margin-top: 0.9rem;
padding-top: 0.9rem;
border-top: 1px dashed rgba(94, 189, 242, 0.22);
font-family: var(--font-corps);
font-size: 0.94rem;
line-height: 1.6;
color: rgba(239, 242, 241, 0.82);
}
.methode-step__label {
font-family: var(--font-titre);
font-weight: 400;
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--bleu-vif);
margin-right: 0.35rem;
}
/* Formations — phrase finale mise en évidence */
.formations-final {
margin-top: 3rem;
padding-top: 1.75rem;
border-top: 1px solid rgba(94, 189, 242, 0.2);
font-family: var(--font-titre);
font-weight: 400;
font-style: italic;
font-size: 1.15rem;
line-height: 1.55;
color: var(--bleu-clair);
text-align: center;
max-width: 820px;
margin-left: auto;
margin-right: auto;
}
/* Section — Poursuivre la découverte : 2 cartes équivalentes */
.poursuivre-section .expertise-panels-title {
max-width: 880px;
margin-bottom: 3rem;
}
.poursuivre-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem;
margin-top: 2rem;
}
.poursuivre-card {
padding: 2.25rem 2rem;
background: rgba(23, 42, 63, 0.6);
border: 1px solid rgba(94, 189, 242, 0.18);
display: flex;
flex-direction: column;
gap: 1rem;
transition: border-color 300ms ease, background 300ms ease, transform 300ms ease;
}
.poursuivre-card:hover {
border-color: rgba(94, 189, 242, 0.42);
background: rgba(23, 42, 63, 0.78);
transform: translateY(-2px);
}
.poursuivre-card h3 {
font-family: var(--font-titre);
font-weight: 400;
font-size: 1.35rem;
line-height: 1.35;
color: var(--bleu-clair);
margin: 0;
letter-spacing: 0.005em;
}
.poursuivre-card p {
font-family: var(--font-corps);
font-size: 0.98rem;
line-height: 1.65;
color: rgba(239, 242, 241, 0.9);
margin: 0 0 0.5rem;
}
.poursuivre-card .btn-primary {
align-self: flex-start;
}
.poursuivre-card .btn-primary:focus-visible,
.poursuivre-card .btn-primary:focus {
outline: 2px solid var(--bleu-vif);
outline-offset: 3px;
}
/* Responsive */
@media (max-width: 960px) {
.champs-grid,
.formations-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.catalogues-grid,
.poursuivre-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
.champs-grid,
.formations-grid { grid-template-columns: 1fr; }
.champs-section,
.formations-section,
.poursuivre-section { padding: 4rem 0; }
.formations-final { font-size: 1.02rem; }
.poursuivre-card { padding: 1.75rem 1.5rem; }
.poursuivre-card h3 { font-size: 1.15rem; }
}
/* =====================================================
NAV À 7 ENTRÉES — ajout de « Programmes » le 22/09/2026.
La nav passe en burger sous 1150px. Entre 1151 et 1400px
il faut resserrer gouttières et marges pour que les
7 entrées + le bouton Contact tiennent sans déborder.
===================================================== */
@media (min-width: 1151px) and (max-width: 1400px) {
nav#mainNav { padding-left: 2rem; padding-right: 2rem; }
nav#mainNav .nav-links { gap: 1.4rem; }
nav#mainNav .nav-links a { letter-spacing: 0.18em; }
}
/* =====================================================
À PROPOS — lisibilité du panneau Nova Stella (22/09/2026).
Le visuel Nova Stella porte déjà un lettrage « NOVA STELLA /
INTELLIGENCE ARTIFICIELLE » ; le texte du panneau se superposait
à ce lettrage. On assombrit ce seul calque et on renforce le voile
global pendant que ce panneau est actif. L'image n'est pas modifiée,
les trois autres filiales et toutes les transitions sont inchangées.
Le mobile a déjà son propre traitement sous 768px.
===================================================== */
@media (min-width: 768px) {
#filiales .expertise-background[data-background="2"] img {
filter: brightness(.46);
}
#filiales .expertise-background[data-background="2"].is-visible img {
filter: brightness(.52);
}
#filiales .expertise-visual[data-active="2"]::before {
background: linear-gradient(
180deg,
rgba(2, 17, 25, .28) 0%,
rgba(2, 17, 25, .42) 42%,
rgba(2, 17, 25, .84) 100%
);
}
}
/* =====================================================
BANDEAU PARTENAIRES — flèches de contrôle (22/09/2026).
Le glisser existait déjà mais rien ne l'indiquait à l'écran.
Les flèches rendent le défilement manuel visible et utilisable
au clic comme au clavier. Le glisser et le défilement automatique
sont conservés à l'identique.
===================================================== */
.ticker-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid rgba(94, 189, 242, 0.22);
border-radius: 50%;
background: rgba(0, 16, 25, 0.72);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: var(--bleu-ardoise);
cursor: pointer;
transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
}
.ticker-arrow:hover {
color: var(--blanc);
border-color: rgba(94, 189, 242, 0.45);
background: rgba(9, 39, 55, 0.88);
}
.ticker-arrow:focus-visible {
outline: 2px solid var(--bleu-vif);
outline-offset: 2px;
}
.ticker-arrow-prev { left: 10px; }
.ticker-arrow-next { right: 10px; }
@media (max-width: 600px) {
.ticker-arrow { width: 30px; height: 30px; }
.ticker-arrow-prev { left: 6px; }
.ticker-arrow-next { right: 6px; }
}
/* =====================================================
PAGE QUALIOPI — bloc logo officiel (22/09/2026).
La charte d'usage interdit toute modification du logo :
il est donc posé tel quel, sur sa carte blanche, avec une
zone de protection autour, et la mention réglementaire
obligatoire directement sous le logo.
===================================================== */
.qualiopi-certif-bloc {
display: inline-block;
background: #ffffff;
border-radius: 3px;
padding: 1.75rem 2rem 1.5rem;
margin: 0 0 2.5rem;
max-width: 420px;
}
.qualiopi-certif-bloc .qualiopi-logo {
display: block;
width: 100%;
max-width: 260px;
height: auto;
margin: 0 auto;
}
.qualiopi-certif-bloc .qualiopi-mention {
margin: 1.25rem 0 0;
font-family: var(--font-corps);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.6;
color: #1b2a36;
text-align: center;
}
@media (max-width: 600px) {
.qualiopi-certif-bloc {
display: block;
max-width: none;
padding: 1.4rem 1.25rem 1.25rem;
}
}
/* Date de dernière mise à jour — politique de confidentialité (22/09/2026) */
.legal-maj {
margin-top: 0.75rem;
font-size: 0.82rem;
color: rgba(248, 249, 251, 0.45);
font-style: italic;
}
/* =====================================================
PAGE EXPERTISE — accordéons (22/09/2026).
L'audit jugeait la page trop dense. Aucun mot n'a été supprimé :
les champs d'intervention et les étapes de méthode sont repliés.
Implémentation en / natifs : accessible au clavier,
fonctionnel sans JavaScript, et indépendant de toute boucle d'animation.
Le premier élément de chaque groupe est ouvert pour indiquer le mécanisme.
===================================================== */
.exp-acc { border: 0; }
.exp-acc > summary {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
cursor: pointer;
list-style: none;
padding: 0.25rem 0;
}
.exp-acc > summary::-webkit-details-marker { display: none; }
.exp-acc > summary::marker { content: ''; }
.exp-acc > summary:focus-visible {
outline: 2px solid var(--bleu-vif);
outline-offset: 3px;
}
.exp-acc > summary h3 { margin: 0; }
.exp-acc > summary:hover h3 { color: var(--bleu-clair); }
/* Chevron */
.exp-acc__icon {
flex: 0 0 auto;
width: 13px;
height: 13px;
margin-top: 0.3rem;
border-right: 2px solid var(--bleu-acier);
border-bottom: 2px solid var(--bleu-acier);
transform: rotate(45deg);
transition: transform var(--t-base), border-color var(--t-base);
}
.exp-acc[open] > summary .exp-acc__icon { transform: rotate(-135deg); }
.exp-acc > summary:hover .exp-acc__icon { border-color: var(--bleu-vif); }
/* Ouverture animée sans JavaScript */
.exp-acc__inner {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 420ms cubic-bezier(.32, .72, 0, 1);
}
.exp-acc[open] .exp-acc__inner { grid-template-rows: 1fr; }
.exp-acc__content {
overflow: hidden;
min-height: 0;
}
.exp-acc[open] .exp-acc__content { padding-top: 0.6rem; }
/* Impression : tout déplié */
@media print {
.exp-acc__inner { grid-template-rows: 1fr !important; }
}
/* Six champs d'intervention, refonte du 23/09/2026.
Les accordéons laissaient un vide dans la rangée dès qu'un seul
élément était ouvert : la rangée restait calée sur la hauteur de la carte
dépliée. Remplacés par un survol. Le texte se déploie sous la carte, en
recouvrement, donc sans jamais décaler la mise en page.
Le survol n'existe que là où un pointeur existe. Au tactile, et à toute
largeur sous 961 px, les six textes sont affichés en permanence, comme le
font déjà les panneaux de la page d'accueil. */
.champs-grid { align-items: stretch; }
.champs-item { position: relative; }
.champs-item > h3 { margin-bottom: 0; }
.champ-reveal > p { margin: 0.65rem 0 0; }
@media (hover: hover) and (min-width: 961px) {
.champs-item:hover,
.champs-item:focus-within {
background: rgba(17, 33, 50, 0.98);
border-color: rgba(94, 189, 242, 0.32);
border-left-color: var(--bleu-vif);
z-index: 5;
}
.champs-item:focus-visible { outline: 2px solid var(--bleu-vif); outline-offset: 3px; }
.champ-reveal {
position: absolute;
/* -2px à gauche pour recouvrir le liseré d'accent de 2 px de la carte,
-1px à droite pour sa bordure de 1 px. */
left: -2px;
right: -1px;
top: 100%;
z-index: 5;
/* Opaque : le panneau doit masquer franchement ce qu'il recouvre,
cartes de la rangée suivante et note de fin de section. */
background: rgb(17, 33, 50);
/* Bordures posées seulement à l'ouverture : un bloc de hauteur nulle
dessine quand même ses bordures, ce qui laissait un liseré sous
chaque carte au repos. */
border: 0 solid rgba(94, 189, 242, 0.32);
padding: 0 1.5rem;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 420ms cubic-bezier(.32, .72, 0, 1),
opacity 300ms ease,
padding 420ms cubic-bezier(.32, .72, 0, 1);
}
.champs-item:hover .champ-reveal,
.champs-item:focus-within .champ-reveal {
max-height: 360px;
opacity: 1;
padding: 0.2rem 1.5rem 1.5rem;
border-width: 0 1px 1px 2px;
border-left-color: var(--bleu-vif);
}
.champ-reveal > p { margin: 0; }
}
/* Programmes : le titre porte desormais un bouton, pour l'acces clavier
et l'annonce de l'etat. Le bouton doit etre visuellement transparent. */
.prog-titre { margin: 0; }
.prog-trigger {
display: block;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.prog-trigger:focus-visible {
outline: 2px solid var(--bleu-vif);
outline-offset: 3px;
}
/* Le lien vers la politique de confidentialite, dans le texte de consentement,
ne se distinguait que par la couleur, a 1,13:1 du texte environnant.
Le soulignement le rend identifiable sans dependre de la couleur. */
.contact-form-rgpd a {
text-decoration: underline;
text-underline-offset: 2px;
}
/* Indicateur 1 du RNQ : informations reglementaires par programme (23/09/2026).
Le bloc occupe toute la largeur sous les trois colonnes de la fiche. */
.prog-cadre {
grid-column: 1 / -1;
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(94, 189, 242, 0.08);
}
.prog-cadre-dl {
display: grid;
grid-template-columns: 200px 1fr;
gap: 0.5rem 1.5rem;
margin: 0;
}
.prog-cadre-dl dt {
font-family: var(--font-titre);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--bleu-acier);
}
.prog-cadre-dl dd {
margin: 0;
font-size: 0.85rem;
line-height: 1.75;
color: rgba(248, 249, 251, 0.55);
}
.prog-cadre-dl dd a { color: var(--bleu-clair); }
@media (max-width: 860px) {
.prog-cadre-dl { grid-template-columns: 1fr; gap: 0.15rem; }
.prog-cadre-dl dd { margin-bottom: 0.9rem; }
}
/* Le repli en grille laissait subsister les marges internes du bloc,
soit 73 px visibles sous chaque fiche fermee. Les marges verticales
sont desormais annulees a l'etat ferme et restituees a l'ouverture. */
.prog-body > .prog-body-inner {
padding-top: 0;
padding-bottom: 0;
transition: padding 600ms ease;
}
.prog-item.open .prog-body > .prog-body-inner {
padding-top: 2rem;
padding-bottom: 2.5rem;
}
/* Mention de non-exhaustivite du catalogue, exigee par la lecture de
l'indicateur 1 pour un organisme de sur-mesure (23/09/2026). */
.prog-hors-catalogue {
margin-top: 5rem;
padding: 2.5rem 2rem;
border: 1px solid rgba(94, 189, 242, 0.1);
background: rgba(9, 39, 55, 0.25);
}
.prog-hors-catalogue h2 {
font-family: var(--font-titre);
font-size: 1.15rem;
font-weight: 300;
color: var(--blanc);
margin: 0 0 1.25rem;
}
.prog-hors-catalogue p {
font-size: 0.92rem;
line-height: 1.85;
color: rgba(248, 249, 251, 0.62);
margin: 0 0 1rem;
max-width: 900px;
}
.prog-hors-catalogue p:last-child { margin-bottom: 0; }
/* Les « Repère concret » listent les livrables : c'est l'information la plus
decisive pour un acheteur. Sortis des accordeons le 23/09/2026, ils sont
desormais toujours visibles sous le titre de chaque etape de methode. */
.methode-step__concret--visible {
margin: 0.6rem 0 0.2rem;
padding: 0.7rem 0 0 0.9rem;
border-left: 2px solid rgba(94, 189, 242, 0.28);
}
/* Le retrait de la grille des quatre catalogues (23/09/2026) a mis trois
paragraphes .clause-catalogue au contact : margin 0 auto ne laissait
aucun interligne entre eux. Regle limitee aux paragraphes consecutifs,
sans effet sur un paragraphe isole. */
.clause-catalogue + .clause-catalogue { margin-top: 1.4rem; }
/* =====================================================
ALLÉGEMENT VERTICAL — 23/09/2026.
Mesure préalable : sur la page Expertises, 45 % de la hauteur totale
n'était pas du contenu mais de la respiration, des labels, des titres
et des chapeaux de section. Le texte lui-même ne pesait que 55 %.
Deux réglages, aucun mot modifié, aucune interaction ajoutée :
la respiration verticale des sections et la taille des titres de section.
Le bandeau d'ouverture (.hero) n'est pas touché.
===================================================== */
/* 1. Respiration verticale des sections */
:root {
--pad-section: 3.5rem 0;
--pad-section-mobile: 3rem 0;
}
.cv-section,
.cv-back-section,
.contact-section-light,
.env-detail-section,
.expertise-piliers-section,
.methode-section,
.chaine-section,
.clause-section,
.apropos-section,
.cc-section,
.expertise-matrix-section,
.expertise-panels-section,
.champs-section,
.formations-section,
.poursuivre-section { padding: 3.5rem 0; }
@media (max-width: 620px) {
.cv-section,
.cv-back-section,
.contact-section-light,
.env-detail-section,
.expertise-piliers-section,
.methode-section,
.chaine-section,
.clause-section,
.apropos-section,
.cc-section,
.expertise-matrix-section,
.expertise-panels-section,
.champs-section,
.formations-section,
.poursuivre-section { padding: 3rem 0; }
}
/* 2. Titres de section, environ 25 % de moins sur la borne haute.
Les titres de page (.contact-title-h1, .cv-header h2), les titres
internes aux cartes et les titres des pages légales ne sont pas touchés. */
.metier-headline,
.methode-headline,
.expertise-headline,
.real-headline,
.equipe-headline { font-size: clamp(1.65rem, 2.5vw, 2.05rem); }
.env-headline,
.contact-headline { font-size: clamp(1.65rem, 2.8vw, 2.25rem); }
.expertise-panels-title { font-size: clamp(1.75rem, 2.5vw, 2.25rem); }
.expertise-matrix-title { font-size: clamp(1.7rem, 2.5vw, 2.25rem); }
.qualiopi-intro h2 { font-size: clamp(1.55rem, 2.35vw, 2.05rem); }
.format-header h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
/* 3. Marges autour des titres de section.
Mesure avant correction, sur la page Expertises : chaque titre portait
80 px de marge basse, chaque label 40 px, chaque chapeau 52 à 80 px,
soit 158 px de vide autour du seul titre, répétés sept fois. */
.section-label { margin-bottom: 1.25rem; }
.expertise-panels-title,
.expertise-matrix-title,
.metier-headline,
.methode-headline,
.expertise-headline,
.real-headline,
.equipe-headline,
.env-headline,
.contact-headline { margin-top: 0.6rem; margin-bottom: 2rem; }
.expertise-sub { margin-bottom: 2.25rem; }
.champs-section .expertise-sub,
.formations-section .expertise-sub { margin-bottom: 2.25rem; }
.poursuivre-section .expertise-panels-title { margin-bottom: 2rem; }
/* =====================================================
FUSION DE SECTIONS — 23/09/2026.
La page Expertises comptait neuf sections, dont quatre répondaient à la
même question, « comment nous travaillons » : les piliers, la méthode,
les supports pédagogiques et la chaîne de service. Chaque section coûtait
environ 130 px de label, de titre et de marges avant le moindre contenu,
en plus de sa respiration verticale.
Les supports et la chaîne deviennent deux sous-blocs de la méthode.
Les deux cartes « Poursuivre la découverte » rejoignent le bloc
« Une offre structurée, jamais figée », les deux invitant à consulter
les programmes. Neuf sections deviennent six.
===================================================== */
.bloc-sous {
margin-top: 3.2rem;
padding-top: 2.6rem;
border-top: 1px solid rgba(94, 189, 242, 0.10);
}
.sous-label {
font-family: var(--font-titre);
font-size: 0.68rem;
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--bleu-acier);
margin: 0 0 0.7rem;
}
.sous-titre {
font-family: var(--font-titre);
font-weight: 200;
font-size: clamp(1.3rem, 1.9vw, 1.65rem);
line-height: 1.3;
color: var(--blanc);
margin: 0 0 1.1rem;
letter-spacing: 0.01em;
}
.sous-chapeau {
font-family: 'Inter', sans-serif;
font-size: 0.98rem;
font-weight: 300;
line-height: 1.7;
color: rgba(239, 242, 241, 0.74);
max-width: 820px;
margin: 0 0 0.9rem;
}
.sous-chapeau:last-of-type { margin-bottom: 1.8rem; }
/* Les 4 piliers : premier paragraphe visible, suite au clic.
C'est le seul bloc de la page dont le texte soit réellement long,
98 à 122 mots par pilier, 422 mots au total. */
.pilier-suite[hidden] { display: none; }
.pilier-plus {
margin-top: 0.9rem;
padding: 0.4rem 0;
border: 0;
background: none;
cursor: pointer;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bleu-clair);
border-bottom: 1px solid rgba(94, 189, 242, 0.35);
transition: color 0.25s ease, border-color 0.25s ease;
}
.pilier-plus:hover { color: var(--blanc); border-bottom-color: var(--bleu-vif); }
.pilier-plus:focus-visible { outline: 2px solid var(--bleu-vif); outline-offset: 3px; }
@media (max-width: 620px) {
.bloc-sous { margin-top: 2.4rem; padding-top: 2rem; }
}
/* Sept supports pédagogiques dans une grille de trois colonnes laissaient
deux cases vides en dernière rangée. Le septième occupe la rangée. */
@media (min-width: 961px) {
.formations-grid > .formations-item:last-child { grid-column: 1 / -1; }
.formations-grid > .formations-item:last-child p { max-width: 62ch; }
}
/* Bloc final fusionné.
Le titre portait déjà une boîte de 650 px calée à gauche dans une section
centrée : peu visible tant que la section ne contenait que du texte étroit,
franchement décalé depuis que les deux cartes occupent toute la largeur.
Les cartes, elles, retrouvent l'alignement à gauche qu'elles avaient dans
leur section d'origine. */
.clause-section .expertise-panels-title,
.clause-section .clause-catalogue { margin-left: auto; margin-right: auto; }
.clause-section .poursuivre-grid { text-align: left; }
.pilier-plus { display: inline-block; align-self: flex-start; width: auto; }
/* =============================================================
CHANTIER REFONTE 2026-10 — Champs-item hover fix,
piliers-timeline, organisation-frise, poursuivre-section
============================================================= */
/* 15/10/2026 : le bloc ajouté le 02/10 posait overflow:hidden sur la carte
et inset:0 sur le texte révélé. Mesure avant retrait, à 1440 px : carte
figée à 77 px, texte demandant 178 px, soit 103 px tronqués ; 157 px
tronqués à 961 px. Sous 961 px la règle ne s'appliquait pas, d'où un
affichage correct sur mobile et coupé sur écran. Bloc retiré : le
comportement d'ouverture sous la carte, défini plus haut, reprend la main. */
/* Piliers : variante timeline (frise verticale continue, 4 piliers reliés) */
.piliers-timeline { position: relative; padding-left: 2.2rem; }
.piliers-timeline::before {
content: '';
position: absolute;
left: 0.75rem;
top: 1.5rem;
bottom: 1.5rem;
width: 1px;
background: linear-gradient(to bottom, var(--bleu-acier), var(--bleu-clair));
opacity: 0.55;
}
.piliers-timeline .pilier-line { position: relative; }
.piliers-timeline .pilier-line::after {
content: '';
position: absolute;
left: -1.7rem;
top: 2.4rem;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--bleu-vif);
box-shadow: 0 0 0 3px var(--nuit-1), 0 0 10px rgba(94, 189, 242, 0.45);
z-index: 2;
}
@media (max-width: 700px) {
.piliers-timeline { padding-left: 1.4rem; }
.piliers-timeline::before { left: 0.35rem; }
.piliers-timeline .pilier-line::after { left: -1.15rem; top: 1.9rem; width: 9px; height: 9px; }
}
/* Organisation (page méthode) : frise connectée en 6 points, 3x2 */
.organisation-section .container { max-width: 1100px; }
.organisation-frise {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4rem 3rem;
padding: 3.5rem 1.5rem 1rem;
margin-top: 2.5rem;
}
/* 15/10/2026 : la frise était reliée par un rectangle SVG tracé en
preserveAspectRatio="none" sur un viewBox de 900x420. Ses arêtes se
plaçaient donc à des pourcentages fixes, sans rapport avec la position
réelle des cartes. Mesure avant correction : 11 croisements avec le texte
à 1440 px, 14 à 1000 px, et frise masquée sous 900 px. Le rectangle est
retiré du HTML et remplacé par des segments calés sur les pastilles,
tracés dans la bande libre qui les sépare du texte. */
.organisation-frise__item::after {
content: '';
position: absolute;
top: 5px;
left: 50%;
width: calc(100% + 3rem);
height: 1px;
background: linear-gradient(90deg, rgba(94, 189, 242, 0.55) 0%, rgba(181, 223, 247, 0.22) 100%);
pointer-events: none;
z-index: 0;
}
/* Dernière colonne : pas de segment vers la droite. */
.organisation-frise__item:nth-child(3n)::after { content: none; }
.organisation-frise__item {
position: relative;
z-index: 1;
padding-top: 1.75rem;
text-align: center;
}
.organisation-frise__dot {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--bleu-vif);
box-shadow: 0 0 0 4px var(--nuit-1), 0 0 12px rgba(94, 189, 242, 0.55);
z-index: 2;
}
.organisation-frise__item h3 {
font-family: var(--font-titre);
font-weight: 300;
color: var(--bleu-clair);
font-size: 1.15rem;
letter-spacing: 0.03em;
margin: 0 0 0.6rem;
}
.organisation-frise__item p {
font-family: 'Inter', sans-serif;
font-weight: 300;
color: rgba(248, 249, 251, 0.72);
font-size: 0.95rem;
line-height: 1.65;
margin: 0;
max-width: 32ch;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 900px) {
.organisation-frise { grid-template-columns: repeat(2, 1fr); gap: 3rem 2rem; }
/* Deux colonnes : l'écart tombe à 2rem et c'est la colonne paire qui ferme la
rangée. La règle 3n de la grille à trois colonnes doit être explicitement
rouverte, sa spécificité étant supérieure à celle du sélecteur simple. */
.organisation-frise__item::after { width: calc(100% + 2rem); }
.organisation-frise__item:nth-child(3n)::after { content: ''; }
.organisation-frise__item:nth-child(2n)::after { content: none; }
}
@media (max-width: 560px) {
.organisation-frise { grid-template-columns: 1fr; gap: 2.25rem; padding-top: 2rem; }
.organisation-frise__item::after,
.organisation-frise__item:nth-child(3n)::after { content: none; }
}
/* Bloc final 2 CTA côté expertise.html + methode.html */
.poursuivre-section { padding: 4rem 0; }
.poursuivre-section .poursuivre-grid { max-width: 1100px; margin-left: auto; margin-right: auto; }
/* =============================================================
15/10/2026 — Accueil, bloc « Nos environnements » : deux cartes
Le zoom au survol porte sur une couche média dédiée, pour que le
libellé et la flèche ne soient pas agrandis avec la photographie.
============================================================= */
.env-duo {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-top: 3.5rem;
}
.env-duo-card {
position: relative;
display: flex;
align-items: flex-end;
aspect-ratio: 16 / 11;
overflow: hidden;
border-radius: 4px;
text-decoration: none;
padding: 2.2rem;
isolation: isolate;
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
}
.env-duo-media {
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center;
transform: scale(1);
transition: transform 900ms cubic-bezier(.22, .61, .36, 1);
}
.env-duo-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
/* Deux voiles superposés : l'un en pied pour détacher le libellé du bas de
l'image, l'autre vers la gauche pour que le texte reste lisible quand le
sujet photographié est clair de ce côté (sac et bouteille, carte Prestige). */
background:
linear-gradient(180deg, rgba(0, 16, 25, 0.08) 0%, rgba(0, 16, 25, 0.52) 55%, rgba(0, 16, 25, 0.90) 100%),
linear-gradient(90deg, rgba(0, 16, 25, 0.60) 0%, rgba(0, 16, 25, 0.18) 48%, rgba(0, 16, 25, 0) 72%);
transition: background 0.45s ease;
}
.env-duo-body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.env-duo-label {
color: #f8f9fb;
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: clamp(1.15rem, 1.7vw, 1.5rem);
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.3;
/* Borné pour que le libellé ne coure pas sous le sujet photographié. */
max-width: 20ch;
text-wrap: balance;
}
.env-duo-arrow {
display: inline-flex;
align-items: center;
color: var(--bleu-clair);
transition: transform 0.4s ease, color 0.3s ease;
}
.env-duo-arrow svg { width: 26px; height: 26px; }
@media (hover: hover) {
.env-duo-card:hover .env-duo-media { transform: scale(1.06); }
.env-duo-card:hover .env-duo-overlay {
background:
linear-gradient(180deg, rgba(0, 16, 25, 0.06) 0%, rgba(40, 86, 126, 0.55) 55%, rgba(40, 86, 126, 0.92) 100%),
linear-gradient(90deg, rgba(0, 16, 25, 0.58) 0%, rgba(0, 16, 25, 0.16) 48%, rgba(0, 16, 25, 0) 72%);
}
.env-duo-card:hover .env-duo-arrow { transform: translateX(7px); color: var(--blanc); }
}
.env-duo-card:focus-visible { outline: 2px solid var(--bleu-vif); outline-offset: 3px; }
@media (max-width: 760px) {
.env-duo { grid-template-columns: 1fr; gap: 1.1rem; }
.env-duo-card { aspect-ratio: 16 / 10; padding: 1.6rem; }
}
/* Ancre de navigation sans incidence visuelle (cible #prestige). */
.ancre-silencieuse { display: block; height: 0; overflow: hidden; }
/* =============================================================
15/10/2026 — Champs d'intervention : place réservée sous la grille
Le panneau de détail s'ouvre sous la carte survolée. Pour les trois
cartes de la seconde rangée il descend donc sous la grille. Mesure
avant correction : débordement de 13 px à 1440 px et jusqu'à 110 px
à 961 px hors de la section, empiétant sur la section suivante.
Cette règle doit rester après le bloc de réduction verticale, qui
repose sur la propriété raccourcie padding et écraserait la valeur.
============================================================= */
@media (hover: hover) and (min-width: 961px) {
.champs-section { padding-bottom: 10.5rem; }
/* L'animation d'apparition laisse la grille à une opacité de 0,999999,
ce qui suffit à créer un contexte d'empilement : le panneau de détail
s'y trouve enfermé et la note finale, simple frère suivant dans le flux,
se peignait par-dessus. On ordonne donc explicitement les deux. */
.champs-grid { position: relative; z-index: 2; }
.champs-note { position: relative; z-index: 1; }
}
/* =============================================================
15/10/2026 — Visuels en attente
Deux emplacements n'ont pas encore de photographie : le bandeau du cas
client PRESTIGE et deux blocs sectoriels de la page Nos environnements.
Plutôt qu'une image empruntée à un autre secteur, qui tromperait le
lecteur, ces blocs reçoivent un fond travaillé. Dès que les fichiers
sont fournis, il suffit de rendre à ces éléments le style inline des
autres blocs et de supprimer ces classes.
============================================================= */
.cc-bandeau-img-attente,
.env-bloc-attente {
background-image:
radial-gradient(120% 90% at 28% 18%, rgba(94, 189, 242, 0.17) 0%, rgba(94, 189, 242, 0) 58%),
linear-gradient(145deg, #0d1b28 0%, #16304a 55%, #0a141f 100%);
background-size: cover;
background-position: center;
}
/* =============================================================
15/10/2026 — Nos environnements : sélecteur à deux univers
============================================================= */
.env-onglets {
display: flex;
gap: clamp(1.5rem, 4vw, 3.5rem);
justify-content: center;
flex-wrap: wrap;
margin: 0 0 3.5rem;
}
.env-onglet {
position: relative;
border: 0;
background: none;
padding: 0.6rem 0.2rem;
cursor: pointer;
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: clamp(0.78rem, 1.1vw, 0.95rem);
letter-spacing: 0.18em;
text-transform: uppercase;
/* 0.42 donnait un contraste de 3,74 sur le fond nuit, sous le seuil AA de
4,5. Porté à 0.55, soit 5,62, l'onglet inactif reste nettement distinct
de l'onglet actif, en blanc plein. */
color: rgba(239, 242, 241, 0.55);
transition: color 0.3s ease;
}
.env-onglet::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: rgba(239, 242, 241, 0.8);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.35s cubic-bezier(.32, .72, 0, 1);
}
.env-onglet:hover { color: rgba(239, 242, 241, 0.78); }
.env-onglet.is-actif { color: var(--blanc); }
.env-onglet.is-actif::after { transform: scaleX(1); }
.env-onglet:focus-visible { outline: 2px solid var(--bleu-vif); outline-offset: 4px; }
.env-panneau { opacity: 1; transition: opacity 0.3s ease; }
.env-panneau[hidden] { display: none; }
.env-panneau.est-en-transition { opacity: 0; }
/* Les deux impératifs du bloc Maisons de luxe. */
.env-bloc-liste {
list-style: none;
margin: 1.1rem 0 0;
padding: 0;
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 1rem;
color: rgba(248, 249, 251, 0.85);
line-height: 1.7;
}
.env-bloc-liste li { position: relative; padding-left: 1.15rem; }
.env-bloc-liste li + li { margin-top: 0.85rem; }
.env-bloc-liste li::before {
content: '';
position: absolute;
left: 0;
top: 0.78em;
width: 6px;
height: 1px;
background: var(--bleu-clair);
}
.env-bloc-liste strong { font-weight: 500; color: var(--blanc); }
.env-cta-final { text-align: center; margin-top: 5rem; }