';
inherits:false;
initial-value:0%;
}
#hero .watermark{
position:absolute;right:-9%;top:50%;
transform:translateY(calc(-50% + var(--wm-parallax,0px))) rotate(var(--wm-rotate,0deg));
width:54vw;max-width:880px;opacity:0;pointer-events:none;
filter:blur(0.3px);
--swan-reveal:0%;
-webkit-mask-image:radial-gradient(circle at 46% 76%, #000 0%, #000 var(--swan-reveal), transparent calc(var(--swan-reveal) + 16%));
mask-image:radial-gradient(circle at 46% 76%, #000 0%, #000 var(--swan-reveal), transparent calc(var(--swan-reveal) + 16%));
animation:swan-opacity-in 4.6s ease-out .5s forwards, swan-reveal-in 4.2s cubic-bezier(.3,.6,.25,1) .6s forwards;
}
@keyframes swan-opacity-in{0%{opacity:0;}45%{opacity:0.08;}100%{opacity:0.03;}}
@keyframes swan-reveal-in{to{--swan-reveal:100%;}}
#hero-content{position:relative;z-index:2;max-width:760px;}
#hero .eyebrow{margin-bottom:26px;color:var(--vert-pale);}
#hero h1{
font-size:clamp(2.4rem,5.2vw,4.4rem);color:var(--blanc);
line-height:1.12;font-weight:600;margin-bottom:28px;
letter-spacing:0.005em;
}
#hero p.sub{
font-size:clamp(1.02rem,1.4vw,1.22rem);color:rgba(255,255,255,0.82);
max-width:560px;margin-bottom:44px;font-style:italic;
}
#hero .cta-row{display:flex;gap:20px;flex-wrap:wrap;}
/* ---------- HERO ENTRANCE ---------- */
#hero .eyebrow{
opacity:0;
animation:hero-rise .9s cubic-bezier(.16,1,.3,1) .15s forwards;
}
@keyframes hero-rise{
from{opacity:0;transform:translateY(22px) scale(.985);filter:blur(6px);}
to{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
}
/* Hero h1: typed letter-by-letter via JS. Each line is a block so the forced
line break stays exactly after the comma on desktop; chars start invisible
and toggle .in as the "typing" progresses. */
#hero h1 .h1-line{display:block;}
@media (min-width:901px){
#hero h1 .h1-line{white-space:nowrap;}
}
#hero h1 .h1-word{display:inline-block;}
#hero h1 .ch{display:inline-block;opacity:0;transition:opacity .15s linear;}
#hero h1 .ch.in{opacity:1;}
#hero h1 .type-cursor{
display:inline-block;width:3px;height:0.8em;margin-left:3px;
background:var(--blanc);vertical-align:-0.05em;opacity:0;
}
#hero h1 .type-cursor.on{opacity:1;animation:cursor-blink .85s steps(1,end) infinite;}
@keyframes cursor-blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
#hero p.sub,#hero .cta-row{
opacity:0;transform:translateY(22px) scale(.985);filter:blur(6px);
transition:opacity 1.4s cubic-bezier(.16,1,.3,1), transform 1.4s cubic-bezier(.16,1,.3,1), filter 1.4s cubic-bezier(.16,1,.3,1);
}
#hero p.sub.hero-in,#hero .cta-row.hero-in{opacity:1;transform:none;filter:none;}
@media (prefers-reduced-motion: reduce){
#hero .eyebrow{animation:none;opacity:1;filter:none;transform:none;}
#hero p.sub,#hero .cta-row{transition:none;opacity:1;transform:none;filter:none;}
#hero h1 .ch{transition:none;}
#hero .watermark{animation:none;opacity:0.03;-webkit-mask-image:none;mask-image:none;}
}
/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:.12s;}
.reveal-delay-2{transition-delay:.24s;}
.reveal-delay-3{transition-delay:.36s;}
/* ---------- REFRAME ---------- */
#reframe{background:var(--pale-tint);position:relative;z-index:1;padding-top:min(7.4vw,104px);padding-bottom:min(7.4vw,104px);}
#reframe .head{max-width:640px;margin-bottom:36px;position:relative;z-index:3;}
#reframe .head h2{font-size:clamp(1.9rem,3vw,2.6rem);margin-top:12px;}
.swan-feature{
display:grid;grid-template-columns:0.55fr 1.2fr;gap:min(6vw,72px);align-items:center;
}
.swan-photo{position:relative;}
.swan-photo img{width:100%;height:auto;display:block;}
.swan-content{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;}
.swan-lede{
font-family:var(--serif-labeur);font-size:clamp(.98rem,1.3vw,1.08rem);
color:#2a2a2a;margin-bottom:16px;text-wrap:pretty;
}
.swan-closing{position:relative;margin-top:6px;}
.swan-emblem{position:absolute;left:0;top:0;width:auto;height:100%;opacity:0.9;pointer-events:none;}
.swan-body{
font-family:var(--serif-labeur);font-size:clamp(.98rem,1.3vw,1.08rem);
color:#2a2a2a;margin-bottom:0;text-wrap:pretty;
margin-left:clamp(78px,10vw,132px);
border-left:1px solid var(--filet);padding-left:22px;
}
.swan-principles{display:flex;flex-direction:column;margin-bottom:20px;margin-top:6px;}
.swan-principle{
display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:baseline;
padding:17px 0;
}
.swan-principle + .swan-principle{border-top:1px solid var(--filet);}
.swan-principle span{
align-self:center;width:7px;height:7px;border-radius:50%;
background:var(--vert-pale);justify-self:center;
}
.swan-principle p{
font-family:var(--serif-display);font-style:italic;font-weight:600;
font-size:clamp(1.04rem,1.5vw,1.2rem);color:var(--vert-lcb);line-height:1.35;
}
/* ---------- APPROCHE ---------- */
#approche{position:relative;}
#approche .head{max-width:1180px;margin:0 auto 8px;text-align:center;}
#approche .head h2{font-size:clamp(1.8rem,2.8vw,2.5rem);margin:14px auto 24px;max-width:900px;}
#approche .head p{font-size:1.08rem;color:#333;max-width:900px;margin:0 auto;text-wrap:pretty;}
.chip-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:26px;}
.chip-row span{
font-family:var(--sans-caps);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
border:1px solid var(--vert-pale);padding:11px 20px;border-radius:100px;
color:var(--vert-lcb);background:var(--blanc);
transition:background-color .3s ease, border-color .3s ease, color .3s ease;
}
.chip-row span:hover{background:var(--noir-encre);border-color:var(--noir-encre);color:var(--blanc);}
/* ---------- APPROCHE BOARD (bandeau façon écran boursier) ---------- */
.approche-board{
position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
margin-top:10px;padding:90px 0 100px;overflow:hidden;background:var(--blanc);
}
.ticker-row{position:relative;z-index:2;overflow:hidden;}
.ticker-row.row-a{background:var(--vert-lcb);transform:rotate(-1.15deg);margin:0 0 -8px;box-shadow:0 12px 28px rgba(2,54,49,0.18);}
.ticker-row.row-b{background:var(--noir-encre);transform:rotate(1.15deg);margin:30px 0;box-shadow:0 12px 28px rgba(0,0,0,0.16);}
.ticker-row.row-c{background:var(--vert-signature);transform:rotate(-1.15deg);margin:-8px 0 0;box-shadow:0 12px 28px rgba(2,54,49,0.14);}
.ticker-track{display:flex;width:max-content;white-space:nowrap;}
.ticker-track.dir-left{animation:ticker-scroll 36s linear infinite;}
.ticker-track.dir-right{animation:ticker-scroll 36s linear infinite reverse;}
.ticker-set{display:flex;align-items:center;flex-shrink:0;padding:26px 0;}
.ticker-item{
font-family:var(--serif-display);font-size:18px;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;
color:var(--blanc);padding:0 8px;flex-shrink:0;
}
.ticker-dot{color:var(--vert-pale);padding:0 26px;flex-shrink:0;font-size:11px;}
@keyframes ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.ticker-track{animation:none;}}
/* ---------- METHODE ---------- */
#methode{
--halo-y:42%;
background:radial-gradient(ellipse 75% 65% at 50% var(--halo-y), #067064 0%, #04473f 30%, #011c18 62%, #000403 100%);
color:var(--blanc);position:relative;overflow:hidden;
}
#methode .methode-watermark{
position:absolute;right:0;top:0;bottom:0;width:110px;
display:flex;align-items:center;justify-content:center;
pointer-events:none;user-select:none;z-index:1;overflow:hidden;
}
#methode .methode-watermark span{
display:inline-block;white-space:nowrap;transform:rotate(-90deg);
font-family:var(--serif-display);font-style:italic;font-weight:600;
font-size:clamp(66px,6vw,96px);letter-spacing:0.02em;line-height:1;
color:rgba(255,255,255,0.055);
}
#methode .head h2{color:var(--blanc);font-size:clamp(1.8rem,2.8vw,2.5rem);margin:14px 0 16px;max-width:780px;}
#methode .head p{color:rgba(255,255,255,0.72);max-width:720px;font-size:1.05rem;}
.method-track{margin-top:130px;position:relative;}
.circle-lane{position:relative;height:238px;margin-bottom:0;}
.method-curve{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1;}
.method-curve .curve-track{fill:none;stroke:rgba(255,255,255,0.28);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1,8;}
.curve-fill-wrap{clip-path:inset(0 100% 0 0);}
.method-curve .curve-fill{fill:none;stroke:var(--vert-pale);stroke-width:2;stroke-linecap:round;stroke-dasharray:2,9;}
.circle-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);height:100%;}
.circle-slot{display:flex;justify-content:center;}
.circle-slot.slot-a{align-items:flex-start;padding-top:8px;}
.circle-slot.slot-b{align-items:flex-start;padding-top:160px;}
.circle-slot .circle{
width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,0.5);
display:flex;align-items:center;justify-content:center;font-family:var(--serif-display);
font-size:1.35rem;font-style:italic;background:var(--vert-lcb);
position:relative;z-index:2;flex-shrink:0;cursor:default;
opacity:0;transform:scale(.6);
transition:opacity .6s ease, transform .6s cubic-bezier(.3,1.4,.5,1), background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.circle-slot .circle span{
/* Optical centering: the italic numerals' ink sits ~1.5px left of the true
geometric center of the circle (measured), so nudge it back visually. */
display:inline-block;transform:translateX(1.5px);
}
.circle-slot .circle.circle-in{opacity:1;transform:scale(1);}
.circle-slot:first-child .circle{background:var(--vert-pale);color:var(--vert-lcb);border-color:var(--vert-pale);}
.circle-slot .circle.circle-in.step-hover{
transform:scale(1.14);
background:var(--vert-pale);color:var(--vert-lcb);border-color:var(--vert-pale);
box-shadow:0 0 0 10px rgba(167,205,194,0.14), 0 0 30px rgba(167,205,194,0.4);
}
.method-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;position:relative;z-index:2;}
@media (min-width:901px){
/* .method-steps overlaps .circle-lane vertically (interleaved layout below), so its
grid cells must not swallow hover/pointer events over the circles beneath the
empty parts of each cell: only the actual rendered text is a hit target. */
.method-steps{pointer-events:none;}
.method-step .step-text{pointer-events:auto;}
}
@media (min-width:901px){
/* Same column track definition as .circle-grid (repeat(4,1fr), no column-gap) so a
given step's text column always shares the exact horizontal center of its circle,
at any container width. Every text block is a fixed width (matching step 1's
original width) and centered in its column, so the numbers and their text never
drift apart on resize. */
.method-steps{margin-top:-228px;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:0;}
.method-step{width:230px;max-width:100%;margin-left:auto;margin-right:auto;}
.method-step:nth-child(odd){margin-top:138px;}
.method-step:nth-child(even){margin-top:-58px;}
}
.method-step{display:flex;flex-direction:column;align-items:center;cursor:default;}
.method-step .step-num-mobile{display:none;}
.method-step .step-text{
text-align:center;
opacity:0;transform:translateY(14px);
transition:opacity .7s ease, transform .7s ease;
}
.method-step .step-text.text-in{opacity:1;transform:translateY(0);}
.method-step h4{
font-family:var(--serif-display);font-weight:600;font-size:1.12rem;margin-bottom:12px;color:var(--blanc);
transition:color .35s ease, transform .35s ease;
}
.method-step p{transition:color .35s ease;}
.method-step.step-hover .step-text{transform:translateY(-4px);}
.method-step.step-hover h4{color:var(--vert-pale);}
.method-step.step-hover p{color:rgba(255,255,255,0.88);}
.method-step p{font-size:.92rem;color:rgba(255,255,255,0.68);}
/* ---------- ENGAGEMENT ---------- */
#engagement{
background:var(--noir-encre);
color:var(--blanc);text-align:center;position:relative;overflow:hidden;
}
#engagement .section-inner{position:relative;z-index:2;}
#engagement blockquote{
font-family:var(--serif-display);font-style:italic;font-weight:500;
font-size:clamp(1.6rem,4vw,2.9rem);line-height:1.35;color:var(--blanc);max-width:900px;margin:0 auto 26px;
}
#engagement .sub{color:var(--vert-pale);font-size:1.05rem;font-family:var(--serif-labeur);margin:0 auto 52px;max-width:640px;}
#engagement .eyebrow{margin-bottom:18px;}
.promise-row{
display:flex;justify-content:center;gap:min(6vw,64px);flex-wrap:wrap;
text-align:center;margin-top:12px;
}
.promise-item{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:280px;flex:1 1 240px;}
.promise-item .promise-icon{
width:56px;height:56px;border-radius:50%;flex-shrink:0;margin-bottom:6px;
display:flex;align-items:center;justify-content:center;color:var(--vert-pale);
border:1px solid rgba(255,255,255,0.28);
transition:border-color .3s ease, background-color .3s ease;
}
.promise-item .promise-icon svg{width:23px;height:23px;}
.promise-item .promise-label{
font-family:var(--sans-caps);font-weight:600;font-size:clamp(1.05rem,1.8vw,1.3rem);
letter-spacing:0.08em;text-transform:uppercase;color:var(--blanc);
}
.promise-item:hover .promise-icon{border-color:var(--vert-pale);background:rgba(167,205,194,0.1);}
.promise-item h4{
font-family:var(--serif-display);font-style:italic;font-weight:500;font-size:1rem;color:var(--vert-pale);margin:0;
}
.promise-item p{
font-family:var(--serif-labeur);font-size:.9rem;line-height:1.6;color:rgba(255,255,255,0.62);margin:0;
}
/* ---------- A PROPOS ---------- */
#apropos{padding:0;display:grid;grid-template-columns:0.85fr 1.15fr;}
#apropos .portrait-panel{
background:radial-gradient(ellipse 90% 80% at 30% 30%, #067064 0%, #04473f 32%, #011c18 66%, #000403 100%);
min-height:640px;position:relative;display:flex;align-items:flex-end;padding:50px;overflow:hidden;
}
#apropos .portrait-panel img.portrait-photo{
position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;object-position:50% 22%;
}
#apropos .portrait-panel::after{
content:'';position:absolute;inset:0;
background:linear-gradient(0deg, rgba(0,4,3,0.82) 0%, rgba(0,4,3,0.08) 30%, transparent 52%);
}
#apropos .bio-panel{padding:min(9vw,110px) min(6vw,90px);display:flex;flex-direction:column;justify-content:center;}
#apropos .bio-panel .eyebrow{margin-bottom:20px;}
#apropos .bio-panel .name-row{display:flex;align-items:baseline;gap:16px;margin-bottom:20px;}
#apropos .bio-panel h2{font-size:clamp(1.9rem,3vw,2.6rem);line-height:1;margin:0;}
#apropos .bio-panel .name-row .linkedin{align-self:flex-end;transform:translateY(3px);}
#apropos .bio-panel .role{font-family:var(--sans-caps);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gris-fonction);margin-bottom:30px;}
#apropos .bio-panel p{font-size:1.06rem;color:#2a2a2a;max-width:660px;margin-bottom:18px;}
#apropos .bio-panel .linkedin{
width:34px;height:34px;border-radius:50%;border:1px solid var(--filet);flex-shrink:0;
display:flex;align-items:center;justify-content:center;color:var(--vert-lcb);
transition:all .25s ease;
}
#apropos .bio-panel .linkedin svg{width:16px;height:16px;fill:currentColor;}
#apropos .bio-panel .linkedin:hover{background:var(--vert-lcb);color:var(--blanc);border-color:var(--vert-lcb);}
#apropos .bio-panel .credentials{
display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:28px;row-gap:22px;
margin-top:34px;max-width:660px;
}
#apropos .bio-panel .cred-item{
display:flex;flex-direction:column;gap:6px;padding-left:16px;border-left:1px solid var(--vert-lcb);
}
#apropos .bio-panel .cred-item .cred-label{
font-family:var(--sans-caps);font-size:11px;letter-spacing:0.09em;color:var(--vert-lcb);
}
#apropos .bio-panel .cred-item .cred-value{
display:inline-flex;align-items:center;
}
#apropos .bio-panel .cred-item .cred-logo img{
height:22px;width:auto;display:block;
filter:brightness(0) invert(40%);
transition:filter .4s ease;
}
#apropos .bio-panel .cred-item .cred-logo img.logo-amf{height:17px;margin-top:5px;}
#apropos .bio-panel .cred-item .cred-logo img.logo-inovea{height:16px;margin-top:6px;}
#apropos .bio-panel .cred-item .cred-logo img.logo-orias{height:27px;}
#apropos .bio-panel .cred-item .cred-logo img.logo-cncef{height:21px;}
#apropos .bio-panel .cred-item .cred-logo:hover img{
filter:brightness(1) invert(0%);
}
/* ---------- PARTENAIRES ---------- */
#partenaires{
position:relative;text-align:center;color:var(--blanc);overflow:hidden;
background:#000 url('../img/partenaires-bg.jpg') center center/cover no-repeat;
}
#partenaires .section-inner{position:relative;z-index:2;}
#partenaires .head{margin-bottom:56px;}
#partenaires .head h2{font-size:clamp(1.8rem,2.8vw,2.3rem);margin:14px 0 16px;color:var(--blanc);}
#partenaires .head p{font-size:1.05rem;color:rgba(255,255,255,0.75);max-width:660px;margin:0 auto;text-wrap:pretty;}
.partner-strip{
display:flex;align-items:center;flex-wrap:wrap;justify-content:center;
gap:40px 52px;max-width:1180px;margin:0 auto;
}
.partner-strip img{
width:auto;object-fit:contain;
opacity:0;transform:translateY(12px);
transition:opacity .55s ease, transform .55s ease;
}
.partner-strip img.in{opacity:0.6;transform:translateY(0);}
.partner-strip img:hover{opacity:1;}
#partenaires .note{margin-top:46px;font-size:.85rem;color:rgba(255,255,255,0.55);font-style:italic;}
/* ---------- FAQ / CONTACT ---------- */
#contact{background:var(--blanc);position:relative;overflow:hidden;}
#contact .faq-emblem{
position:absolute;left:-250px;top:240px;z-index:0;pointer-events:none;
height:clamp(480px,68vh,680px);width:auto;aspect-ratio:174/227;opacity:0.9;
}
#contact .section-inner{position:relative;z-index:1;}
#contact .head{max-width:720px;margin-bottom:50px;}
#contact .head h2{font-size:clamp(1.9rem,3vw,2.6rem);margin-top:14px;}
.faq-list{max-width:840px;margin:0 auto;}
.faq-item{
border-bottom:1px solid var(--filet);
opacity:0;transform:translateY(18px);
transition:opacity .6s ease, transform .6s ease;
}
.faq-item:first-child{border-top:1px solid var(--filet);}
.faq-item.in{opacity:1;transform:translateY(0);}
.faq-q{
width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;
padding:26px 2px;background:none;border:none;cursor:pointer;text-align:left;
font-family:var(--serif-display);font-size:1.12rem;color:var(--vert-lcb);font-weight:600;
}
.faq-icon{
font-family:var(--sans-caps);font-size:1.4rem;font-weight:300;color:var(--vert-pale);
transition:transform .35s ease;flex-shrink:0;line-height:1;
}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s ease;}
.faq-a p{padding:0 2px 26px;font-size:1rem;color:#333;line-height:1.75;max-width:760px;}
.faq-closing{
text-align:center;margin-top:70px;padding-top:56px;border-top:1px solid var(--filet);
}
.faq-closing p{font-family:var(--serif-display);font-style:italic;color:var(--vert-lcb);font-size:1.2rem;margin-bottom:30px;max-width:600px;margin-left:auto;margin-right:auto;}
.faq-closing .cta-row{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;}
/* ---------- FOOTER ---------- */
footer{
background-color:var(--noir-encre);
background-image:url('../img/footer-bg.jpg');
background-position:center center;
background-size:cover;
background-repeat:no-repeat;
color:rgba(255,255,255,0.6);padding:0 8vw;position:relative;overflow:hidden;
}
footer::before{
content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background:
radial-gradient(65% 85% at 0% 0%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 72%),
radial-gradient(65% 85% at 100% 0%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 72%),
radial-gradient(65% 85% at 0% 100%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 72%),
radial-gradient(65% 85% at 100% 100%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 72%),
linear-gradient(180deg, rgba(11,11,11,0.78) 0%, rgba(11,11,11,0.84) 55%, rgba(11,11,11,0.92) 100%);
}
footer .foot-inner{position:relative;z-index:2;padding:90px 0 0;}
footer .foot-top{
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:40px;row-gap:40px;
padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,0.08);
}
footer .foot-col{display:flex;flex-direction:column;gap:22px;}
footer .foot-logo{align-items:center;justify-content:center;}
footer .foot-logo img{
height:190px;opacity:0;transition:opacity .8s ease;
}
footer .foot-logo img.in{opacity:1;}
footer .foot-orias{align-items:flex-start;text-align:left;max-width:360px;gap:10px;}
footer .foot-orias .foot-brand-title{
font-family:var(--serif-display);font-size:1.5rem;font-weight:600;font-style:italic;
letter-spacing:0.01em;color:var(--blanc);
}
footer .foot-orias p{font-size:.9rem;line-height:1.6;color:rgba(255,255,255,0.65);margin:0;}
footer .foot-orias .btn{margin-top:14px;}
footer .foot-orias a{color:rgba(255,255,255,0.85);}
footer .foot-orias a:hover{color:#055e54;}
footer .foot-sitemap{align-items:flex-end;text-align:right;max-width:360px;margin-left:auto;}
footer .foot-sitemap-title{
font-family:var(--sans-caps);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.4);
}
footer .foot-sitemap nav{display:flex;flex-direction:column;gap:11px;}
footer .foot-sitemap nav a{color:rgba(255,255,255,0.75);font-size:.92rem;}
footer .foot-sitemap nav a:hover{color:#055e54;}
footer .legal-row{
padding:26px 0 30px;
display:flex;justify-content:center;text-align:center;align-items:center;flex-wrap:wrap;gap:14px;
font-size:.78rem;color:rgba(255,255,255,0.4);
}
footer .legal-row a{color:rgba(255,255,255,0.55);transition:color .25s ease;}
footer .legal-row a:hover{color:#055e54;}
footer .legal-row .legal-sep{color:rgba(255,255,255,0.22);}
footer .foot-links-inline{display:flex;gap:8px;flex-wrap:wrap;}
/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
#nav-links{display:none;}
#nav-toggle{display:block;}
#hero .watermark{display:none;}
#methode .methode-watermark{display:none;}
#hero .cta-row{flex-direction:column;align-items:stretch;}
#hero .cta-row .btn{white-space:normal;text-align:center;justify-content:center;}
#contact .faq-emblem{display:none;}
.approche-board{padding:56px 0;}
.ticker-row{transform:none;margin:0;}
.method-steps{grid-template-columns:repeat(2,1fr);row-gap:44px;}
.circle-lane{display:none;}
.method-step .step-text{opacity:1;transform:none;}
.method-step .step-num-mobile{
display:inline-flex;width:44px;height:44px;border-radius:50%;
border:1px solid rgba(255,255,255,0.5);align-items:center;justify-content:center;
font-family:var(--serif-display);font-style:italic;font-size:1.05rem;margin-bottom:16px;
}
.method-step:first-child .step-num-mobile{background:var(--vert-pale);color:var(--vert-lcb);border-color:var(--vert-pale);}
#apropos{grid-template-columns:1fr;}
#apropos .portrait-panel{min-height:420px;}
.swan-feature{grid-template-columns:1fr;gap:32px;}
.swan-photo{max-width:300px;margin:0 auto;width:100%;}
footer .foot-top{grid-template-columns:1fr;text-align:center;}
footer .foot-orias{align-items:center;text-align:center;max-width:100%;margin:0 auto;}
footer .foot-sitemap{align-items:center;text-align:center;max-width:100%;margin:0 auto;}
footer .foot-logo{order:-1;}
}
/* Below ~1000px the swan-feature columns are too narrow for the emblem to grow to the
paragraph's full (height-matched) width without overlapping the text -- fall back to
a small fixed-width emblem instead, on both sides of the 900px stack breakpoint. */
@media (max-width:1000px){
.swan-closing{display:flex;align-items:flex-start;gap:16px;}
.swan-emblem{position:static;width:clamp(40px,10vw,52px);height:auto;}
.swan-body{margin-left:0;padding-left:16px;}
}
@media (max-width:560px){
.method-steps{grid-template-columns:1fr;}
.section{padding:90px 7vw;}
}
/* ==================================================================
1.0.2 - Durcissement contre le CSS global BeTheme (v2, plus specifique)
================================================================== */
/* La v1.0.1 (font-size sur html + !important sur les selecteurs de la
maquette) n'a pas suffi : verifie dans Betheme > Theme Options > Fonts >
Family, les champs Content / Lead paragraph / Main Menu / Page Title /
Big Headings sont regles sur "Poppins". Ces reglages sont regeneres par
Betheme dans un CSS mis en cache (bandeau "Cache fonts local"), qui n'est
pas charge via un handle enregistre : il echappe donc a la desinscription
de functions.php, et peut s'imprimer apres notre CSS avec une specificite
au moins egale a la notre, ce qui lui fait gagner le conflit meme avec
!important des deux cotes (a specificite egale, c'est la regle la plus
tardive qui gagne).
La page d'accueil est maintenant enveloppee dans (voir
template-accueil.php). Un selecteur d'ID a une specificite tres elevee,
rarement egalee par des reglages globaux de theme : on double l'ID pour
prendre une marge de securite supplementaire. */
html{font-size:100% !important;}
#lcb-page#lcb-page h1,
#lcb-page#lcb-page h2,
#lcb-page#lcb-page h3{font-family:var(--serif-display) !important;}
#lcb-page#lcb-page #hero h1{font-size:clamp(2.4rem,5.2vw,4.4rem) !important;}
#lcb-page#lcb-page #reframe .head h2,
#lcb-page#lcb-page #apropos .bio-panel h2,
#lcb-page#lcb-page #contact .head h2{font-size:clamp(1.9rem,3vw,2.6rem) !important;}
#lcb-page#lcb-page #methode .head h2,
#lcb-page#lcb-page #approche .head h2{font-size:clamp(1.8rem,2.8vw,2.5rem) !important;}
#lcb-page#lcb-page #partenaires .head h2{font-size:clamp(1.8rem,2.8vw,2.3rem) !important;}
/* Les 3 principes du bloc "Le Cygne Blanc Patrimoine" : serif italique
semi-gras, comme dans la maquette. */
#lcb-page#lcb-page .swan-principle p{
font-family:var(--serif-display) !important;
font-style:italic !important;
font-weight:600 !important;
font-size:clamp(1.04rem,1.5vw,1.2rem) !important;
}
/* Filigrane "Le Cygne Blanc" du bloc La methode : meme police italique
semi-gras que dans la maquette. Une fois la bonne police retablie, le JS
de recalage (fitMethodeWatermark) mesure a nouveau la bonne largeur et le
filigrane revient contre le bord. */
#lcb-page#lcb-page .methode-watermark span{
font-family:var(--serif-display) !important;
font-style:italic !important;
font-weight:600 !important;
}
/* Les 4 etapes de la methode. */
#lcb-page#lcb-page .method-step h4{font-size:1.12rem !important;font-family:var(--serif-display) !important;}
#lcb-page#lcb-page .method-step p{font-size:.92rem !important;}
/* Les 3 items du bloc La promesse. */
#lcb-page#lcb-page .promise-item .promise-label{font-size:clamp(1.05rem,1.8vw,1.3rem) !important;}
#lcb-page#lcb-page .promise-item h4{font-size:1rem !important;font-family:var(--serif-display) !important;font-style:italic !important;}
#lcb-page#lcb-page .promise-item p{font-size:.9rem !important;}
/* Questions de la FAQ. */
#lcb-page#lcb-page .faq-q{font-size:1.12rem !important;font-family:var(--serif-display) !important;}
/* "Une autre question, ou simplement envie d'echanger sur votre situation ?" */
#lcb-page#lcb-page .faq-closing p{font-size:1.2rem !important;font-family:var(--serif-display) !important;font-style:italic !important;}
/* Alignement du picto LinkedIn a cote du h2 "Damien Vuibert". */
#lcb-page#lcb-page #apropos .bio-panel .name-row{display:flex !important;align-items:baseline !important;}
#lcb-page#lcb-page #apropos .bio-panel .name-row .linkedin{align-self:flex-end !important;transform:translateY(3px) !important;}
/* ==================================================================
1.0.4 - Retouches mobile (menu burger, credentials, logo footer)
================================================================== */
@media (max-width:900px){
/* Filigrane SERENITE : retire sur mobile. */
#engagement .ghost-type{display:none;}
/* Certifications (AMF / Orias / Inovea / Cncef) : passage en grille a 2
colonnes fixes pour que le trait de separation gauche des 2 elements de
droite reste aligne verticalement (en flex + wrap, sa position
dependait de la largeur du texte de chaque item, d'ou le decalage). */
#apropos .bio-panel .credentials{
display:grid;grid-template-columns:1fr 1fr;
column-gap:28px;row-gap:22px;
}
/* Logo du footer : une hauteur fixe combinee au max-width:100% global
ecrasait la largeur sur les ecrans etroits et deformait le logo.
On dimensionne desormais par la largeur, hauteur automatique. */
footer .foot-logo img{height:auto;width:min(70vw,220px);}
/* Bouton du menu burger : agrandi pour une meilleure cible tactile. */
#nav-toggle{font-size:30px;padding:4px;line-height:1;}
}
/* ==================================================================
1.0.5 - Menu mobile plein ecran (classe is-open) + bouton en croix
================================================================== */
/* Bouton burger : conteneur des 3 barres, centre en colonne. Les valeurs de
la 1.0.4 (font-size/line-height, pensees pour l'ancien caractere ☰) restent
sans effet ici mais ne genent pas : ce bouton n'a plus de texte. */
@media (max-width:900px){
#nav-toggle{
display:flex;flex-direction:column;justify-content:center;align-items:center;
gap:6px;width:44px;height:44px;padding:0;
/* Une fois #nav-links passee en position:fixed (voir plus bas), elle est
peinte au-dessus de tout contenu non positionne du meme parent, meme
si elle est plus loin dans le z-index empile : sans ce position +
z-index, le bouton disparaissait derriere le fond vert et devenait
impossible a recliquer pour refermer le menu. */
position:relative;z-index:1002;
}
.nav-toggle-bar{
display:block;width:26px;height:3px;border-radius:2px;
background:currentColor;transition:transform .3s ease,opacity .2s ease;
}
/* Bouton transforme en croix quand le menu est ouvert. */
#nav-toggle.is-open .nav-toggle-bar:nth-child(1){transform:translateY(9px) rotate(45deg);}
#nav-toggle.is-open .nav-toggle-bar:nth-child(2){opacity:0;}
#nav-toggle.is-open .nav-toggle-bar:nth-child(3){transform:translateY(-9px) rotate(-45deg);}
/* Menu plein ecran : tout est en !important pour etre certain de gagner
face a n'importe quelle regle globale plus tardive (voir changelog). */
#nav-links.is-open{
display:flex !important;
position:fixed !important;
top:0 !important;right:0 !important;bottom:0 !important;left:0 !important;
width:100vw !important;height:100vh !important;
margin:0 !important;
background:var(--vert-lcb) !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:32px !important;
z-index:1001 !important;
}
#nav-links.is-open a{color:#fff !important;opacity:1 !important;}
#nav-links.is-open a.nav-cta{background:var(--vert-signature) !important;}
}
/* ==================================================================
1.0.6 - Croix visible apres scroll + fond du menu mobile aligne sur
le style du hero (halo, filigrane du cygne, logo complet)
================================================================== */
/* Filigrane du cygne et logo complet du menu mobile : elements ajoutes dans
header.php, mais masques partout par defaut (desktop, menu mobile ferme).
En dehors de la media query pour ne jamais s'afficher sur desktop, quelle
que soit la largeur d'ecran au moment ou la regle est evaluee. */
.nav-links-watermark,.nav-links-logo{display:none;}
@media (max-width:900px){
/* #nav.scrolled #nav-toggle passe en vert fonce (voir plus haut) : sans
cette regle, une fois qu'on a scrolle avant d'ouvrir le menu, la croix
devient vert fonce sur le fond vert fonce du menu et disparait. Le menu
ouvert est toujours sombre, quel que soit l'etat de scroll de la nav. */
#nav-toggle.is-open{color:#fff !important;}
/* Fond du menu aligne sur le style du hero : degrade radial (halo clair
au centre, bords plus sombres) plutot qu'un aplat uni. */
#nav-links.is-open{
background:radial-gradient(ellipse 90% 70% at 50% 38%, #067064 0%, #04473f 30%, #011c18 62%, #000403 100%) !important;
}
/* Filigrane du cygne en fond et logo complet centre en haut du menu,
visibles uniquement quand le menu mobile est ouvert. */
#nav-links.is-open .nav-links-watermark{
display:block !important;position:absolute !important;inset:0 !important;
overflow:hidden;pointer-events:none;z-index:0;
}
#nav-links.is-open .nav-links-watermark img{
position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);
width:150vw;max-width:640px;opacity:0.07;
}
#nav-links.is-open .nav-links-logo{
display:block !important;position:relative;z-index:1;
width:min(46vw,180px);margin-bottom:10px;
}
}
/* ==================================================================
1.0.7 - Menu mobile : logo deux fois plus grand, filigrane plus discret
================================================================== */
@media (max-width:900px){
#nav-links.is-open .nav-links-logo{width:min(90vw,360px) !important;margin-bottom:22px !important;}
#nav-links.is-open .nav-links-watermark img{opacity:0.035 !important;}
}
/* ==================================================================
1.0.8 - Hero, partenaires et FAQ en mobile + CTA "Appeler le cabinet"
================================================================== */
@media (max-width:900px){
/* Logo du hero agrandi, a peu pres a la taille de celui du menu ouvert.
Cible uniquement #nav .nav-logo (etat de base, hero non scrolle) : la
regle #nav.scrolled .nav-logo (plus specifique, hors media query) garde
la main des que la nav passe en mode scrolled, donc cette derniere n'est
pas affectee, comme demande. */
#nav .nav-logo{height:min(40vw,158px);}
/* Le logo est deja le premier enfant du flex #nav (justify-content:
space-between), donc deja cale a gauche : rien a changer de ce cote,
l'agrandissement seul ne le recentre pas. */
/* Le hero utilise un padding-top fixe pense pour l'ancienne taille de nav
(~128px) : avec le logo agrandi la nav peut monter jusqu'a ~180px, d'ou
ce padding un peu plus genereux pour ne pas passer dessous. */
#hero{padding-top:200px;}
#hero-content{width:100%;text-align:center;}
/* H1 du hero un peu plus grand. Meme selecteur que le bloc de durcissement
1.0.2 (#lcb-page#lcb-page #hero h1, deja en !important) : specificite
identique, donc c'est cette regle plus tardive dans le fichier qui
l'emporte sur mobile. */
#lcb-page#lcb-page #hero h1{font-size:clamp(2.7rem,8vw,3.4rem) !important;}
/* Filigrane du cygne du hero : il etait entierement masque en mobile
(#hero .watermark{display:none} plus haut). On le reintroduit mais en
version statique, tres discrete (opacite plus faible que sur desktop,
ou elle finit a 0.03), sans l'animation de reveal ni le parallaxe au
scroll qui n'ont pas vraiment de sens sur un petit ecran. */
#hero .watermark{
display:block;opacity:0.02;
animation:none;-webkit-mask-image:none;mask-image:none;
width:70vw;max-width:520px;right:-12%;
}
/* Logos partenaires un peu plus petits pour en loger plusieurs par ligne
et raccourcir le bloc. On passe par un zoom CSS plutot que de retoucher
la hauteur inline de chacun des 27 logos dans template-accueil.php : ces
hauteurs sont calibrees individuellement les unes par rapport aux autres,
le zoom les reduit toutes proportionnellement sans casser cet equilibre. */
.partner-strip{gap:26px 30px;}
.partner-strip img{zoom:0.72;}
/* FAQ : on retire le trait de separation et on resserre l'espace avant la
phrase de cloture ("Une autre question..."). */
.faq-closing{border-top:none;margin-top:24px;padding-top:0;}
}
/* ==================================================================
1.0.9 - Logo de la nav agrandi (tous formats), logo du hero mobile
corrige (deformation), filigrane du hero agrandi et redescendu
================================================================== */
/* Logo de la nav : marges au-dessus/en-dessous divisees par deux (le
padding vertical de #nav), l'espace libere est redonne integralement a la
hauteur du logo. La hauteur totale de la barre ne change donc pas. Vaut
pour tous les formats, au repos et une fois la nav scrolled. */
#nav{padding:6px 6vw;}
#nav .nav-logo{height:116px;}
#nav.scrolled{padding:4px 6vw;}
#nav.scrolled .nav-logo{height:82px;}
@media (max-width:900px){
/* Correctif de la deformation du logo du hero (1.0.8) : a 158px de haut
(min(40vw,158px)), la largeur resultante (~354px, vu le ratio du logo)
depassait la place disponible a cote du bouton burger. Flexbox
retrecissait alors la largeur du logo sans toucher a sa hauteur fixe,
d'ou l'ecrasement. Cette nouvelle valeur reste sous la largeur
disponible meme sur les petits ecrans, donc plus de retrecissement
force : le logo grossit toujours par rapport a l'original (116px de
base ci-dessus), mais dans une mesure qui tient a cote du bouton burger. */
#nav .nav-logo{height:min(32vw,124px);}
/* Filigrane du cygne du hero : agrandi et redescendu pour se retrouver au
niveau des 2 boutons d'appel a l'action, plutot que centre au milieu du
hero. */
#hero .watermark{
width:78vw;max-width:560px;
top:auto;bottom:-6%;
transform:none;
}
}
/* ==================================================================
1.0.10 - Filigrane du hero mobile : un peu moins transparent, plus
grand, remonte legerement
================================================================== */
@media (max-width:900px){
#hero .watermark{
opacity:0.045;
width:92vw;max-width:650px;
bottom:0%;
}
}
/* ==================================================================
1.0.11 - Halo mobile de #methode : etapes 3 et 4 tombaient sur fond noir
(voir le detail du diagnostic dans le changelog en tete de fichier)
================================================================== */
/* 561-900px : deux colonnes (voir .method-steps grid-template-columns plus
haut), section relativement courte. */
@media (max-width:900px){
#methode{
background:radial-gradient(ellipse 140% 520px at 50% 560px, #067064 0%, #04473f 30%, #011c18 62%, #000403 100%);
}
}
/* 560px et en dessous : colonne unique, les 4 etapes s'empilent sans
chevauchement, section beaucoup plus haute qu'au palier precedent, d'ou
un halo nettement plus grand et recentre plus bas pour couvrir l'etape 4. */
@media (max-width:560px){
#methode{
background:radial-gradient(ellipse 160% 1040px at 50% 810px, #067064 0%, #04473f 30%, #011c18 62%, #000403 100%);
}
}