/* =================================================================
RISE MEDIA COMMUNICATIONS+ — style.css
Design system : Tailwind (layout utilitaire, via CDN dans le )
+ ce fichier pour la typographie, les couleurs, les animations et
les composants distinctifs de la marque.
================================================================= */
/* ---------- Fonts ---------- */
/* Chargées via dans le de chaque page (perf : preconnect + display=swap) */
/* ---------- Design tokens ---------- */
:root{
/* Palette officielle de la marque (Normes graphiques Rise Medias) */
--navy:#241C4D;
--navy-deep:#161033;
--navy-soft:#332762;
--teal:#1FADD6;
--teal-bright:#2FD0D9;
--orange:#F0923A;
--orange-deep:#E0722B;
--white:#FFFFFF;
--cream:#F7F5FB;
--text-dim:#B9B2DE;
--text-dim-soft:rgba(185,178,222,0.75);
--line:rgba(255,255,255,0.14);
--line-soft:rgba(36,28,77,0.10);
--ink:#241C4D;
--font-display:'Fraunces', ui-serif, serif;
--font-heavy:'Archivo Expanded', sans-serif;
--font-body:'Archivo', sans-serif;
--font-mono:'Space Mono', ui-monospace, monospace;
--radius-sm:2px;
--radius-md:6px;
--ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
margin:0;
background:var(--navy);
color:var(--white);
font-family:var(--font-body);
line-height:1.5;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:var(--orange);color:var(--white);}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
scroll-behavior:auto !important;
}
}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px;}
@media (max-width:640px){.wrap{padding:0 22px;}}
/* Light-section variant (used on inner pages for contrast/legibility) */
.on-light{background:var(--cream);color:var(--ink);}
.on-light .sec-body{color:#5a5480;}
.on-light .sec-head{color:var(--ink);}
/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease), transform .7s var(--ease);will-change:transform,opacity;}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal-stagger > *{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease), transform .6s var(--ease);will-change:transform,opacity;}
.reveal-stagger.is-visible > *{opacity:1;transform:translateY(0);}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:.02s;}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.09s;}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.16s;}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.23s;}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:.30s;}
.reveal-stagger.is-visible > *:nth-child(6){transition-delay:.37s;}
@media (prefers-reduced-motion: reduce){
.reveal,.reveal-stagger > *{opacity:1;transform:none;}
}
/* ---------- Skip link ---------- */
.skip-link{
position:absolute;left:12px;top:-60px;z-index:200;
background:var(--orange);color:var(--white);padding:10px 18px;
border-radius:var(--radius-sm);font-weight:700;font-size:14px;
transition:top .2s var(--ease);
}
.skip-link:focus{top:12px;}
/* ---------- NAV ---------- */
.site-nav{
position:sticky;top:0;z-index:100;
background:rgba(255,255,255,0.86);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
border-bottom:1px solid rgba(36,28,77,0.08);
transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.site-nav.nav-hidden{transform:translateY(-100%);}
.site-nav.nav-scrolled{box-shadow:0 10px 30px -14px rgba(22,16,51,0.25);}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px;}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.nav-logo img{height:34px;width:auto;display:block;}
.navlinks{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.navlinks a{
color:var(--navy);text-decoration:none;font-size:13px;font-weight:700;
letter-spacing:.03em;text-transform:uppercase;transition:color .2s ease;
white-space:nowrap;position:relative;padding-bottom:4px;
}
.navlinks a::after{
content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--orange);
transition:width .25s var(--ease);
}
.navlinks a:hover, .navlinks a:focus-visible{color:var(--orange-deep);}
.navlinks a:hover::after,.navlinks a.active::after{width:100%;}
.navlinks a.active{color:var(--orange-deep);}
.navlinks a:focus-visible{outline:2px solid var(--orange);outline-offset:4px;}
.nav-badge{
display:inline-block;margin-left:6px;padding:2px 7px;border-radius:20px;
background:linear-gradient(100deg,var(--orange),var(--teal));
color:var(--white);font-size:9px;letter-spacing:.06em;font-weight:800;
vertical-align:middle;
}
.nav-cta{
display:inline-flex;align-items:center;gap:8px;
background:var(--navy);color:var(--white);
padding:12px 20px;border-radius:var(--radius-sm);
font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
text-decoration:none;transition:background .2s ease, transform .2s ease;flex-shrink:0;
}
.nav-cta:hover{background:var(--orange-deep);transform:translateY(-2px);}
.lang-switch{display:flex;align-items:center;gap:2px;background:rgba(36,28,77,0.06);border:1px solid rgba(36,28,77,0.12);border-radius:20px;padding:3px;flex-shrink:0;}
.lang-switch a{
display:inline-flex;align-items:center;justify-content:center;
padding:6px 12px;border-radius:16px;font-size:12px;font-weight:800;letter-spacing:.03em;
color:var(--navy);text-decoration:none;transition:background .2s ease,color .2s ease;
}
.lang-switch a.active{background:var(--navy);color:var(--white);}
.lang-switch a:hover:not(.active){color:var(--orange-deep);}
.nav-burger{
display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;
padding:8px;margin-left:auto;
}
.nav-burger span{width:24px;height:2px;background:var(--navy);display:block;transition:transform .25s var(--ease),opacity .25s var(--ease);}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:400px){
.lang-switch a{padding:5px 9px;font-size:11px;}
.nav-logo img{height:28px;}
}
@media (max-width:900px){
.nav-burger{display:flex;}
.navlinks{
position:fixed;inset:78px 0 0 0;height:calc(100dvh - 78px);
background:var(--white);flex-direction:column;align-items:flex-start;
padding:36px 28px;gap:4px;overflow-y:auto;
transform:translateX(100%);transition:transform .38s var(--ease);
}
.navlinks.open{transform:translateX(0);}
.navlinks li{width:100%;border-bottom:1px solid var(--line-soft);}
.navlinks a{display:block;padding:16px 4px;font-size:15px;}
.nav-cta{display:none;}
.navlinks .nav-cta-mobile{display:inline-flex;margin-top:14px;}
}
/* ---------- HERO ---------- */
.hero{position:relative;padding:120px 0 100px;overflow:hidden;background:var(--navy);}
.hero.hero-compact{padding:96px 0 76px;}
.hero-mesh{
position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(circle at 82% -10%, rgba(240,146,58,0.28), transparent 55%),
radial-gradient(circle at -5% 40%, rgba(31,173,214,0.24), transparent 50%),
radial-gradient(circle at 60% 120%, rgba(51,39,98,0.5), transparent 55%);
}
@property --meshshift{syntax:'';inherits:false;initial-value:0%;}
.eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--teal-bright);margin-bottom:22px;
}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);flex-shrink:0;}
h1.hero-title{
position:relative;font-family:var(--font-display);font-weight:600;
font-size:clamp(38px, 6.4vw, 78px);line-height:1.03;letter-spacing:-0.01em;
max-width:840px;color:var(--white);text-wrap:balance;
}
h1.hero-title .rise{
display:inline-block;background:linear-gradient(100deg,var(--orange) 0%, var(--teal-bright) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
animation:lift 1s var(--ease) both;
}
@keyframes lift{from{transform:translateY(18px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.hero-sub{position:relative;margin-top:26px;max-width:560px;font-size:18px;color:var(--text-dim);}
.hero-cta{position:relative;margin-top:42px;display:flex;gap:16px;flex-wrap:wrap;}
/* ---------- BUTTONS ---------- */
.btn{
display:inline-flex;align-items:center;gap:9px;
padding:15px 28px;border-radius:var(--radius-sm);
font-size:14px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
text-decoration:none;cursor:pointer;border:1px solid transparent;
transition:transform .2s ease, opacity .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{background:var(--orange);color:var(--white);}
.btn-primary:hover{transform:translateY(-2px);background:var(--orange-deep);}
.btn-ghost{border-color:rgba(255,255,255,0.4);color:var(--white);background:transparent;}
.btn-ghost:hover{background:var(--orange);border-color:var(--orange);color:var(--white);}
.btn-dark{border-color:rgba(36,28,77,0.3);color:var(--navy);background:transparent;}
.btn-dark:hover{background:var(--navy);border-color:var(--navy);color:var(--white);}
.btn-whatsapp{background:#25D366;color:#fff;}
.btn-whatsapp:hover{background:#1DA851;transform:translateY(-2px);}
.btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px;}
.btn svg{width:16px;height:16px;flex-shrink:0;}
/* ---------- SECTION SHARED ---------- */
section{padding:96px 0;border-top:1px solid var(--line);}
.on-light section, section.on-light{border-top:1px solid var(--line-soft);}
.sec-label{
font-family:var(--font-mono);
font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--teal-bright);margin-bottom:18px;
}
.on-light .sec-label{color:var(--orange-deep);}
.sec-head{
font-family:var(--font-display);font-weight:500;
font-size:clamp(28px,3.4vw,42px);line-height:1.14;max-width:700px;margin-bottom:26px;
color:var(--white);text-wrap:balance;
}
.sec-body{max-width:660px;color:var(--text-dim);font-size:17px;}
.sec-body p{margin:0 0 16px;}
.sec-body p:last-child{margin-bottom:0;}
.sec-body strong{color:var(--white);font-weight:600;}
.on-light .sec-body strong{color:var(--ink);}
.sec-intro-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:8px;}
/* ---------- TRIAD (Philosophie/Vision/Mission) ---------- */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.triad > div{background:var(--navy);padding:40px 32px;}
.triad h3{font-family:var(--font-display);font-weight:600;font-size:22px;margin:0 0 14px;line-height:1.25;color:var(--white);}
.triad p{color:var(--text-dim);font-size:15px;line-height:1.6;margin:0;}
@media (max-width:820px){.triad{grid-template-columns:1fr;}}
/* ---------- APPROACH CONTEXT + FLOW ---------- */
.approach-context{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:36px 0 56px;}
.approach-context span{font-size:14px;color:var(--text-dim);padding:10px 0;border-bottom:1px solid var(--line);}
@media (max-width:700px){.approach-context{grid-template-columns:repeat(2,1fr);}}
.flow, .method-flow{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;margin-top:20px;}
.flow-step, .method-step{
flex:1;min-width:170px;position:relative;padding:28px 24px 24px;
border:1px solid var(--line);margin-right:-1px;margin-bottom:-1px;background:var(--navy);
}
.flow-step .num, .method-step .num{font-family:var(--font-mono);font-size:13px;color:var(--orange);margin-bottom:10px;letter-spacing:.05em;}
.flow-step h4, .method-step h4{font-family:var(--font-heavy);font-weight:800;font-size:17px;letter-spacing:.01em;margin:0 0 8px;color:var(--white);}
.flow-step p, .method-step p{font-size:14px;color:var(--text-dim);margin:0;line-height:1.55;}
.flow-step::after{content:"→";position:absolute;right:-11px;top:50%;transform:translateY(-50%);color:var(--teal-bright);font-size:18px;z-index:2;}
.flow-step:last-child::after{content:"";}
@media (max-width:700px){.flow-step::after{content:"↓";right:auto;left:24px;top:auto;bottom:-22px;transform:none;}}
/* ---------- SERVICES ---------- */
.service{padding:44px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:280px 1fr;gap:48px;}
.service:first-of-type{border-top:none;}
.service-head h3{font-family:var(--font-display);font-weight:600;font-size:26px;line-height:1.2;margin:0 0 10px;color:var(--white);}
.service-head .tagline{color:var(--orange);font-size:14px;font-weight:600;}
.service-icon{width:44px;height:44px;margin-bottom:16px;color:var(--teal-bright);}
.service-body p{color:var(--text-dim);font-size:15px;line-height:1.65;margin:0 0 16px;}
.service-list{font-size:14px;color:var(--text-dim);line-height:1.9;}
.service-list strong{color:var(--white);font-weight:600;}
.service-cta{margin-top:18px;}
@media (max-width:820px){.service{grid-template-columns:1fr;gap:16px;}}
/* ---------- BENTO GRID (chiffres clés / stats) ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px;}
.bento-cell{background:var(--navy);padding:32px 26px;}
.bento-cell .stat{font-family:var(--font-display);font-weight:600;font-size:clamp(34px,4vw,48px);color:var(--white);line-height:1;}
.bento-cell .stat .suffix{color:var(--orange);}
.bento-cell .stat-label{margin-top:10px;font-size:13px;color:var(--text-dim);letter-spacing:.02em;}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.bento{grid-template-columns:1fr;}}
/* ---------- GLASS CARDS ---------- */
.glass-card{
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.14);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border-radius:var(--radius-md);padding:32px 28px;
}
/* ---------- PACKS / SOLUTIONS ---------- */
.packs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px;}
.pack-card{background:var(--navy);padding:32px 28px;display:flex;flex-direction:column;transition:background .25s ease;}
.pack-card:hover{background:var(--navy-soft);}
.pack-num{font-family:var(--font-mono);font-size:12px;color:var(--orange);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;}
.pack-card h3{font-family:var(--font-heavy);font-weight:800;font-size:19px;letter-spacing:.01em;margin:0 0 8px;color:var(--white);}
.pack-card .pack-icon{font-size:22px;margin-bottom:10px;}
.pack-card .pack-tagline{font-size:13px;color:var(--teal-bright);font-style:italic;margin-bottom:18px;}
.pack-card .pack-for{font-size:13px;color:var(--text-dim);margin-bottom:18px;}
.pack-card .pack-includes{font-size:13px;color:var(--text-dim);line-height:1.8;margin-bottom:18px;flex-grow:1;}
.pack-card .pack-includes strong{color:var(--white);font-weight:600;display:block;margin-bottom:6px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;}
.pack-card .pack-obj{font-size:13px;color:var(--white);padding-top:16px;border-top:1px solid var(--line);}
.pack-card .pack-obj strong{color:var(--orange);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:6px;}
.pack-card.featured{background:linear-gradient(160deg,var(--navy-soft),var(--navy));border:1px solid rgba(240,146,58,0.5);}
@media (max-width:900px){.packs-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.packs-grid{grid-template-columns:1fr;}}
/* ---------- WHY US ---------- */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 48px;margin-top:40px;}
.why-item .sec-label{margin-bottom:10px;}
.why-item p{color:var(--text-dim);font-size:15px;line-height:1.6;margin:0;}
@media (max-width:700px){.why-grid{grid-template-columns:1fr;}}
/* ---------- CLIENT LOGO MARQUEE ---------- */
.clients-band{background:var(--navy-deep);padding:52px 0;border-top:1px solid var(--line);overflow:hidden;}
.clients-band .sec-label{text-align:center;margin-bottom:30px;}
.marquee{position:relative;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;align-items:center;gap:64px;width:max-content;animation:scroll-x 32s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track img{height:40px;width:auto;object-fit:contain;filter:grayscale(100%) brightness(1.6);opacity:.8;transition:filter .25s ease,opacity .25s ease;}
.marquee-track img:hover{filter:none;opacity:1;}
@keyframes scroll-x{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* ---------- PORTFOLIO / REALISATIONS ---------- */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin:36px 0 44px;}
.filter-btn{
font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
padding:10px 18px;border-radius:30px;border:1px solid var(--line);background:transparent;color:var(--text-dim);
cursor:pointer;transition:all .2s ease;
}
.on-light .filter-btn{border-color:var(--line-soft);color:#5a5480;}
.filter-btn:hover{border-color:var(--orange);color:var(--white);}
.on-light .filter-btn:hover{color:var(--ink);}
.filter-btn.active{background:var(--orange);border-color:var(--orange);color:var(--white);}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;container-type:inline-size;}
.portfolio-item{position:relative;border-radius:var(--radius-md);overflow:hidden;background:var(--navy-soft);aspect-ratio:1/1;}
.portfolio-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.portfolio-item:hover img{transform:scale(1.06);}
.portfolio-cap{
position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
background:linear-gradient(0deg,rgba(22,16,51,0.92),transparent);
font-size:13px;font-weight:700;color:var(--white);letter-spacing:.01em;
opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;
}
.portfolio-item:hover .portfolio-cap{opacity:1;transform:translateY(0);}
.portfolio-tag{font-size:10px;color:var(--teal-bright);text-transform:uppercase;letter-spacing:.08em;display:block;margin-top:3px;}
@media (max-width:820px){.portfolio-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.portfolio-grid{grid-template-columns:1fr;}}
/* ---------- TESTIMONIALS ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;}
.testi-card{background:var(--navy-deep);border:1px solid var(--line);border-radius:var(--radius-md);padding:30px 26px;}
.testi-quote{font-family:var(--font-display);font-style:italic;font-size:17px;line-height:1.5;color:var(--white);margin:0 0 20px;}
.testi-who{display:flex;align-items:center;gap:12px;}
.testi-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--teal));display:flex;align-items:center;justify-content:center;font-family:var(--font-heavy);font-weight:800;color:var(--white);font-size:15px;flex-shrink:0;}
.testi-name{font-size:14px;font-weight:700;color:var(--white);}
.testi-role{font-size:12px;color:var(--text-dim);}
@media (max-width:900px){.testi-grid{grid-template-columns:1fr;}}
/* ---------- STEP CARD (process pages) ---------- */
.step-list{counter-reset:step;margin-top:44px;display:flex;flex-direction:column;gap:0;}
.step-item{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--line);}
.step-item:first-child{border-top:none;}
.step-item .step-num{font-family:var(--font-display);font-size:28px;color:var(--orange);}
.step-item h4{font-family:var(--font-heavy);font-weight:800;font-size:17px;margin:0 0 8px;color:var(--white);}
.step-item p{margin:0;color:var(--text-dim);font-size:15px;line-height:1.6;}
/* ---------- CONTACT PAGE GRID ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start;}
@media (max-width:860px){
.contact-grid{grid-template-columns:1fr;gap:40px;}
}
/* ---------- BALANCED 3-COLUMN GRID (avoids uneven auto-fit rows, e.g. 4+2) ---------- */
.grid-fixed-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:20px;}
@media (max-width:820px){.grid-fixed-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.grid-fixed-3{grid-template-columns:1fr;}}
/* ---------- FORM ---------- */
.form-field{position:relative;margin-bottom:26px;}
.form-field input, .form-field textarea, .form-field select{
width:100%;padding:16px 14px 10px;background:transparent;border:none;
border-bottom:1.5px solid rgba(255,255,255,0.28);color:var(--white);
font-family:var(--font-body);font-size:16px;outline:none;transition:border-color .2s ease;
}
.on-light .form-field input, .on-light .form-field textarea, .on-light .form-field select{
color:var(--ink);border-bottom-color:rgba(36,28,77,0.25);
}
.form-field textarea{resize:vertical;min-height:120px;}
.form-field label{
position:absolute;left:14px;top:16px;color:var(--text-dim);font-size:16px;
pointer-events:none;transition:all .2s var(--ease);
}
.on-light .form-field label{color:#8a83ab;}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{border-bottom-color:var(--orange);}
.form-field input:focus ~ label,
.form-field input:not(:placeholder-shown) ~ label,
.form-field textarea:focus ~ label,
.form-field textarea:not(:placeholder-shown) ~ label,
.form-field.has-value label{
top:-2px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--orange);
}
.form-note{font-size:12px;color:var(--text-dim);margin-top:-10px;margin-bottom:24px;}
.form-status{margin-top:18px;font-size:14px;padding:12px 16px;border-radius:var(--radius-sm);display:none;}
.form-status.show{display:block;}
.form-status.ok{background:rgba(37,211,102,0.14);color:#25D366;border:1px solid rgba(37,211,102,0.4);}
.form-status.err{background:rgba(224,90,43,0.14);color:#F0923A;border:1px solid rgba(240,146,58,0.4);}
/* ---------- FAQ / ACCORDION ---------- */
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{
width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
background:none;border:none;text-align:left;padding:24px 0;cursor:pointer;
font-family:var(--font-heavy);font-weight:700;font-size:16px;color:var(--white);
list-style:none;
}
.faq-q::-webkit-details-marker{display:none;}
.on-light .faq-q{color:var(--ink);}
.faq-q .plus{font-size:22px;color:var(--orange);transition:transform .25s var(--ease);flex-shrink:0;}
.faq-item[open] .faq-q .plus{transform:rotate(45deg);}
.faq-a{padding:0 0 24px;color:var(--text-dim);font-size:15px;line-height:1.65;max-width:720px;}
/* ---------- CTA FOOTER BAND ---------- */
.cta-band{padding:90px 0;background:var(--navy-deep);text-align:left;position:relative;overflow:hidden;}
.cta-band .hero-mesh{opacity:.7;}
.cta-final h2{
position:relative;font-family:var(--font-display);font-weight:600;
font-size:clamp(30px,4.5vw,54px);max-width:680px;line-height:1.1;margin:0 0 32px;color:var(--white);
}
.cta-final .rise{background:linear-gradient(100deg,var(--orange),var(--teal-bright));-webkit-background-clip:text;background-clip:text;color:transparent;}
.cta-final-row{position:relative;display:flex;gap:16px;flex-wrap:wrap;}
/* ---------- FOOTER ---------- */
footer.site-footer{padding:80px 0 30px;background:var(--navy-deep);color:var(--white);border-top:1px solid var(--line);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}
.footer-brand img{height:32px;width:auto;margin-bottom:16px;}
.footer-brand p{color:var(--text-dim);font-size:14px;line-height:1.6;max-width:280px;}
.footer-col h5{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-bright);margin:0 0 16px;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footer-col a{color:var(--text-dim);text-decoration:none;font-size:14px;transition:color .2s ease;}
.footer-col a:hover{color:var(--orange);}
.footer-social{display:flex;gap:12px;margin-top:18px;}
.footer-social a{
width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
display:flex;align-items:center;justify-content:center;color:var(--white);transition:all .2s ease;
}
.footer-social a:hover{background:var(--orange);border-color:var(--orange);}
.footer-social svg{width:16px;height:16px;}
.foot-bottom{
margin-top:64px;padding-top:26px;border-top:1px solid rgba(255,255,255,0.12);
display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
font-size:13px;color:rgba(255,255,255,0.6);
}
.foot-bottom a{color:rgba(255,255,255,0.6);text-decoration:underline;text-underline-offset:2px;}
.foot-bottom a:hover{color:var(--orange);}
.lang-flag{display:inline-flex;align-items:center;gap:6px;}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;row-gap:36px;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
/* ---------- WHATSAPP FLOATING BUTTON ---------- */
.wa-float{
position:fixed;right:22px;bottom:22px;z-index:9000;
width:60px;height:60px;border-radius:50%;background:#25D366;
display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 26px -6px rgba(0,0,0,0.45);
opacity:0;pointer-events:none;transform:translateY(16px) scale(.9);
transition:opacity .3s ease, transform .3s ease;
}
.wa-float.show{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
.wa-float svg{width:30px;height:30px;fill:#fff;}
.wa-float:hover{transform:translateY(-3px) scale(1.04);}
.wa-pulse{position:absolute;inset:0;border-radius:50%;background:#25D366;opacity:.5;animation:wa-pulse 2.2s ease-out infinite;}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.5;}100%{transform:scale(1.7);opacity:0;}}
/* Back to top */
.top-btn{
position:fixed;right:22px;bottom:92px;z-index:8999;
width:44px;height:44px;border-radius:50%;background:rgba(36,28,77,0.9);border:1px solid var(--line);
color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .3s ease, transform .3s ease;
}
.top-btn.show{opacity:1;pointer-events:auto;transform:translateY(0);}
.top-btn svg{width:18px;height:18px;}
/* WhatsApp proactive bubble */
.wa-popup{
position:fixed;right:22px;bottom:92px;z-index:8998;width:296px;max-width:calc(100vw - 44px);
background:var(--white);color:var(--ink);border-radius:14px;
box-shadow:0 20px 48px -12px rgba(22,16,51,0.4);
opacity:0;transform:translateY(16px) scale(.96);pointer-events:none;
transition:opacity .3s var(--ease), transform .3s var(--ease);overflow:hidden;
}
.wa-popup.active{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.wa-popup-head{background:#25D366;color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px;position:relative;}
.wa-popup-head strong{font-size:13px;}
.wa-popup-close{position:absolute;right:10px;top:10px;background:none;border:none;color:#fff;font-size:16px;cursor:pointer;line-height:1;padding:4px;}
.wa-popup-body{padding:14px 16px;}
.wa-popup-body p{margin:0 0 12px;font-size:13px;color:#5a5480;}
.wa-popup-btns{display:flex;flex-direction:column;gap:8px;}
.wa-popup-btns a{
display:block;padding:10px 12px;border-radius:8px;background:var(--cream);color:var(--ink);
font-size:12.5px;font-weight:600;text-decoration:none;transition:background .2s ease;
}
.wa-popup-btns a:hover{background:#e9e4f7;}
/* ---------- 404 ---------- */
.error-hero{padding:150px 0 110px;text-align:center;position:relative;}
.error-hero svg{width:220px;height:auto;margin:0 auto 40px;display:block;}
.error-hero h1{font-family:var(--font-display);font-size:clamp(32px,5vw,54px);margin:0 0 18px;}
.error-hero p{color:var(--text-dim);max-width:480px;margin:0 auto 36px;font-size:17px;}
.error-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px;}
/* ---------- MISC ---------- */
.badge-new{
display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:30px;
background:rgba(240,146,58,0.14);border:1px solid rgba(240,146,58,0.4);
color:var(--orange);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
margin-bottom:20px;
}
.badge-new .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);animation:blink 1.6s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}
.divider-line{height:1px;background:var(--line);width:100%;margin:0;}
.legal-content{max-width:760px;}
.legal-content h2{font-family:var(--font-display);font-size:24px;margin:44px 0 16px;color:var(--white);}
.legal-content h2:first-child{margin-top:0;}
.legal-content p, .legal-content li{color:var(--text-dim);font-size:15px;line-height:1.7;}
.legal-content ul{padding-left:20px;}
.legal-content a{color:var(--teal-bright);}
/* Team-less about avatars pattern (initials) */
.avatar-ring{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--teal));display:flex;align-items:center;justify-content:center;font-family:var(--font-heavy);color:#fff;font-weight:800;}
/* =================================================================
V3 — REFONTE ÉDITORIALE : parallax léger, traitement photo duotone,
emplacements photo IA, boutons magnétiques, curseur, mise en page
asymétrique, citations pleine largeur, galerie masonry, modale CTA.
================================================================= */
/* ---------- CUSTOM CURSOR (desktop only) ---------- */
.cursor-dot{
position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;
background:var(--orange);pointer-events:none;z-index:9500;
transform:translate(-50%,-50%);transition:opacity .2s ease, width .25s var(--ease), height .25s var(--ease), background .25s ease;
mix-blend-mode:difference;opacity:0;
}
.cursor-ring{
position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%;
border:1px solid rgba(240,146,58,.7);pointer-events:none;z-index:9499;
transform:translate(-50%,-50%);transition:opacity .2s ease, width .3s var(--ease), height .3s var(--ease), transform .08s linear;
opacity:0;
}
.cursor-active .cursor-dot,.cursor-active .cursor-ring{opacity:1;}
.cursor-hover .cursor-ring{width:56px;height:56px;border-color:var(--teal-bright);}
.cursor-hover .cursor-dot{width:0;height:0;}
@media (hover:none), (pointer:coarse){.cursor-dot,.cursor-ring{display:none;}}
@media (prefers-reduced-motion: reduce){.cursor-dot,.cursor-ring{display:none;}}
/* ---------- PARALLAX LAYERS ---------- */
[data-parallax]{will-change:transform;}
.parallax-wrap{position:relative;overflow:hidden;}
@media (prefers-reduced-motion: reduce){[data-parallax]{transform:none !important;}}
/* ---------- PHOTO TREATMENT : duotone de marque sur photos réelles ---------- */
.photo-duotone{position:relative;overflow:hidden;border-radius:var(--radius-md);}
.photo-duotone img{
width:100%;height:100%;object-fit:cover;display:block;
filter:grayscale(1) contrast(1.1) brightness(.95);
transition:transform .7s var(--ease), filter .5s ease;
}
.photo-duotone::after{
content:"";position:absolute;inset:0;
background:linear-gradient(155deg, rgba(31,173,214,.55), rgba(240,146,58,.4) 55%, rgba(36,28,77,.75));
mix-blend-mode:color;pointer-events:none;
}
.photo-duotone::before{
content:"";position:absolute;inset:0;z-index:2;
background:linear-gradient(0deg, rgba(22,16,51,.55), transparent 45%);
pointer-events:none;
}
.photo-duotone:hover img{transform:scale(1.05);filter:grayscale(.3) contrast(1.08) brightness(1);}
/* ---------- PHOTO SLOT (emplacement visuel IA à venir) ---------- */
.photo-slot{
position:relative;overflow:hidden;border-radius:var(--radius-md);
min-height:280px;display:flex;align-items:flex-end;
background:
radial-gradient(circle at 30% 20%, rgba(240,146,58,.35), transparent 55%),
radial-gradient(circle at 80% 80%, rgba(31,173,214,.35), transparent 55%),
linear-gradient(155deg, var(--navy-soft), var(--navy-deep));
border:1px solid rgba(255,255,255,.12);
}
.photo-slot::before{
content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
background-size:14px 14px;
}
.photo-slot-tag{
position:relative;z-index:2;display:flex;align-items:center;gap:10px;
padding:16px 18px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
text-transform:uppercase;color:rgba(255,255,255,.75);
}
.photo-slot-tag svg{width:16px;height:16px;flex-shrink:0;color:var(--orange);}
.photo-slot.square{aspect-ratio:1/1;min-height:0;}
.photo-slot.portrait{aspect-ratio:3/4;min-height:0;}
.photo-slot.wide{aspect-ratio:16/9;min-height:0;}
/* ---------- EDITORIAL SPLIT HERO ---------- */
.split-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:stretch;min-height:640px;}
.split-hero-text{display:flex;flex-direction:column;justify-content:center;padding:80px 64px 80px 0;position:relative;z-index:2;}
.split-hero-media{position:relative;overflow:hidden;clip-path:polygon(8% 0,100% 0,100% 100%,0% 100%);}
.split-hero-media .photo-duotone,.split-hero-media .photo-slot{position:absolute;inset:0;border-radius:0;height:120%;top:-10%;}
@media (max-width:980px){
.split-hero{grid-template-columns:1fr;min-height:0;}
.split-hero-text{padding:56px 0 40px;}
.split-hero-media{clip-path:none;aspect-ratio:4/3;order:-1;border-radius:var(--radius-md);}
.split-hero-media .photo-duotone,.split-hero-media .photo-slot{height:100%;top:0;}
}
/* ---------- ZIGZAG IMAGE/TEXT ROWS ---------- */
.zigzag-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:64px 0;border-top:1px solid var(--line);}
.zigzag-row:first-of-type{border-top:none;}
.zigzag-row.reverse .zigzag-media{order:2;}
.zigzag-row.reverse .zigzag-text{order:1;}
.zigzag-media .photo-duotone,.zigzag-media .photo-slot{aspect-ratio:5/4;}
.zigzag-text .sec-label{margin-bottom:14px;}
.zigzag-text h3{font-family:var(--font-display);font-weight:600;font-size:clamp(24px,2.6vw,32px);margin:0 0 16px;color:var(--white);line-height:1.2;}
.zigzag-text p{color:var(--text-dim);font-size:15.5px;line-height:1.7;margin:0 0 14px;}
@media (max-width:820px){
.zigzag-row{grid-template-columns:1fr;gap:28px;padding:44px 0;}
.zigzag-row.reverse .zigzag-media,.zigzag-row.reverse .zigzag-text{order:initial;}
}
/* ---------- PULL QUOTE PLEINE LARGEUR (avec image duotone en fond) ---------- */
.quote-slab{position:relative;padding:120px 0;overflow:hidden;background:var(--navy-deep);}
.quote-slab .slab-bg{position:absolute;inset:0;z-index:0;}
.quote-slab .slab-bg .photo-duotone,.quote-slab .slab-bg .photo-slot{position:absolute;inset:0;border-radius:0;opacity:.32;}
.quote-slab .slab-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--navy-deep) 0%, rgba(22,16,51,.75) 40%, var(--navy-deep) 100%);}
.quote-slab blockquote{
position:relative;z-index:2;max-width:820px;margin:0 auto;text-align:center;
font-family:var(--font-display);font-weight:500;font-style:italic;
font-size:clamp(24px,3.4vw,38px);line-height:1.35;color:var(--white);text-wrap:balance;
}
.quote-slab .quote-attr{position:relative;z-index:2;text-align:center;margin-top:28px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-bright);}
/* ---------- MASONRY-STYLE PORTFOLIO (bento irrégulier) ---------- */
.portfolio-masonry{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:130px;gap:16px;grid-auto-flow:dense;}
.portfolio-masonry .portfolio-item{aspect-ratio:auto;}
.portfolio-masonry .p-1x1{grid-column:span 2;grid-row:span 2;}
.portfolio-masonry .p-2x1{grid-column:span 2;grid-row:span 1;}
.portfolio-masonry .p-1x2{grid-column:span 2;grid-row:span 3;}
.portfolio-masonry .p-2x2{grid-column:span 4;grid-row:span 3;}
@media (max-width:900px){
.portfolio-masonry{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;}
.portfolio-masonry .p-2x2{grid-column:span 2;grid-row:span 2;}
.portfolio-masonry .p-1x2{grid-column:span 1;grid-row:span 2;}
}
/* ---------- MAGNETIC BUTTON ---------- */
.magnetic{position:relative;transition:transform .25s var(--ease);}
/* ---------- CTA DIFFÉRENCIÉS ---------- */
.btn-quick{
background:transparent;border:1.5px solid var(--orange);color:var(--orange);
}
.btn-quick:hover{background:var(--orange);color:var(--white);transform:translateY(-2px);}
.on-light .btn-dark.magnetic:hover, .nav-cta.magnetic:hover{transform:translateY(-2px);}
/* ---------- MODALE "DÉMARRER UN PROJET" ---------- */
.modal-overlay{
position:fixed;inset:0;z-index:9600;background:rgba(15,10,35,.72);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
display:flex;align-items:center;justify-content:center;padding:20px;
opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.modal-overlay.active{opacity:1;pointer-events:auto;}
.modal-box{
background:var(--navy);border:1px solid var(--line);border-radius:12px;
max-width:460px;width:100%;padding:36px 32px;position:relative;
transform:translateY(18px) scale(.97);transition:transform .3s var(--ease);
max-height:90vh;overflow-y:auto;
}
.modal-overlay.active .modal-box{transform:translateY(0) scale(1);}
.modal-close{position:absolute;right:16px;top:16px;background:none;border:none;color:var(--text-dim);font-size:22px;cursor:pointer;line-height:1;padding:6px;}
.modal-close:hover{color:var(--white);}
.modal-box h3{font-family:var(--font-display);font-size:24px;margin:0 0 8px;color:var(--white);}
.modal-box .modal-sub{color:var(--text-dim);font-size:14px;margin:0 0 26px;}
.modal-box .form-field{margin-bottom:20px;}
.modal-chip-group{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.modal-chip{
font-size:12.5px;font-weight:600;padding:9px 14px;border-radius:20px;
border:1px solid rgba(255,255,255,.22);background:transparent;color:var(--text-dim);
cursor:pointer;transition:all .18s ease;
}
.modal-chip.selected{background:var(--orange);border-color:var(--orange);color:var(--white);}
/* ---------- BIG STAT SLAB (chiffre + image duotone) ---------- */
.stat-slab{position:relative;overflow:hidden;border-radius:var(--radius-md);padding:36px 28px;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;}
.stat-slab .slab-bg{position:absolute;inset:0;z-index:0;}
.stat-slab .slab-bg .photo-duotone,.stat-slab .slab-bg .photo-slot{position:absolute;inset:0;border-radius:0;}
.stat-slab .slab-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(15,10,35,.88), rgba(15,10,35,.25));}
.stat-slab .stat-slab-num{position:relative;z-index:2;font-family:var(--font-display);font-weight:600;font-size:44px;color:#fff;line-height:1;}
.stat-slab .stat-slab-label{position:relative;z-index:2;color:var(--text-dim);font-size:13px;margin-top:8px;}
/* ---------- SIGNATURE SCROLL MARQUEE (mots défilants) ---------- */
.word-marquee{overflow:hidden;padding:20px 0;background:var(--navy-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.word-marquee-track{display:flex;gap:40px;width:max-content;animation:scroll-x 26s linear infinite;}
.word-marquee-track span{
font-family:var(--font-display);font-style:italic;font-weight:500;font-size:22px;color:var(--text-dim-soft);
display:flex;align-items:center;gap:40px;white-space:nowrap;
}
.word-marquee-track span::after{content:"◆";color:var(--orange);font-size:12px;margin-left:40px;}