/* Concord — feuille de style commune
Source de vérité du système visuel (tokens, base, composants des recettes R1–R8, mouvement,
responsive, accessibilité). Extraite de la home le 15 septembre 2026.
Règles : marque/BRAND-TOOLKIT.md · tokens machine : site/public/romain/brand/manifest.json.
Mise en place d'une page :
data-type : "institution" (défaut validé) ou "editorial". data-palette : "poppy" (défaut validé),
"orange", ou absent = corail de base. Le CSS propre à une page va dans un fichier à côté d'elle.
Peintures : le système ne contient aucune image (une url() dans une feuille commune se résout
par rapport à son propre dossier). Chaque page pose ses peintures dans son CSS, sur ces
quatre emplacements (modèle : site/home/home.css) :
.client-evidence__paint { background-image: url("assets/…") } R5 genèse / preuve
.coordination-stage { background: , url("assets/…") 54% 48% / cover no-repeat } coordination
.human__media::before { background-image: url("assets/…") } R6 chapitre humain
.closing__frame::before { background-image: url("assets/…") } R8 conversion
Les 12 peintures disponibles et leur rôle : marque/IMAGE-LIBRARY.md.
*/
/* ===== Tokens — palette, typographie, rythme, mouvement ===== */
:root {
--paper: #ece8e0;
--paper-light: #f8f6f1;
--mist: #e7ecec;
--stone: #d8d0c4;
--ink: #162a36;
--editorial-black: #101111;
--muted: #626b6d;
--navy: #27465d;
--navy-deep: #142d3e;
--sage: #8ea09a;
--sage-light: #dde5e2;
--coral: #b95a53;
--claret: #853f49;
--mineral: #858b89;
--signal: #b95a53;
--signal-ink: #853f49;
--signal-soft: #efaaa2;
--signal-hover: #a84e4c;
--shell: min(1240px, calc(100% - 40px));
--sans: "DM Sans", sans-serif;
--serif: "Instrument Serif", Georgia, serif;
--mono: "DM Mono", monospace;
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-glide: cubic-bezier(.45, 0, .15, 1);
--motion-fast: .34s;
--motion-base: .72s;
--motion-slow: 1.05s;
--motion-scene: 1.28s;
}
/* ===== Variantes de signal et de typographie (html[data-palette] / html[data-type]) ===== */
html[data-palette="poppy"] {
--signal: #f05a3c;
--signal-ink: #a93628;
--signal-soft: #f3c8bd;
--signal-hover: #d6462d;
}
html[data-palette="orange"] {
--signal: #f28c18;
--signal-ink: #a94e00;
--signal-soft: #f1d1a6;
--signal-hover: #d8750b;
}
html[data-type="editorial"] { --serif: "IBM Plex Serif", Georgia, serif; }
html[data-type="institution"] { --serif: "DM Sans", sans-serif; }
html[data-type="editorial"] :is(.hero h1, .why h2, .client-evidence h2, .coordination h2, .journey-panel h3, .route-breath p, .certainty h2, .method h2, .human h2, .testimonial-panel blockquote, .faq h2, .closing h2) {
letter-spacing: -.035em;
}
html[data-type="editorial"] :is(.hero h1, .why h2, .client-evidence h2, .coordination h2, .journey-panel h3, .route-breath p, .certainty h2, .method h2, .human h2, .testimonial-panel blockquote, .faq h2, .closing h2) em {
font-style: normal;
font-weight: 500;
}
html[data-type="institution"] :is(.hero h1, .closing h2) {
font-weight: 500;
letter-spacing: -.052em;
}
html[data-type="institution"] :is(.hero h1, .closing h2) em {
font-weight: 400;
}
html[data-type="institution"] :is(.why h2, .coordination h2, .journeys h2, .certainty h2, .method h2, .human h2, .people h2, .voices h2, .faq h2) {
font-family: var(--sans);
font-size: 48px;
font-style: normal;
font-weight: 500;
line-height: 1.03;
letter-spacing: -.038em;
}
html[data-type="institution"] :is(.why h2, .coordination h2, .journeys h2, .certainty h2, .method h2, .human h2, .people h2, .voices h2, .faq h2) em {
font-style: normal;
font-weight: 400;
}
html[data-type="institution"] :is(.client-evidence__number, .client-evidence h2, .testimonial-panel blockquote, .card h3, .card__number, .certainty__fact strong, .journey-visual__copy strong, .human__media-center strong) {
font-family: "IBM Plex Serif", Georgia, serif;
font-weight: 400;
letter-spacing: -.035em;
}
/* ===== Base ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper-light); container-type: inline-size; overflow-x: clip; }
body {
margin: 0;
min-width: 320px;
width: 100cqw;
overflow-x: clip;
color: var(--ink);
background: var(--paper-light);
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
main#top { scroll-margin-top: 73px; }
/* ===== Navigation ===== */
.nav {
height: 73px;
padding: 20px 20px 0;
background: var(--paper-light);
position: relative;
z-index: 20;
}
.nav__inner {
width: var(--shell);
height: 52px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: start;
}
.logo {
justify-self: start;
font-family: var(--sans);
font-size: 17px;
font-weight: 600;
letter-spacing: -.04em;
}
.nav__links {
display: flex;
align-items: center;
gap: 29px;
color: #4e5a60;
font-size: 13px;
}
.nav__links a {
position: relative;
transition: color .5s ease;
}
.nav__links a::after {
content: "";
position: absolute;
right: 0;
bottom: -7px;
left: 0;
height: 1px;
background: var(--signal);
transform: scaleX(0);
transform-origin: right center;
transition: transform .72s var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after,
.nav__links a:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
.nav__end { justify-self: end; display: flex; align-items: center; gap: 16px; }
.nav__language {
font-family: var(--mono);
font-size: 10px;
letter-spacing: .08em;
color: var(--muted);
}
.nav__cta {
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 0 20px;
border-radius: 8px;
background: var(--ink);
color: var(--paper-light);
font-size: 13px;
font-weight: 500;
box-shadow: 0 0 0 rgba(22,42,54,0);
transition: background .5s ease, box-shadow .72s var(--ease-out), transform .72s var(--ease-out);
}
.nav__cta:hover { background: var(--navy-deep); box-shadow: 0 12px 30px rgba(22,42,54,.16); transform: translateY(-2px); }
/* ===== R1 — Hero cinématographique ===== */
.hero {
min-height: 659px;
padding: 20px;
display: flex;
justify-content: center;
background: var(--paper-light);
position: relative;
}
.hero__frame {
width: var(--shell);
height: 619px;
overflow: clip;
border-radius: 24px;
position: relative;
isolation: isolate;
display: grid;
place-items: center;
}
.hero__image {
position: absolute;
inset: 0;
z-index: -3;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 50% 50%;
transform: translateZ(0) scale(var(--hero-scale, 1.04));
will-change: transform;
backface-visibility: hidden;
}
.hero__wash {
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(circle at 50% 35%, rgba(20, 45, 62, .04), rgba(20, 45, 62, .26) 78%),
linear-gradient(180deg, rgba(20, 45, 62, .07), rgba(20, 45, 62, .38));
}
.hero__grain {
position: absolute;
inset: 0;
z-index: -1;
opacity: .08;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
mix-blend-mode: soft-light;
pointer-events: none;
}
.hero__content {
width: 700px;
max-width: calc(100% - 40px);
margin-top: 2px;
display: flex;
flex-direction: column;
align-items: center;
color: var(--paper-light);
text-align: center;
}
.hero__eyebrow {
margin: 0 0 18px;
font-family: var(--mono);
font-size: 11px;
line-height: 1.4;
letter-spacing: .12em;
}
.hero h1 {
width: 660px;
max-width: 100%;
margin: 0;
font-family: var(--serif);
font-size: clamp(58px, 4.72vw, 68px);
line-height: 1.05;
font-weight: 400;
letter-spacing: -.025em;
text-wrap: balance;
}
.hero h1 em { font-weight: 400; }
.hero__lede {
width: 430px;
max-width: 100%;
margin: 20px 0 20px;
font-size: 16px;
line-height: 1.4;
text-wrap: balance;
}
/* ===== Boutons ===== */
.button {
min-height: 44px;
display: inline-grid;
grid-template-columns: 40px auto;
align-items: center;
overflow: hidden;
border-radius: 8px;
background: var(--ink);
color: var(--paper-light);
box-shadow: 0 8px 30px rgba(22, 42, 54, .12);
font-size: 14px;
font-weight: 500;
transform: translateZ(0);
transition: box-shadow .72s var(--ease-out), transform .72s var(--ease-out), background .5s ease;
}
.button__mark {
align-self: stretch;
display: grid;
place-items: center;
background: var(--signal);
color: var(--paper-light);
font-size: 18px;
transition: background .5s ease, transform .72s var(--ease-out);
}
.button__label { padding: 0 18px 0 13px; white-space: nowrap; transition: transform .72s var(--ease-out); }
.button:hover { box-shadow: 0 16px 38px rgba(22,42,54,.19); transform: translateY(-2px); }
.button:hover .button__mark { background: var(--signal-hover); transform: translateX(2px); }
.button:hover .button__label { transform: translateX(1px); }
.button:active { box-shadow: 0 8px 24px rgba(22,42,54,.14); transform: translateY(0) scale(.995); }
/* ===== Confiance (bande de preuve sous le hero) ===== */
.trust {
padding: 40px 20px;
background: var(--paper-light);
overflow: hidden;
}
.trust__inner {
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
text-align: center;
}
.trust__label {
width: 100%;
margin: 0;
color: var(--ink);
font-size: 14px;
line-height: 1.2;
letter-spacing: -.01em;
}
.trust__voices {
width: 860px;
max-width: 100%;
height: 58px;
display: grid;
grid-template-columns: repeat(5, 156px);
justify-content: center;
align-items: center;
gap: 20px;
}
.trust__voice {
width: 156px;
height: 58px;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
color: #899194;
line-height: 1;
transition: color var(--motion-fast) ease, transform var(--motion-base) var(--ease-out);
}
.trust__voice:hover { color: var(--ink); transform: translateY(-2px); }
.trust__voice blockquote {
margin: 0;
white-space: nowrap;
font-size: 15px;
font-weight: 600;
letter-spacing: -.025em;
}
.trust__voice figcaption,
.trust__rating small {
color: #9aa1a3;
font-family: var(--mono);
font-size: 7px;
line-height: 1;
letter-spacing: .06em;
text-transform: uppercase;
}
.trust__rating-line { display: flex; align-items: center; gap: 7px; }
.trust__rating strong { color: #69757a; font-size: 18px; font-weight: 650; letter-spacing: -.04em; }
.trust__stars { color: var(--signal-ink); font-size: 9px; letter-spacing: .02em; }
/* ===== R2 — Difficultés (cartes) ===== */
.why {
min-height: 0;
padding: 112px 20px 100px;
background: var(--paper-light);
overflow: hidden;
}
.why__inner { width: var(--shell); margin: 0 auto; }
.why__head {
display: grid;
grid-template-columns: minmax(0, 860px) minmax(280px, 320px);
justify-content: space-between;
gap: 60px;
align-items: end;
margin-bottom: 70px;
}
.why__title { grid-column: 1; }
.kicker {
margin: 0 0 15px;
color: var(--signal-ink);
font-family: var(--mono);
font-size: 14px;
font-weight: 500;
line-height: 1;
letter-spacing: .06em;
}
.why h2 {
max-width: 860px;
margin: 0;
font-family: var(--serif);
font-size: 52px;
line-height: 1.05;
font-weight: 400;
letter-spacing: -.025em;
}
.why h2 em { color: var(--claret); font-weight: 400; }
html[data-type="institution"] .why h2 em {
display: block;
color: var(--mineral);
font-style: normal;
}
.why .kicker { margin-bottom: 12px; line-height: 14px; }
.why__intro {
grid-column: 2;
margin: 0 0 2px;
color: var(--muted);
font-size: 16px;
line-height: 1.5;
text-wrap: balance;
}
.cards {
height: 420px;
position: relative;
--expanded-card-width: 352px;
--card-clip: 68px;
}
.card {
--card-x: 0px;
position: absolute;
top: -10px;
left: 0;
width: var(--expanded-card-width);
height: 440px;
min-width: 0;
padding: 8px;
border: 1px solid rgba(22, 42, 54, .055);
border-radius: 20px;
overflow: hidden;
background: #ebe7df;
clip-path: inset(0 var(--card-clip) 0 0 round 12px);
transform: translate3d(var(--card-x), 0, 0) scaleY(.955);
transition:
transform .84s var(--ease-glide),
clip-path .84s var(--ease-glide),
background .42s ease,
box-shadow .72s var(--ease-out);
will-change: transform, clip-path;
contain: layout paint style;
}
.card::before {
content: attr(data-axis) " / " attr(data-index);
position: absolute;
z-index: 3;
top: 23px;
right: calc(var(--card-clip) + 20px);
color: rgba(22, 42, 54, .64);
font-family: var(--mono);
font-size: 9px;
font-weight: 500;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
transition: color .3s ease, opacity .3s ease;
}
.card::after {
content: "";
position: absolute;
z-index: 2;
top: 246px;
left: 20px;
right: 20px;
height: 1px;
background: linear-gradient(90deg, var(--claret), rgba(133, 63, 73, .16));
transform-origin: left center;
transition: opacity .3s ease, transform .58s var(--ease-glide);
}
.card:nth-child(1) { --card-x: 0px; }
.card:nth-child(2) { --card-x: 296px; }
.card:nth-child(3) { --card-x: 660px; }
.card:nth-child(4) { --card-x: 956px; }
.card.is-active {
z-index: 2;
background: #fbfaf7;
border-color: rgba(22, 42, 54, .035);
box-shadow: 0 18px 34px rgba(22, 42, 54, .09);
clip-path: inset(0 0 0 0 round 20px);
transform: translate3d(var(--card-x), 0, 0) scaleY(1);
}
.card.is-active::before { right: 20px; color: rgba(248, 246, 241, .86); }
.card.is-active::after { opacity: 0; transform: scaleX(.55); }
.card__trigger {
position: absolute;
z-index: 5;
inset: 0;
width: 100%;
border: 0;
border-radius: inherit;
background: transparent;
cursor: pointer;
}
.card__trigger:focus-visible { outline-offset: -7px; }
.card__number {
position: absolute;
z-index: 3;
top: 21px;
left: 20px;
color: rgba(22, 42, 54, .26);
font-family: var(--serif);
font-size: 52px;
line-height: 1;
transition: opacity .38s ease, transform .72s var(--ease-out);
}
.card__closed-visual {
position: absolute;
z-index: 3;
top: 219px;
left: 20px;
width: 54px;
height: 54px;
display: grid;
place-items: center;
background: #ebe7df;
transition: background .68s ease, transform .88s var(--ease-glide);
}
.card__closed-visual img { width: 42px; height: 42px; opacity: .9; }
.card__body {
position: absolute;
z-index: 3;
left: 20px;
right: 20px;
bottom: 28px;
transform: translateY(-12px);
transition: transform .78s var(--ease-glide);
}
.card__body::before {
content: "";
position: absolute;
top: -15px;
left: 0;
width: 0;
height: 1px;
background: var(--signal-ink);
transition: width .76s var(--ease-glide);
}
.card h3 {
margin: 0;
font-family: var(--serif);
font-size: 31px;
line-height: 1.05;
font-weight: 400;
letter-spacing: -.015em;
transform: scale(.742);
transform-origin: left bottom;
transition: transform .8s var(--ease-glide);
}
.card__description {
margin: 12px 0 0;
overflow: hidden;
color: var(--muted);
font-size: 14px;
line-height: 1.4;
opacity: 0;
transform: translateY(8px);
transition: opacity .42s ease, transform .68s var(--ease-out);
}
.card__media {
position: absolute;
top: 8px;
left: 8px;
right: 8px;
height: 214px;
overflow: hidden;
border-radius: 12px;
opacity: .2;
transform: scale(1.025);
transition: opacity .46s ease .05s, transform .8s var(--ease-out);
}
.card__media > img:first-child {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(.34) contrast(.92) brightness(1.08);
transition: filter .72s ease;
}
.card__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(235,231,223,.1), rgba(235,231,223,.78));
transition: background .68s ease;
}
.card__media-icon {
position: absolute;
z-index: 1;
top: 24px;
left: 22px;
width: 42px;
height: 42px;
opacity: 0;
transform: translateY(6px);
filter: brightness(0) invert(1) drop-shadow(0 8px 18px rgba(22, 42, 54, .16));
transition: opacity .42s ease .14s, transform .72s var(--ease-out);
}
.card.is-active .card__number { opacity: 0; transform: translateY(-8px); }
.card.is-active .card__closed-visual { opacity: 1; background: #fbfaf7; transform: none; }
.card.is-active .card__media { opacity: 1; transform: none; }
.card.is-active .card__media > img:first-child { filter: saturate(.92) contrast(1.02) brightness(.9); }
.card.is-active .card__media::after { background: linear-gradient(145deg, rgba(20,45,62,.02) 30%, rgba(20,45,62,.3)); }
.card.is-active .card__media-icon { opacity: 0; transform: translateY(6px); }
.card.is-active .card__body { left: 28px; right: 28px; transform: none; }
.card.is-active .card__body::before { width: 32px; }
.card.is-active h3 { transform: none; }
.card.is-active .card__description {
opacity: 1;
transform: none;
transition-delay: .11s;
}
/* ===== R3 — Phrase de conviction ===== */
.belief-breath {
min-height: 520px;
padding: 112px 20px;
display: grid;
place-items: center;
background: var(--mist);
overflow: hidden;
}
.belief-breath__inner {
width: var(--shell);
margin: 0 auto;
text-align: center;
}
.belief-breath .kicker { margin-bottom: 28px; }
.belief-breath h2 {
max-width: 1080px;
margin: 0 auto;
font-family: var(--sans);
font-size: clamp(56px, 5.6vw, 78px);
font-weight: 500;
line-height: .99;
letter-spacing: -.052em;
text-wrap: balance;
}
.belief-breath h2 em {
display: block;
color: var(--mineral);
font-style: normal;
font-weight: 400;
}
.belief-breath__support {
max-width: 540px;
margin: 34px auto 0;
color: var(--muted);
font-size: 16px;
line-height: 1.45;
text-wrap: balance;
}
/* ===== R5 — Genèse / preuve de recherche ===== */
.client-evidence {
position: relative;
padding: 112px 20px 104px;
background: #fbfaf7;
overflow: hidden;
isolation: isolate;
}
.client-evidence__paint {
position: absolute;
z-index: -1;
right: -8%;
bottom: -37%;
width: min(900px, 63vw);
height: 650px;
background-position: 52% 50%; background-size: cover; background-repeat: no-repeat; /* background-image : posée par la page */
opacity: .21;
filter: saturate(.76) contrast(.94);
mix-blend-mode: multiply;
mask-image: radial-gradient(ellipse at 62% 58%, #000 0%, rgba(0,0,0,.82) 40%, transparent 75%);
pointer-events: none;
}
.client-evidence__inner {
width: var(--shell);
margin: 0 auto;
padding-top: 66px;
border-top: 1px solid rgba(22, 42, 54, .18);
}
.client-evidence__head { max-width: 1180px; }
.client-evidence__kicker {
margin: 0;
color: var(--signal-ink);
font-family: var(--mono);
font-size: 9px;
font-weight: 500;
line-height: 1;
letter-spacing: .11em;
text-transform: uppercase;
}
html[data-type="institution"] .client-evidence .client-evidence__headline,
.client-evidence .client-evidence__headline {
max-width: 1180px;
margin: 24px 0 0;
font-family: var(--sans);
font-size: 48px;
font-weight: 500;
line-height: 1.03;
letter-spacing: -.038em;
text-wrap: balance;
}
html[data-type="institution"] .client-evidence .client-evidence__headline em,
.client-evidence .client-evidence__headline em {
display: inline;
margin: 0;
color: var(--mineral);
font-style: normal;
font-weight: 400;
}
.client-evidence__mapping {
display: grid;
grid-template-columns: minmax(235px, .58fr) minmax(590px, 1.42fr);
gap: clamp(58px, 8vw, 108px);
align-items: start;
margin-top: 78px;
}
.client-evidence__stat { padding-top: 12px; }
.client-evidence__number {
display: block;
margin: 0;
color: var(--ink);
font-family: var(--sans) !important;
font-size: clamp(160px, 16.4vw, 222px);
font-weight: 500 !important;
line-height: .69;
letter-spacing: -.085em !important;
font-variant-numeric: tabular-nums;
}
.client-evidence__source {
max-width: 225px;
margin: 36px 0 0 8px;
color: #7a8385;
font-family: var(--mono);
font-size: 8px;
line-height: 1.55;
letter-spacing: .08em;
text-transform: uppercase;
}
.client-evidence__ledger { border-top: 1px solid rgba(22, 42, 54, .34); }
.client-evidence__legend,
.client-evidence__row {
display: grid;
grid-template-columns: 1fr 36px 1.23fr;
gap: 14px;
align-items: center;
}
.client-evidence__legend {
padding: 13px 0 15px;
color: var(--muted);
font-family: var(--mono);
font-size: 7px;
letter-spacing: .09em;
text-transform: uppercase;
}
.client-evidence__legend span:last-child { grid-column: 3; }
.client-evidence__row {
min-height: 66px;
border-top: 1px solid rgba(22, 42, 54, .16);
}
.client-evidence__problem {
color: var(--claret);
font-family: "IBM Plex Serif", Georgia, serif;
font-size: 21px;
font-weight: 400;
line-height: 1.05;
}
.client-evidence__arrow { color: var(--signal); font-size: 18px; }
.client-evidence__answer { font-size: 15px; font-weight: 500; line-height: 1.28; }
.client-evidence.is-animated .client-evidence__head,
.client-evidence.is-animated .client-evidence__number,
.client-evidence.is-animated .client-evidence__row {
opacity: 0;
transform: translateY(22px);
}
.client-evidence.is-animated .client-evidence__number {
transform: translateY(30px) scale(.965);
transform-origin: 0 100%;
}
.client-evidence.is-animated.is-inview .client-evidence__head,
.client-evidence.is-animated.is-inview .client-evidence__number,
.client-evidence.is-animated.is-inview .client-evidence__row {
opacity: 1;
transform: none;
transition: opacity .7s ease, transform .95s var(--ease-out);
}
.client-evidence.is-animated.is-inview .client-evidence__number { transition-delay: .12s; }
.client-evidence.is-animated.is-inview .client-evidence__row:nth-child(2) { transition-delay: .22s; }
.client-evidence.is-animated.is-inview .client-evidence__row:nth-child(3) { transition-delay: .30s; }
.client-evidence.is-animated.is-inview .client-evidence__row:nth-child(4) { transition-delay: .38s; }
.client-evidence.is-animated.is-inview .client-evidence__row:nth-child(5) { transition-delay: .46s; }
/* ===== Coordination (onglets + fenêtre du dossier) ===== */
.coordination {
min-height: 899px;
padding: 80px 20px;
background: linear-gradient(118deg, var(--paper) 0%, var(--mist) 100%);
overflow: hidden;
}
.coordination__inner {
width: var(--shell);
min-height: 739px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 40px;
}
.coordination__head {
min-height: 135px;
display: grid;
grid-template-columns: minmax(0, 800px) minmax(280px, 420px);
gap: 20px;
align-items: end;
}
.coordination__title { max-width: 540px; }
.coordination .kicker,
.why .kicker {
margin-bottom: 12px;
font-size: 14px;
line-height: 14px;
}
.coordination h2 {
margin: 0;
font-family: var(--serif);
font-size: 52px;
line-height: 1.05;
font-weight: 400;
letter-spacing: -.025em;
}
.coordination h2 em { color: var(--mineral); font-weight: 400; }
.coordination__intro {
margin: 0 0 2px;
color: var(--muted);
font-size: 16px;
line-height: 1.35;
text-wrap: balance;
}
.coordination__body {
min-height: 564px;
display: grid;
grid-template-columns: minmax(0, 518px) minmax(0, 682px);
gap: 40px;
align-items: stretch;
}
.coordination-tabs {
align-self: center;
border-top: 1px solid rgba(22, 42, 54, .16);
}
.coordination-tab {
width: 100%;
min-height: 84px;
display: grid;
grid-template-columns: 28px minmax(0, 1fr) 20px;
gap: 12px;
align-items: start;
padding: 20px 0;
border: 0;
border-bottom: 1px solid rgba(22, 42, 54, .16);
color: #90989a;
background: transparent;
text-align: left;
cursor: pointer;
transition: color .5s ease, padding .8s var(--ease-out);
}
.coordination-tab:hover,
.coordination-tab.is-active { color: var(--ink); }
.coordination-tab__number {
padding-top: 3px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: .08em;
}
.coordination-tab__title {
display: block;
font-family: var(--serif);
font-size: 24px;
line-height: 1.02;
}
.coordination-tab__copy {
display: block;
max-height: 0;
margin-top: 0;
overflow: hidden;
color: var(--muted);
font-size: 13px;
line-height: 1.4;
opacity: 0;
transform: translateY(-4px);
transition: max-height .9s var(--ease-out), margin .76s var(--ease-out), opacity .56s ease, transform .86s var(--ease-out);
}
.coordination-tab.is-active .coordination-tab__copy {
max-height: 48px;
margin-top: 8px;
opacity: 1;
transform: none;
}
.coordination-tab__mark {
color: var(--signal-ink);
font-family: var(--serif);
font-size: 24px;
line-height: 1;
opacity: 0;
transform: translateX(-5px);
transition: opacity .46s ease, transform .72s var(--ease-out);
}
.coordination-tab.is-active .coordination-tab__mark { opacity: 1; transform: none; }
.coordination-stage {
min-height: 564px;
position: relative;
overflow: hidden;
border-radius: 12px;
background: linear-gradient(135deg, rgba(20,45,62,.12), rgba(39,70,93,.16)); /* la page ajoute sa peinture sous le voile */
isolation: isolate;
}
.coordination-stage::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(140deg, rgba(248,246,241,.05), rgba(20,45,62,.24));
}
.coordination-panel {
position: absolute;
inset: 24px;
display: grid;
place-items: center;
opacity: 0;
transform: translateY(10px);
transition: opacity .82s ease, transform 1.08s var(--ease-glide);
pointer-events: none;
}
.coordination-panel.is-active { z-index: 1; opacity: 1; transform: none; pointer-events: auto; }
.matter-window {
width: min(520px, 100%);
min-height: 390px;
overflow: hidden;
border: 1px solid rgba(22,42,54,.11);
border-radius: 13px;
background: rgba(251,248,240,.94);
box-shadow: 0 28px 70px rgba(22,42,54,.16);
backdrop-filter: blur(12px);
}
.matter-window__bar {
height: 44px;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(22,42,54,.1);
font-family: var(--mono);
font-size: 9px;
letter-spacing: .07em;
text-transform: uppercase;
}
.matter-window__bar span:last-child { color: var(--signal-ink); }
.matter-window__body { padding: 26px; }
.matter-window__eyebrow {
margin: 0 0 8px;
color: var(--signal-ink);
font-family: var(--mono);
font-size: 9px;
letter-spacing: .08em;
text-transform: uppercase;
}
.matter-window h3 {
max-width: 360px;
margin: 0;
font-family: var(--serif);
font-size: 34px;
line-height: 1.02;
font-weight: 400;
letter-spacing: -.02em;
}
.matter-route {
margin-top: 34px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
position: relative;
}
.matter-route::before {
content: "";
position: absolute;
top: 8px;
left: 8%;
right: 8%;
height: 1px;
background: linear-gradient(90deg, var(--claret), rgba(133,63,73,.18));
}
.matter-route__step { position: relative; z-index: 1; }
.matter-route__dot {
width: 17px;
height: 17px;
display: block;
margin-bottom: 15px;
border: 1px solid var(--claret);
border-radius: 50%;
background: var(--paper-light);
}
.matter-route__step:first-child .matter-route__dot,
.coordination-panel[data-coordination-panel="coordinate"] .matter-route__step:nth-child(-n+2) .matter-route__dot,
.coordination-panel[data-coordination-panel="review"] .matter-route__step:nth-child(-n+3) .matter-route__dot,
.coordination-panel[data-coordination-panel="current"] .matter-route__step .matter-route__dot { background: var(--signal); }
.matter-route__step strong { display: block; font-size: 11px; font-weight: 500; }
.matter-route__step small { display: block; max-width: 92px; margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.matter-window__note {
margin: 26px 0 0;
padding-top: 18px;
border-top: 1px solid rgba(22,42,54,.1);
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
/* ===== R4 — Situations (personas) ===== */
.journeys {
padding: 92px 20px;
background: #f2eee7;
}
.journeys__inner,
.certainty__inner,
.method__inner,
.human__inner,
.faq__inner,
.site-footer__inner { width: var(--shell); margin: 0 auto; }
.journeys__head {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(300px, .55fr);
gap: 120px;
align-items: end;
}
.journeys__title .kicker { margin-bottom: 12px; }
.journeys h2,
.method h2,
.human h2,
.faq h2,
.closing h2 {
margin: 0;
font-family: var(--serif);
font-weight: 400;
letter-spacing: -.028em;
}
.journeys h2 { max-width: 720px; font-size: 52px; line-height: 1.05; }
.journeys h2 em,
.method h2 em { color: var(--mineral); font-weight: 400; }
.human h2 em,
.closing h2 em { color: var(--claret); font-weight: 400; }
.journeys__intro {
margin: 0 0 7px;
color: var(--muted);
font-size: 16px;
line-height: 1.5;
}
.journeys__layout {
margin-top: 52px;
display: grid;
grid-template-columns: minmax(340px, 430px) minmax(0, 1fr);
gap: clamp(70px, 9vw, 125px);
align-items: center;
}
.journey-tabs { border-top: 1px solid rgba(22, 42, 54, .18); }
.journey-tab {
width: 100%;
display: grid;
grid-template-columns: 34px minmax(0, 1fr) 18px;
gap: 6px;
align-items: center;
padding: 20px 0;
border: 0;
border-bottom: 1px solid rgba(22, 42, 54, .18);
color: #90989a;
background: transparent;
text-align: left;
cursor: pointer;
transition: color .58s ease, padding 1.02s var(--ease-glide);
}
.journey-tab__number {
padding-top: 3px;
color: currentColor;
font-family: var(--mono);
font-size: 9px;
letter-spacing: .08em;
}
.journey-tab__title {
display: block;
font-family: var(--serif);
font-size: 24px;
line-height: 1.08;
letter-spacing: -.015em;
}
.journey-tab__copy {
display: block;
max-width: 360px;
max-height: 0;
margin: 0;
overflow: hidden;
color: var(--muted);
font-size: 14px;
line-height: 1.48;
opacity: 0;
transform: translateY(-5px);
transition: max-height 1.08s var(--ease-out), margin .9s var(--ease-out), opacity .62s ease, transform .96s var(--ease-out);
}
.journey-tab__mark {
padding-top: 1px;
color: var(--signal-ink);
font-family: var(--serif);
font-size: 26px;
line-height: 1;
opacity: 0;
transform: translateX(-6px);
transition: opacity .58s ease, transform .92s var(--ease-out);
}
.journey-tab:hover,
.journey-tab.is-active { color: var(--ink); }
.journey-tab.is-active { padding: 30px 0; }
.journey-tab.is-active .journey-tab__copy {
max-height: 100px;
margin-top: 12px;
opacity: 1;
transform: none;
}
.journey-tab.is-active .journey-tab__mark { opacity: 1; transform: none; }
.journey-tab:active { color: var(--ink); }
.journey-stage {
height: clamp(470px, 40vw, 540px);
position: relative;
overflow: hidden;
border-radius: 24px;
background: var(--mist);
isolation: isolate;
}
.journey-visual {
position: absolute;
inset: 0;
opacity: 0;
transform: translateZ(0) scale(1.025);
transition: opacity .76s ease, transform var(--motion-scene) var(--ease-glide);
pointer-events: none;
}
.journey-visual.is-active { z-index: 1; opacity: 1; transform: translateZ(0) scale(1); }
.journey-visual > img:first-child {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
filter: saturate(.94) contrast(1.02) brightness(.86);
}
.journey-visual[data-route="business"] > img:first-child { object-position: 48% 42%; }
.journey-visual[data-route="property"] > img:first-child { object-position: 58% 52%; }
.journey-visual[data-route="resident"] > img:first-child { object-position: 62% 33%; }
.journey-visual[data-route="mover"] > img:first-child { object-position: 56% 48%; }
.journey-visual[data-route="europe"] > img:first-child { object-position: 52% 40%; }
.journey-visual::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(20,45,62,.03) 18%, rgba(20,45,62,.64));
}
.journey-visual[data-route="property"]::after { background: linear-gradient(180deg, rgba(22,42,54,.02), rgba(22,42,54,.4)); }
.journey-visual[data-route="resident"]::after { background: linear-gradient(160deg, rgba(133,63,73,.04), rgba(22,42,54,.55)); }
.journey-visual__symbol {
position: absolute;
z-index: 2;
top: 31px;
right: 32px;
width: 44px;
height: 44px;
padding: 0;
filter: drop-shadow(0 8px 16px rgba(22, 42, 54, .14));
}
.journey-visual__copy {
position: absolute;
z-index: 2;
left: 36px;
right: 36px;
bottom: 34px;
display: grid;
grid-template-columns: minmax(0, 1fr) 196px;
gap: 50px;
align-items: end;
color: var(--paper-light);
}
.journey-visual__copy small {
display: block;
margin-bottom: 12px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: .1em;
text-transform: uppercase;
}
.journey-visual__copy strong {
display: block;
max-width: 500px;
font-family: var(--serif);
font-size: 37px;
line-height: .98;
font-weight: 400;
}
.journey-visual__copy p { margin: 0; font-size: 13px; line-height: 1.45; }
.journey-visual__copy p span {
display: block;
margin-bottom: 7px;
color: var(--signal-soft);
font-family: var(--mono);
font-size: 8px;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
}
.journey-visual--urgent .journey-visual__correction {
position: absolute;
z-index: 2;
top: 52px;
left: 46px;
width: 112px;
opacity: .72;
}
/* ===== Respiration ===== */
.route-breath {
min-height: 440px;
padding: 108px 20px;
display: grid;
place-items: center;
background: #fbfaf7;
text-align: center;
}
html[data-type] .route-breath p {
max-width: 1120px;
margin: 0;
color: var(--ink);
font-family: var(--sans);
font-size: clamp(58px, 7vw, 94px);
font-weight: 500;
line-height: .98;
letter-spacing: -.06em;
text-wrap: balance;
}
html[data-type] .route-breath em {
display: block;
color: var(--mineral);
font-style: normal;
font-weight: 400;
}
/* ===== Clarté commerciale ===== */
.certainty {
padding: 80px 20px;
background: var(--paper-light);
}
.certainty h2 {
max-width: 760px;
margin: 0;
font-family: var(--serif);
font-size: 52px;
line-height: 1.05;
font-weight: 400;
letter-spacing: -.035em;
}
.certainty h2 em { color: var(--mineral); font-weight: 400; }
.certainty__facts {
margin-top: 60px;
display: grid;
grid-template-columns: 1.15fr repeat(3, 1fr);
border-top: 1px solid rgba(22, 42, 54, .2);
}
.certainty__lead,
.certainty__fact { min-height: 170px; padding: 24px 26px 0 0; }
.certainty__lead {
color: var(--muted);
font-size: 14px;
line-height: 1.5;
}
.certainty__lead p { max-width: 240px; margin: 0; }
.certainty__fact {
padding-left: 26px;
border-left: 1px solid rgba(22, 42, 54, .16);
}
.certainty__fact span {
display: block;
margin-bottom: 48px;
color: var(--signal-ink);
font-family: var(--mono);
font-size: 9px;
letter-spacing: .08em;
}
.certainty__fact strong {
display: block;
margin-bottom: 9px;
font-family: var(--serif);
font-size: 25px;
line-height: 1;
font-weight: 400;
}
.certainty__fact p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
/* ===== Expérience (vidéo) ===== */
.method {
padding: 80px 20px;
background: var(--paper-light);
}
.method__head { max-width: 850px; margin: 0 auto; text-align: center; }
.method h2 { font-size: 52px; line-height: 1.05; }
.method__video-frame {
height: 690px;
margin-top: 40px;
position: relative;
overflow: hidden;
border-radius: 24px;
color: var(--paper-light);
background: var(--navy-deep);
box-shadow: 0 28px 90px rgba(20, 45, 62, .14);
isolation: isolate;
}
.method__video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: 50% 52%;
filter: saturate(.94) contrast(1.03) brightness(.86);
transform: translateZ(0) scale(1.01);
}
.method__video-frame::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(20,45,62,.06) 44%, rgba(20,45,62,.56) 100%);
pointer-events: none;
}
.method__video-meta {
position: absolute;
z-index: 2;
right: 32px;
bottom: 28px;
left: 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: .09em;
text-transform: uppercase;
pointer-events: none;
}
.method__video-meta span:last-child { color: rgba(248,246,241,.66); }
.method__video-control {
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
width: 76px;
height: 76px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid rgba(255,255,255,.56);
border-radius: 50%;
color: var(--paper-light);
background: rgba(20,45,62,.12);
backdrop-filter: blur(10px);
cursor: pointer;
transform: translate(-50%, -50%);
transition: background .52s ease, border-color .52s ease, box-shadow .72s var(--ease-out), transform .72s var(--ease-out), opacity .45s ease;
}
.method__video-control:hover { border-color: rgba(255,255,255,.86); background: rgba(20,45,62,.3); box-shadow: 0 16px 42px rgba(7,20,29,.2); transform: translate(-50%, -50%) scale(1.045); }
.method__video-control:active { box-shadow: 0 8px 24px rgba(7,20,29,.16); transform: translate(-50%, -50%) scale(.985); }
.method__video-control span { font-size: 16px; transform: translateX(1px); }
.method__video-frame.is-playing .method__video-control {
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) scale(.94);
}
/* ===== R6 — Chapitre humain (avocat nommé) ===== */
.human {
padding: 80px 20px;
background: linear-gradient(118deg, var(--mist) 0%, var(--paper-light) 72%);
}
.human__inner {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
gap: clamp(70px, 9vw, 130px);
align-items: center;
}
.human__media {
min-height: 500px;
position: relative;
overflow: hidden;
border-radius: 22px;
background: var(--navy-deep);
color: var(--paper-light);
isolation: isolate;
}
.human__media::before {
content: "";
position: absolute;
z-index: -2;
inset: -12%;
background-position: 52% 44%; background-size: cover; background-repeat: no-repeat; /* background-image : posée par la page */
filter: saturate(.78) contrast(1.04) brightness(.58);
opacity: .72;
}
.human__media::after {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: radial-gradient(circle at 68% 30%, rgba(185,90,83,.14), transparent 38%), linear-gradient(140deg, rgba(20,45,62,.08), rgba(20,45,62,.8));
}
.human__media-copy {
position: absolute;
inset: 0;
padding: 38px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.human__media-meta {
display: flex;
justify-content: space-between;
gap: 20px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: .08em;
text-transform: uppercase;
}
.human__media-center { align-self: center; text-align: center; }
.human__play {
width: 66px;
height: 66px;
margin: 0 auto 18px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.55);
border-radius: 50%;
background: rgba(251,248,240,.08);
backdrop-filter: blur(9px);
font-size: 17px;
}
.human__media-center strong { display: block; font-family: var(--serif); font-size: 30px; font-weight: 400; }
.human__media-center span { display: block; margin-top: 8px; color: var(--sage-light); font-size: 12px; }
.human__production-note { max-width: 320px; color: var(--sage-light); font-size: 11px; line-height: 1.45; }
.human h2 { font-size: 52px; line-height: 1.05; }
.human__copy > p:not(.kicker) { max-width: 480px; margin: 27px 0 50px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.human__facts { border-top: 1px solid rgba(22,42,54,.18); }
.human__fact {
min-height: 66px;
display: grid;
grid-template-columns: 95px 1fr;
gap: 18px;
align-items: center;
border-bottom: 1px solid rgba(22,42,54,.18);
}
.human__fact span { color: var(--signal-ink); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.human__fact strong { font-size: 14px; font-weight: 500; }
/* ===== Équipe ===== */
.people {
padding: 16px 0 64px;
color: var(--paper-light);
background: var(--editorial-black);
}
.people__frame {
width: calc(100vw - clamp(32px, 6vw, 120px));
aspect-ratio: 1600 / 684;
margin: 0 auto;
position: relative;
overflow: hidden;
border-radius: 24px;
background: #d5d3cf;
isolation: isolate;
}
.people__portrait {
position: absolute;
z-index: 0;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: saturate(.9) contrast(1.01);
transform: scale(1.003);
transition: transform 1.2s var(--ease-glide), filter .7s ease;
}
.people__frame:hover .people__portrait { filter: saturate(.96) contrast(1.01); transform: scale(1.01); }
.people__frame::after {
content: "";
position: absolute;
z-index: 1;
inset: 0;
background: linear-gradient(90deg, rgba(15,17,17,.1) 0%, transparent 52%);
}
.people__copy {
width: 48%;
height: 100%;
padding: 6% 0 0 6%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
position: absolute;
z-index: 2;
inset: 0 auto 0 0;
}
.people h2 {
max-width: 480px;
margin: 0;
font-family: "IBM Plex Serif", Georgia, serif;
font-size: clamp(38px, 2.35vw, 47px);
font-weight: 400;
line-height: 1;
letter-spacing: -.03em;
text-wrap: balance;
min-height: 0 !important;
}
.people__copy > p {
max-width: 455px;
margin: 27px 0 0;
color: rgba(248,246,241,.9);
font-size: 15px;
font-weight: 500;
line-height: 1.5;
min-height: 0 !important;
}
.people__cta {
min-height: 44px;
margin-top: 24px;
padding: 0 20px;
display: inline-flex;
align-items: center;
border-radius: 8px;
color: #fff;
background: var(--signal);
font-size: 13px;
font-weight: 500;
transition: background var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out);
}
.people__cta:hover { background: var(--signal-hover); transform: translateY(-1px); }
html[data-type="institution"] .people h2 { font-family: "IBM Plex Serif", Georgia, serif; font-weight: 400; letter-spacing: -.03em; }
/* ===== Point de vue (podcast, articles) ===== */
.voices {
padding: 96px 20px 104px;
color: #f4f2ed;
background: var(--editorial-black);
overflow: hidden;
}
.voices__inner {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.voices__head {
margin-bottom: 34px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(310px, 410px);
gap: 72px;
align-items: end;
}
.voices .kicker { color: var(--signal-soft); }
.voices h2 { margin: 0; font-size: 45px; line-height: 1; }
.voices__intro {
margin: 0 0 2px;
color: rgba(244,242,237,.74);
font-size: 15px;
line-height: 1.5;
}
.voices__filters {
margin-bottom: 22px;
display: flex;
gap: 34px;
align-items: center;
color: rgba(244,242,237,.56);
font-size: 12px;
}
.voices__filters span:first-child { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.voices__grid {
display: grid;
grid-template-columns: minmax(360px, .92fr) minmax(0, 1.28fr);
gap: 16px;
align-items: start;
}
.episode-card { min-width: 0; margin: 0; }
.episode-card__media {
min-height: 0;
aspect-ratio: 1 / 1;
position: relative;
overflow: hidden;
border-radius: 22px;
background: #342319;
isolation: isolate;
}
.episode-card__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 42%, rgba(16,17,17,.08) 60%, rgba(16,17,17,.72) 100%);
}
.episode-card__portrait {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
object-fit: cover;
object-position: 50% 18%;
filter: saturate(.78) contrast(1.04);
transform: scale(1.01);
transition: transform 1.1s var(--ease-glide), filter .7s ease;
}
.episode-card:hover .episode-card__portrait { filter: saturate(.9) contrast(1.02); transform: scale(1.024); }
.editorial-tag {
position: absolute;
z-index: 2;
left: 0;
bottom: 0;
min-height: 25px;
padding: 0 10px;
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 0 7px 0 0;
color: var(--editorial-black);
background: var(--signal);
font-size: 10px;
font-weight: 600;
line-height: 1;
}
.editorial-tag::before { content: "◉"; font-size: 7px; }
.episode-card h3 {
margin: 16px 0 0;
font-size: 18px;
font-weight: 500;
line-height: 1.22;
letter-spacing: -.025em;
}
.episode-card__meta,
.editorial-card__meta {
margin-top: 24px;
display: flex;
justify-content: space-between;
gap: 15px;
color: rgba(244,242,237,.62);
font-size: 10px;
line-height: 1.3;
}
.voices__articles {
min-width: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px 12px;
}
.editorial-card { min-width: 0; margin: 0; transition: transform .72s var(--ease-out); }
.editorial-card__media {
height: auto;
aspect-ratio: 6 / 5;
position: relative;
overflow: hidden;
border-radius: 12px;
background: #26363c;
}
.editorial-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(.74) contrast(1.03);
transform: scale(1.01);
transition: transform .9s var(--ease-glide), filter .6s ease;
}
.editorial-card:hover { transform: translateY(-3px); }
.editorial-card:hover .editorial-card__media img { filter: saturate(.9) contrast(1.02); transform: scale(1.032); }
.episode-card h3,
.editorial-card h3 { transition: color .5s ease, transform .72s var(--ease-out); }
.episode-card:hover h3,
.editorial-card:hover h3 { color: var(--signal-soft); transform: translateX(2px); }
.editorial-card--portrait .editorial-card__media img { object-position: 50% 20%; }
.editorial-card--studio .editorial-card__media img { object-position: 50% 47%; }
.editorial-card h3 {
margin: 13px 0 0;
font-size: 14px;
font-weight: 500;
line-height: 1.3;
letter-spacing: -.012em;
}
.editorial-card__meta { margin-top: 15px; font-size: 9px; }
.editorial-card__meta span:first-child { min-width: 0; overflow-wrap: anywhere; }
.voices__principle {
margin-top: 46px;
padding-top: 22px;
display: grid;
grid-template-columns: repeat(2, 1fr);
border-top: 1px solid rgba(244,242,237,.2);
}
.voices__principle div {
display: grid;
grid-template-columns: 94px 1fr;
gap: 22px;
align-items: start;
}
.voices__principle div + div { padding-left: 30px; border-left: 1px solid rgba(244,242,237,.2); }
.voices__principle span { color: var(--signal-soft); font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.voices__principle strong {
min-width: 0;
max-width: 420px;
overflow-wrap: anywhere;
font-size: 13px;
font-weight: 500;
line-height: 1.45;
}
.testimonial-stage { padding: 0 20px 100px; background: #fbfaf7; }
/* ===== R7 — Témoignage institutionnel ===== */
.testimonial-stage__frame {
width: var(--shell);
min-height: 800px;
margin: 0 auto;
position: relative;
color: #181919;
background: #fbfaf7;
}
.testimonial-stage__inner {
min-height: 605px;
padding: 82px 110px 54px;
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 1px solid #ddd8cf;
}
.testimonial-stage__quote-mark {
color: #ddd7ca;
font-family: "IBM Plex Serif", Georgia, serif;
font-size: 60px;
line-height: .7;
}
.testimonial-stage__label {
margin: 17px 0 0;
color: #716e68;
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
line-height: 1.2;
letter-spacing: .14em;
text-transform: uppercase;
}
.testimonial-stage__panels {
width: 100%;
min-height: 350px;
margin-top: 23px;
position: relative;
}
.testimonial-panel {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transform: translate3d(0, 10px, 0);
transition: opacity var(--motion-base) ease, transform var(--motion-slow) var(--ease-glide);
pointer-events: none;
}
.testimonial-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.testimonial-panel blockquote {
max-width: 1080px;
margin: 0;
font-family: "IBM Plex Serif", Georgia, serif;
font-size: clamp(37px, 4vw, 53px);
font-weight: 400;
line-height: 1.13;
letter-spacing: -.033em;
text-align: center;
text-wrap: balance;
}
.testimonial-panel figcaption {
margin-top: 34px;
display: grid;
grid-template-columns: 42px auto 1px auto;
gap: 14px;
align-items: center;
font-family: var(--sans);
text-align: left;
}
.testimonial-panel__avatar {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--paper-light);
background: var(--navy-deep);
font-family: var(--mono);
font-size: 8px;
letter-spacing: .04em;
}
.testimonial-panel__divider { width: 1px; height: 38px; background: #ddd8cf; }
.testimonial-panel__matter { color: var(--signal-ink); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.testimonial-panel figcaption strong { display: block; font-size: 12px; font-weight: 600; }
.testimonial-panel figcaption small { display: block; margin-top: 3px; color: #77736d; font-size: 10px; line-height: 1.35; }
.testimonial-stage__footer { position: absolute; inset: 0; pointer-events: none; }
.testimonial-control {
position: absolute;
top: 295px;
padding: 0;
border: 0;
color: #cfc9bd;
background: transparent;
cursor: pointer;
pointer-events: auto;
font-family: "IBM Plex Serif", Georgia, serif;
font-size: 38px;
line-height: 1;
transition: color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out);
}
.testimonial-control:first-child { left: 20px; }
.testimonial-control:last-child { right: 20px; }
.testimonial-control:hover { color: var(--ink); transform: translateX(var(--arrow-x, 0)); }
.testimonial-control:first-child:hover { --arrow-x: -3px; }
.testimonial-control:last-child:hover { --arrow-x: 3px; }
.testimonial-control:focus-visible { outline: 2px solid var(--signal); outline-offset: 5px; }
.testimonial-dots { display: flex; justify-content: center; gap: 18px; }
.testimonial-dot {
width: 7px;
height: 7px;
padding: 0;
border: 0;
border-radius: 50%;
background: #d8d2c6;
cursor: pointer;
transition: background .25s ease, transform .3s var(--ease-out);
}
.testimonial-dot.is-active { background: var(--signal-ink); transform: scale(1.12); }
.press-proof { min-height: 195px; padding: 42px 54px 35px; }
/* ===== Presse ===== */
.press-proof__heading {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 28px;
align-items: center;
color: #77736d;
font-family: var(--mono);
font-size: 8px;
line-height: 1.35;
letter-spacing: .15em;
text-align: center;
text-transform: uppercase;
}
.press-proof__heading::before,
.press-proof__heading::after { content: ""; height: 1px; background: #ddd8cf; }
.press-proof__logos {
margin-top: 36px;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 32px;
align-items: center;
}
.press-proof__logos img {
width: 100%;
height: 31px;
object-fit: contain;
opacity: .57;
filter: grayscale(1) contrast(.95);
transition: opacity .28s ease, transform .4s var(--ease-out);
}
.press-proof__logos img:hover { opacity: .92; transform: translateY(-1px); }
/* ===== FAQ ===== */
.faq {
padding: 80px 20px;
background: var(--paper-light);
}
.faq__inner {
display: grid;
grid-template-columns: 410px minmax(0, 600px);
justify-content: space-between;
gap: 90px;
}
.faq h2 { font-size: 52px; line-height: 1.05; }
.faq__aside > p:not(.kicker) { margin: 27px 0 20px; color: var(--muted); font-size: 15px; }
.faq__list { display: grid; gap: 8px; }
.faq-item {
overflow: hidden;
border-radius: 12px;
background: #eef0ee;
transition: background .52s ease, transform .72s var(--ease-out);
}
.faq-item:hover { transform: translateX(3px); }
.faq-item.is-open { background: #e6ebea; }
.faq-question {
width: 100%;
min-height: 64px;
display: grid;
grid-template-columns: 1fr 24px;
gap: 20px;
align-items: center;
padding: 18px 20px;
border: 0;
color: var(--ink);
background: transparent;
text-align: left;
cursor: pointer;
font-size: 18px;
line-height: 1.25;
}
.faq-question__mark { color: var(--signal-ink); font-family: var(--serif); font-size: 26px; line-height: 1; transition: transform .35s var(--ease-out); }
.faq-item.is-open .faq-question__mark { transform: rotate(45deg); }
.faq-answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .72s var(--ease-glide);
}
.faq-answer > div { min-height: 0; overflow: hidden; }
.faq-answer p { margin: 0; padding: 0 58px 20px 20px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq__mark {
width: 150px;
margin: 98px 0 0 62px;
opacity: .62;
transform: rotate(-4deg);
}
/* ===== R8 — Conversion finale ===== */
.closing {
padding: 20px;
background: var(--paper-light);
}
.closing__frame {
width: var(--shell);
min-height: 560px;
margin: 0 auto;
padding: 50px 30px;
position: relative;
overflow: hidden;
border-radius: 24px;
display: grid;
place-items: center;
color: var(--paper-light);
background: var(--navy-deep);
text-align: center;
isolation: isolate;
}
.closing__frame::before {
content: "";
position: absolute;
z-index: -2;
inset: -6%;
background-position: 50% 52%; background-size: cover; background-repeat: no-repeat; /* background-image : posée par la page */
filter: saturate(.82) contrast(1.04) brightness(.62);
transform: scale(1.07);
}
.closing__frame::after {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: linear-gradient(180deg, rgba(20,45,62,.18), rgba(20,45,62,.7));
}
.closing__content { max-width: 780px; position: relative; z-index: 1; }
.closing h2 { font-size: 52px; line-height: 1.05; }
.closing h2 em { color: #efaaa2; }
.closing .kicker { color: var(--signal-soft); }
.closing__content > p:not(.kicker) { max-width: 510px; margin: 27px auto 28px; color: var(--sage-light); font-size: 15px; line-height: 1.5; }
.closing .button { background: var(--paper-light); color: var(--ink); }
/* ===== Pied de page ===== */
.site-footer {
padding: 60px 20px 34px;
background: var(--paper-light);
}
.site-footer__top {
padding-bottom: 70px;
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: 36px;
}
.site-footer__brand strong { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.035em; }
.site-footer__brand p { max-width: 300px; margin: 18px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.site-footer__column span {
display: block;
margin-bottom: 16px;
color: var(--signal-ink);
font-family: var(--mono);
font-size: 9px;
letter-spacing: .09em;
text-transform: uppercase;
}
.site-footer__column a,
.site-footer__column p { display: block; margin: 0 0 9px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.site-footer__column a {
width: fit-content;
position: relative;
transition: color .48s ease, transform .68s var(--ease-out);
}
.site-footer__column a::after {
content: "";
position: absolute;
right: 0;
bottom: -2px;
left: 0;
height: 1px;
background: var(--signal);
transform: scaleX(0);
transform-origin: right center;
transition: transform .68s var(--ease-out);
}
.site-footer__column a:hover,
.site-footer__column a:focus-visible { color: var(--ink); transform: translateX(2px); }
.site-footer__column a:hover::after,
.site-footer__column a:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
.site-footer__meta {
padding-top: 22px;
display: flex;
justify-content: space-between;
border-top: 1px solid rgba(22, 42, 54, .16);
color: var(--muted);
font-family: var(--mono);
font-size: 10px;
letter-spacing: .06em;
}
/* ===== Mouvement — reveals (mots, citations, lettres) ===== */
.reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity .9s ease, transform 1.14s var(--ease-out);
will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.is-settled { will-change: auto; }
[data-word-reveal] .word-reveal__word {
display: inline-block;
opacity: 0;
filter: blur(3px);
transform: translateY(.22em);
transition: opacity .96s ease, filter 1.12s ease, transform 1.12s var(--ease-out);
transition-delay: calc(var(--word-index) * 78ms);
will-change: opacity, filter, transform;
}
[data-word-reveal].is-word-visible .word-reveal__word {
opacity: 1;
filter: blur(0);
transform: none;
}
[data-word-reveal].is-word-settled .word-reveal__word { will-change: auto; }
[data-quote-reveal] .quote-reveal__word {
display: inline-block;
opacity: 0;
filter: blur(3px);
transform: translateY(.22em);
transition: opacity .96s ease, filter 1.12s ease, transform 1.12s var(--ease-out);
transition-delay: calc(var(--quote-word-index) * 78ms);
will-change: opacity, filter, transform;
}
[data-quote-reveal].is-quote-visible .quote-reveal__word {
opacity: 1;
filter: blur(0);
transform: none;
}
[data-quote-reveal].is-quote-settled .quote-reveal__word { will-change: auto; }
[data-letter-reveal] .letter-reveal__char {
--letter-reveal-ink: var(--ink);
display: inline-block;
color: transparent;
background-image: linear-gradient(90deg, var(--letter-reveal-ink) 0%, var(--letter-reveal-ink) 38%, transparent 58%, transparent 100%);
background-position: 100% 0;
background-size: 260% 100%;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
filter: blur(1.6px);
transform: translateY(.08em);
transition: background-position .86s var(--ease-glide), filter .86s ease, transform .86s var(--ease-out);
transition-delay: calc(var(--letter-index) * 26ms);
will-change: background-position, filter, transform;
}
[data-letter-reveal] em .letter-reveal__char { --letter-reveal-ink: var(--mineral); }
[data-letter-reveal].is-letter-visible .letter-reveal__char {
background-position: 0 0;
filter: blur(0);
transform: none;
}
[data-letter-reveal].is-letter-settled .letter-reveal__char { will-change: auto; }
/* ===== Responsive ===== */
@media (max-width: 900px) {
:root { --shell: calc(100cqw - 32px); }
html[data-type="institution"] :is(.why h2, .coordination h2, .journeys h2, .certainty h2, .method h2, .human h2, .people h2, .voices h2, .faq h2) {
font-size: 34px;
line-height: 1.03;
letter-spacing: -.038em;
}
.nav {
position: absolute;
inset: 0 0 auto;
height: 72px;
padding: 16px 16px 0;
background: transparent;
}
.nav__inner { height: 44px; color: var(--ink); grid-template-columns: 1fr auto; }
.nav__links, .nav__language { display: none; }
.nav__cta { min-height: 38px; padding: 0 14px; background: rgba(20,45,62,.76); backdrop-filter: blur(8px); }
.hero { min-height: 706px; padding: 100px 16px 20px; }
.hero__frame { width: 100%; height: 586px; border-radius: 18px; }
.hero__image {
inset: 0;
width: 100%;
height: 100%;
object-position: 58% 50%;
transform: scale(var(--hero-scale, 1.08));
}
.hero__content { width: 100%; max-width: none; padding: 0 20px; margin-top: 10px; }
.hero__eyebrow { margin-bottom: 15px; }
.hero h1 { width: 100%; font-size: 44px; line-height: 1.05; }
.hero__lede { width: 303px; margin: 18px 0 20px; font-size: 15px; line-height: 1.28; }
.trust { padding: 40px 16px; }
.trust__voices {
width: 100%;
display: flex;
justify-content: flex-start;
gap: 10px;
overflow: hidden;
}
.trust__voice { flex: 0 0 156px; }
.why { min-height: 0; padding: 80px 16px; }
.why__head { display: block; margin-bottom: 42px; }
.kicker { margin-bottom: 12px; font-size: 14px; line-height: 14px; }
html[data-type="institution"] .why h2 { font-size: 36px; line-height: 1.02; letter-spacing: -.04em; }
.why__intro { width: 100%; margin-top: 24px; font-size: 15px; line-height: 1.45; }
.cards { height: auto; display: grid; gap: 20px; }
.card,
.card.is-active {
position: relative;
inset: auto;
width: 100%;
height: 378px;
padding: 8px;
border-radius: 12px;
background: #fff;
box-shadow: none;
clip-path: none;
transform: none;
}
.card::before,
.card.is-active::before { top: 22px; right: 20px; color: rgba(248, 246, 241, .82); }
.card::after { display: none; }
.card__trigger { display: none; }
.card__number, .card__closed-visual { display: none; }
.card__media,
.card.is-active .card__media {
height: 210px;
opacity: 1;
transform: none;
}
.card__media > img:first-child,
.card.is-active .card__media > img:first-child { filter: saturate(.92) contrast(1.02) brightness(.9); }
.card__media::after,
.card.is-active .card__media::after { background: linear-gradient(145deg, rgba(20,45,62,.02) 30%, rgba(20,45,62,.3)); }
.card__media-icon,
.card.is-active .card__media-icon { opacity: .9; transform: none; }
.card__body,
.card.is-active .card__body { left: 28px; right: 28px; bottom: 24px; transform: none; }
.card__body::before,
.card.is-active .card__body::before { width: 32px; }
.card h3,
.card.is-active h3 { font-size: 29px; transform: none; }
.card__description,
.card.is-active .card__description { top: 45px; opacity: 1; transform: none; }
.belief-breath { min-height: 430px; padding: 86px 16px; }
.belief-breath__inner { width: 100%; }
.belief-breath .kicker { margin-bottom: 22px; }
.belief-breath h2 { max-width: 390px; font-size: clamp(42px, 11vw, 54px); line-height: 1; }
.belief-breath__support { max-width: 330px; margin-top: 28px; font-size: 15px; }
.client-evidence { padding: 80px 16px 72px; }
.client-evidence__paint { right: -210px; bottom: -40px; width: 520px; height: 440px; opacity: .15; }
.client-evidence__inner { width: 100%; padding-top: 50px; }
.client-evidence .client-evidence__headline { max-width: 360px; margin-top: 20px; font-size: 36px; line-height: 1.02; }
.client-evidence__mapping { display: block; margin-top: 54px; }
.client-evidence__stat { padding-top: 0; }
.client-evidence__number { font-size: clamp(132px, 40vw, 168px); line-height: .7; }
.client-evidence__source { max-width: 250px; margin: 29px 0 0 4px; font-size: 8px; }
.client-evidence__ledger { margin-top: 48px; }
.client-evidence__legend,
.client-evidence__row { grid-template-columns: .9fr 24px 1.1fr; gap: 10px; }
.client-evidence__row { min-height: 76px; }
.client-evidence__problem { font-size: 17px; }
.client-evidence__answer { font-size: 13px; }
.coordination { min-height: 0; padding: 40px 16px; }
.coordination__inner { width: 100%; min-height: 0; gap: 20px; }
.coordination__head { min-height: 0; display: block; }
.coordination__title { max-width: none; }
.coordination h2 { font-size: 32px; line-height: 1.05; }
.coordination__intro { margin-top: 20px; font-size: 16px; line-height: 1.2; }
.coordination__body { min-height: 0; display: flex; flex-direction: column; gap: 20px; }
.coordination-tabs { width: 100%; order: 2; }
.coordination-tab { min-height: 76px; padding: 18px 0; }
.coordination-tab__title { font-size: 22px; }
.coordination-stage { width: 100%; min-height: 440px; order: 1; }
.coordination-panel { inset: 14px; }
.matter-window { min-height: 388px; }
.matter-window__body { padding: 22px 18px; }
.matter-window h3 { font-size: 28px; }
.matter-route { margin-top: 28px; gap: 6px; }
.matter-route__step small { font-size: 8px; }
.matter-window__note { margin-top: 20px; }
.journeys { padding: 84px 16px; }
.journeys__head { display: block; }
.journeys h2 { font-size: 32px; }
.journeys__intro { margin-top: 26px; font-size: 15px; }
.journeys__layout { margin-top: 44px; display: block; }
.journey-tab { grid-template-columns: 27px minmax(0,1fr) 18px; padding: 17px 0; }
.journey-tab.is-active { padding: 24px 0; }
.journey-tab__title { font-size: 22px; }
.journey-stage { height: 420px; margin-top: 32px; border-radius: 18px; }
.journey-visual__symbol { top: 24px; right: 24px; width: 38px; height: 38px; }
.journey-visual__copy { left: 24px; right: 24px; bottom: 24px; display: block; }
.journey-visual__copy strong { max-width: 300px; font-size: 33px; }
.journey-visual__copy p { max-width: 270px; margin-top: 13px; }
.journey-visual--urgent .journey-visual__correction { top: 42px; left: 28px; width: 92px; }
.route-breath { min-height: 330px; padding: 82px 16px; }
html[data-type] .route-breath p { max-width: 380px; font-size: clamp(42px, 11.2vw, 54px); line-height: 1; }
.certainty { padding: 80px 16px; }
.certainty h2 { font-size: 32px; }
.certainty__facts { margin-top: 48px; grid-template-columns: 1fr; }
.certainty__lead,
.certainty__fact { min-height: 0; padding: 22px 0 24px; }
.certainty__fact { border-left: 0; border-top: 1px solid rgba(22,42,54,.16); }
.certainty__fact span { margin-bottom: 23px; }
.method { padding: 80px 16px; }
.method__head { text-align: left; }
.method h2 { font-size: 32px; }
.method__video-frame { height: 480px; margin-top: 40px; border-radius: 18px; }
.method__video { object-position: 54% 50%; }
.method__video-control { width: 64px; height: 64px; }
.method__video-meta { right: 20px; bottom: 20px; left: 20px; font-size: 8px; }
.human { padding: 80px 16px; }
.human__inner { grid-template-columns: 1fr; gap: 52px; }
.human__media { min-height: 450px; border-radius: 18px; }
.human__media-copy { padding: 26px; }
.human h2 { font-size: 32px; }
.human__copy > p:not(.kicker) { margin: 23px 0 37px; font-size: 15px; }
.human__fact { grid-template-columns: 86px 1fr; }
.people { padding: 16px; }
.people__frame { width: 100%; min-height: 690px; aspect-ratio: auto; border-radius: 18px; }
.people__portrait { inset: auto 0 0; width: 100%; height: 47%; object-position: 69% 50%; }
.people__frame::after {
background:
linear-gradient(180deg, #0f1111 0%, #0f1111 48%, rgba(15,17,17,.94) 57%, rgba(15,17,17,.08) 84%),
linear-gradient(0deg, rgba(15,17,17,.48), transparent 30%);
}
.people__copy { width: 100%; height: 100%; padding: 42px 22px 26px; justify-content: flex-start; }
.people h2 { max-width: 340px; font-size: 36px; }
.people__copy > p:not(.kicker) { max-width: 330px; margin-top: 21px; font-size: 15px; }
.people__copy br { display: none; }
.people__cta { margin-top: 26px; }
.voices { padding: 72px 16px 80px; }
.voices__head { display: block; margin-bottom: 30px; }
.voices h2 { font-size: 36px; }
.voices__intro { margin-top: 20px; font-size: 13px; }
.voices__filters { margin: 0 -16px 24px; padding: 0 16px 5px; gap: 25px; overflow-x: auto; white-space: nowrap; }
.voices__grid { grid-template-columns: 1fr; gap: 38px; }
.episode-card__media { min-height: 0; aspect-ratio: 1 / 1.12; border-radius: 18px; }
.episode-card h3 { font-size: 20px; }
.voices__articles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
.editorial-card__media { height: auto; aspect-ratio: 6 / 5; border-radius: 10px; }
.editorial-card h3 { font-size: 14px; }
.voices__principle { grid-template-columns: 1fr; }
.voices__principle div { grid-template-columns: 78px 1fr; padding: 16px 0; }
.voices__principle div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(244,242,237,.2); }
.testimonial-stage { padding: 0 16px 72px; }
.testimonial-stage__frame { width: 100%; min-height: 760px; }
.testimonial-stage__inner { min-height: 565px; padding: 70px 32px 42px; }
.testimonial-stage__quote-mark { font-size: 52px; }
.testimonial-stage__panels { min-height: 365px; margin-top: 18px; }
.testimonial-panel blockquote { font-size: clamp(29px, 8.3vw, 37px); line-height: 1.08; }
.testimonial-panel figcaption { margin-top: 30px; grid-template-columns: 38px auto; gap: 11px; }
.testimonial-panel__avatar { width: 38px; height: 38px; }
.testimonial-panel__divider,
.testimonial-panel__matter { display: none; }
.testimonial-control { top: 283px; font-size: 32px; }
.testimonial-control:first-child { left: 2px; }
.testimonial-control:last-child { right: 2px; }
.press-proof { min-height: 195px; padding: 34px 18px; }
.press-proof__heading { grid-template-columns: 1fr; gap: 0; }
.press-proof__heading::before,
.press-proof__heading::after { display: none; }
.press-proof__logos { margin-top: 28px; grid-template-columns: repeat(3, 1fr); gap: 24px 20px; }
.press-proof__logos img { height: 23px; }
.press-proof__logos img:last-child { grid-column: 2; }
.faq { padding: 80px 16px; }
.faq__inner { grid-template-columns: 1fr; gap: 46px; }
.faq h2 { font-size: 32px; }
.faq__mark { display: none; }
.faq-question { padding: 18px 20px; font-size: 17px; }
.faq-answer p { padding: 0 52px 21px 20px; }
.closing { padding: 16px; }
.closing__frame { width: 100%; min-height: 570px; padding: 42px 22px; border-radius: 18px; }
.closing h2 { font-size: 44px; }
.closing__content > p:not(.kicker) { font-size: 14px; }
.site-footer { padding: 56px 16px 28px; }
.site-footer__top { padding-bottom: 50px; grid-template-columns: 1fr 1fr; gap: 38px 26px; }
.site-footer__brand { grid-column: 1 / -1; }
.site-footer__meta { display: block; line-height: 1.7; }
.site-footer__meta span:last-child { display: block; }
}
/* ===== Accessibilité — mouvement réduit ===== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
.reveal { opacity: 1; transform: none; }
[data-word-reveal] .word-reveal__word { opacity: 1; filter: none; transform: none; }
[data-quote-reveal] .quote-reveal__word { opacity: 1; filter: none; transform: none; }
[data-letter-reveal] .letter-reveal__char {
color: inherit;
background: none;
filter: none;
transform: none;
}
.hero__image { transform: translateZ(0) scale(1.04); }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
.hero__image { transform: translateZ(0) scale(1.08); }
}