/* ===== TRIADE CHARTE HIVESIA v1.0 (officielle) =====
Navy #0F2647 (primaire) · Or Sahélien #C68821 (accent étendu)
Vert Impact #1F4D2C (croissance) · Gris Conseil #4A5A6E
==================================================== */
:root{
/* Fond — dark navy-tinted (cousin du navy charte) */
--bg:#070D18;
--bg-2:#0B1424;
--panel:#0E1A2D;
--panel-2:#13223A;
--ink:#F0EEE5; /* cream papier (warm white) */
--ink-2:#C9D0DC;
--mute:#8794A4; /* gris conseil version dark */
--line:rgba(255,255,255,.07);
--line-2:rgba(255,255,255,.14);
/* Navy charte */
--navy:#0F2647;
--navy-2:#173764;
--navy-deep:#081830;
/* Or Sahélien — accent étendu charte v1.0
"Souveraineté économique et ancrage ouest-africain" */
--gold:#C68821;
--gold-2:#E0A848; /* variante claire pour hover */
--gold-deep:#A06F19; /* variante terre cuite pour dégradés */
--gold-glow:#F2C172; /* glow chaud pour italiques */
/* Vert Impact charte — réservé live / success / croissance */
--green:#1F4D2C;
--green-2:#2A6B3C;
--green-bright:#3DA060;
--green-glow:#5ACF8F;
--gray-l:#4A5A6E;
/* Aliases — le vert reste pour les indicateurs live/ok */
--teal:var(--green-bright);
--ok:var(--green-glow);
--display:"Fraunces", "Source Serif 4", Georgia, serif;
--sans:"Inter Tight", "Inter", system-ui, sans-serif;
--mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg)}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{
color:var(--ink);
font-family:var(--sans);
font-size:15.5px;line-height:1.6;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
background:
radial-gradient(1200px 700px at 80% -10%, rgba(15,38,71,.25), transparent 60%),
radial-gradient(900px 600px at -10% 30%, rgba(198,136,33,.06), transparent 60%),
var(--bg);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--green-bright);color:#fff;padding:.5rem .75rem;z-index:99}
::selection{background:var(--green-bright);color:#fff}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
/* ====== TOPBAR — fuseaux horaires ====== */
.topbar{
background:#04060a;border-bottom:1px solid var(--line);
font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--mute);
overflow:hidden;
}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;height:34px;gap:18px;min-width:0}
.topbar .live{display:flex;gap:10px;align-items:center;min-width:0;flex:1}
.topbar .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);flex-shrink:0}
.topbar .clocks{display:flex;gap:0;align-items:center;flex-wrap:wrap;overflow:hidden;text-overflow:ellipsis}
.topbar .clocks span{
display:inline-flex;align-items:center;gap:6px;
padding:0 12px;border-right:1px solid rgba(255,255,255,.08);
white-space:nowrap;color:var(--mute);line-height:1;
}
.topbar .clocks span:last-child{border-right:0}
.topbar .clocks span::after{content:"";display:none}
.topbar .locale{flex-shrink:0}
.topbar .locale a{color:var(--mute);margin-left:6px}
.topbar .locale a.active{color:var(--gold)}
@media (max-width:1100px){
.topbar .clocks span{font-size:9.5px;padding:0 8px}
.topbar .clocks span:nth-child(n+6){display:none}
}
@media (max-width:760px){
.topbar .clocks span:nth-child(n+4){display:none}
}
/* ====== NAV ====== */
.nav{
position:sticky;top:0;z-index:60;
background:rgba(7,9,12,.78);
backdrop-filter:blur(14px) saturate(150%);
border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:32px}
.brand{display:flex;align-items:center;gap:14px}
.brand{margin-left:-4px}
.brand img{
height:68px;width:auto;filter:none;
transition:transform .35s cubic-bezier(.2,.7,.2,1), filter .25s;
filter:drop-shadow(0 6px 18px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(198,136,33,.18));
}
.brand:hover img{
transform:rotate(-4deg) scale(1.04);
filter:drop-shadow(0 8px 22px rgba(0,0,0,.6)) drop-shadow(0 0 28px rgba(198,136,33,.32));
}
.nav-inner{height:88px}
.brand .bcode{
font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
color:var(--gold);padding:4px 8px;border:1px solid var(--line-2);border-radius:2px;
}
.nav nav{display:flex;gap:4px}
.nav nav a{
font-size:13.5px;color:var(--ink-2);padding:8px 14px;border-radius:3px;
letter-spacing:.005em;transition:all .15s;
}
.nav nav a:hover,.nav nav a.active{color:var(--gold);background:rgba(198,136,33,.06)}
.nav .cta{
background:var(--green-bright);color:#fff;
padding:11px 18px;border-radius:3px;letter-spacing:.02em;font-weight:500;
transition:background .2s, transform .2s;
}
.nav .cta:hover{background:var(--green-glow);transform:translateY(-1px)}
/* ====== HERO ====== */
.hero{
position:relative;min-height:92vh;
display:flex;align-items:center;
overflow:hidden;
border-bottom:1px solid var(--line);
}
.hero-bg{
position:absolute;inset:0;z-index:0;
background:
radial-gradient(700px 500px at 75% 30%, rgba(42,107,60,.18), transparent 60%),
radial-gradient(800px 600px at 20% 70%, rgba(15,38,71,.35), transparent 60%);
}
.hero-grid-bg{
position:absolute;inset:0;z-index:0;opacity:.4;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size:80px 80px;
mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.hero canvas{position:absolute;inset:0;z-index:1;opacity:.7}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:90px;padding-bottom:90px}
.hero-tag{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
padding:8px 14px;border:1px solid rgba(198,136,33,.25);border-radius:2px;
background:rgba(198,136,33,.04);margin-bottom:36px;
}
.hero-tag .pulse{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero h1{
font-family:var(--display);font-weight:300;
font-size:clamp(46px,7.6vw,108px);line-height:1.02;letter-spacing:-.025em;
margin:0 0 32px;color:var(--ink);max-width:1100px;
}
.hero h1 em{font-style:italic;font-weight:300;color:var(--gold);background:linear-gradient(180deg,#F2C172,#A06F19);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .lede{
font-size:19px;color:var(--ink-2);max-width:640px;margin:0 0 48px;line-height:1.6;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:80px}
.btn-gold{background:var(--green-bright);color:#fff;padding:15px 26px;font-size:14px;font-weight:500;
border-radius:3px;letter-spacing:.02em;transition:all .2s;display:inline-flex;align-items:center;gap:8px;
}
.btn-gold:hover{background:#E0A848;transform:translateY(-1px);box-shadow:0 10px 30px -10px rgba(198,136,33,.4)}
.btn-line{
border:1px solid var(--line-2);padding:15px 24px;font-size:14px;font-weight:500;color:var(--ink);
border-radius:3px;transition:all .2s;background:rgba(255,255,255,.02);
}
.btn-line:hover{border-color:var(--gold);color:var(--gold)}
/* hero metrics strip */
.hero-metrics{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
border-top:1px solid var(--line);padding-top:32px;max-width:1100px;
}
.hero-metrics > div{padding:0 32px;border-left:1px solid var(--line)}
.hero-metrics > div:first-child{border-left:0;padding-left:0}
.hero-metrics .v{font-family:var(--display);font-size:42px;line-height:1;color:var(--ink);font-weight:300;letter-spacing:-.02em}
.hero-metrics .v em{font-style:italic;color:var(--gold);font-size:.7em;vertical-align:super;margin-left:2px}
.hero-metrics .l{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:10px;display:block}
/* ====== PRESS STRIP — fond crème institutionnel pour logos en couleur ====== */
.press{
border-bottom:1px solid var(--line);
padding:26px 0;
}
.press-inner{display:flex;align-items:center;gap:48px;flex-wrap:wrap;justify-content:space-between}
.press-label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--mute);text-transform:uppercase}
.press-list{display:flex;gap:36px;flex-wrap:wrap;align-items:center}
.press-list span{font-family:var(--display);font-style:italic;font-size:18px;color:var(--ink-2);opacity:.7}
/* ====== SECTIONS ====== */
section{position:relative}
.sec{padding:130px 0;border-bottom:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:180px 1fr;gap:60px;margin-bottom:72px;align-items:start}
.sec-num{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--gold)}
.sec-num span{display:block;color:var(--mute);margin-top:6px;font-size:10.5px}
.sec-title{font-family:var(--display);font-weight:300;font-size:clamp(34px,4.6vw,60px);line-height:1.05;letter-spacing:-.02em;margin:0 0 18px;color:var(--ink)}
.sec-title em{font-style:italic;color:var(--gold)}
.sec-sub{font-size:18px;color:var(--ink-2);max-width:720px;margin:0;line-height:1.6}
/* ====== POSITIONING TILES ====== */
.pos-grid{
display:grid;grid-template-columns:repeat(12,1fr);gap:1px;
background:var(--line);border:1px solid var(--line);
}
.pos-grid > div,
.pos-grid > a{
background:var(--bg);padding:36px 32px;transition:background .2s;
display:block;color:inherit;text-decoration:none;
}
.pos-grid > div:hover,
.pos-grid > a:hover{background:var(--bg-2)}
.pos-grid > .span4{grid-column:span 4}
.pos-grid > .span6{grid-column:span 6}
.pos-grid > .span8{grid-column:span 8}
.pos-grid > .span12{grid-column:span 12}
.pos-grid h4{
font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
margin:0 0 18px;font-weight:500;
}
.pos-grid h3{font-family:var(--display);font-weight:300;font-size:26px;line-height:1.2;margin:0 0 12px;letter-spacing:-.01em;color:var(--ink)}
.pos-grid p{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.6}
/* ====== SERVICES ====== */
.serv{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.serv article{
grid-column:span 4;
background:linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
border:1px solid var(--line);border-radius:6px;
padding:32px 30px;
position:relative;overflow:hidden;
transition:all .25s;
}
.serv article:nth-child(4){grid-column:span 6}
.serv article:nth-child(5){grid-column:span 6}
.serv article::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
opacity:0;transition:opacity .3s;
}
.serv article:hover{border-color:var(--line-2);transform:translateY(-3px)}
.serv article:hover::before{opacity:.6}
.serv .ico{
width:44px;height:44px;border:1px solid var(--line-2);border-radius:3px;
display:flex;align-items:center;justify-content:center;
color:var(--gold);font-family:var(--mono);font-size:14px;
margin-bottom:24px;background:rgba(198,136,33,.04);
}
.serv h3{font-family:var(--display);font-weight:300;font-size:23px;line-height:1.2;margin:0 0 12px;letter-spacing:-.01em;color:var(--ink)}
.serv p{font-size:14.5px;color:var(--ink-2);margin:0 0 20px;line-height:1.6}
.serv ul{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--line)}
.serv li{font-size:13px;color:var(--mute);padding:5px 0;font-family:var(--mono);letter-spacing:.02em}
.serv li::before{content:"›";color:var(--gold);margin-right:10px}
/* ====== COMMAND CENTER ====== */
.cc{background:linear-gradient(180deg,#04060a,#0a0d12);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cc-frame{
margin-top:32px;
border:1px solid var(--line-2);border-radius:8px;overflow:hidden;
background:#05080d;
box-shadow:0 30px 80px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
}
.cc-head{
display:flex;justify-content:space-between;align-items:center;
padding:14px 20px;background:#080b10;border-bottom:1px solid var(--line);
font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--mute);
}
.cc-head .dots{display:flex;gap:6px}
.cc-head .dots span{width:9px;height:9px;border-radius:50%;background:#1d2530}
.cc-head .dots span:nth-child(1){background:#7e3030}
.cc-head .dots span:nth-child(2){background:#7e6730}
.cc-head .dots span:nth-child(3){background:#347e30}
.cc-head .tag{color:var(--gold)}
.cc-body{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line)}
.cc-cell{background:#05080d;padding:24px}
.cc-cell h5{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin:0 0 14px;font-weight:500}
.cc-stat{font-family:var(--display);font-weight:300;font-size:34px;line-height:1;color:var(--ink);margin-bottom:6px;letter-spacing:-.01em}
.cc-stat em{color:var(--gold);font-style:normal}
.cc-delta{font-family:var(--mono);font-size:11px;color:var(--ok)}
.cc-delta.neg{color:#cf5a5a}
.cc-rows{margin-top:14px;font-family:var(--mono);font-size:11.5px}
.cc-rows .row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dotted var(--line);color:var(--ink-2)}
.cc-rows .row:last-child{border-bottom:0}
.cc-rows .row b{color:var(--gold);font-weight:500}
/* mini bar chart */
.bars{display:flex;align-items:flex-end;gap:6px;height:80px;margin-top:14px}
.bars span{flex:1;background:linear-gradient(180deg,var(--gold),rgba(198,136,33,.2));border-radius:1px;min-height:6px}
/* sparkline */
.spark{margin-top:14px;height:60px;width:100%}
.spark path{fill:none;stroke:var(--gold);stroke-width:1.5}
.spark .area{fill:rgba(198,136,33,.12);stroke:none}
/* === LIVE COMMAND CENTER === */
.cc-cell h5{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.cc-src{font-size:9.5px;color:var(--mute);letter-spacing:.16em;font-weight:400;opacity:.7}
.live-dot{
display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);
box-shadow:0 0 10px var(--ok);margin-right:6px;vertical-align:middle;
animation:livepulse 1.4s ease-in-out infinite;
}
.live-dot.err{background:#cf5a5a;box-shadow:0 0 10px #cf5a5a;animation:none}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.3}}
.cc-rows .row.loading,.cc-feed li.loading{
color:var(--mute);font-style:italic;letter-spacing:.04em;
}
.cc-feed{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:11.5px}
.cc-feed li{
display:flex;flex-direction:column;gap:4px;
padding:9px 0;border-bottom:1px dotted var(--line);
}
.cc-feed li:last-child{border-bottom:0}
.cc-feed .ftitle{color:var(--ink-2);line-height:1.4;font-size:11.5px;letter-spacing:.02em;text-transform:none}
.cc-feed .fmeta{display:flex;justify-content:space-between;font-size:10px;color:var(--mute);letter-spacing:.1em}
.cc-feed .fmeta b{color:var(--gold);font-weight:500}
.cc-feed a{color:inherit;display:block}
.cc-feed a:hover .ftitle{color:var(--gold)}
.cc-foot{
margin-top:14px;padding-top:10px;border-top:1px solid var(--line);
font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase;
}
.cc-rows b.up{color:var(--ok)}
.cc-rows b.down{color:#cf5a5a}
.cc-rows .hint{
font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
color:var(--mute);text-transform:uppercase;margin-left:6px;
padding:1px 5px;border:1px solid var(--line);border-radius:2px;
}
.cc-rows .row a:hover{color:var(--gold)!important}
/* country filter chips */
.cc-filter{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.chip{
font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
color:var(--ink-2);background:transparent;border:1px solid var(--line);
padding:5px 9px;border-radius:2px;cursor:pointer;transition:all .15s;
text-transform:uppercase;
}
.chip:hover{border-color:var(--gold);color:var(--gold)}
.chip.active{background:rgba(198,136,33,.14);border-color:var(--gold);color:var(--gold)}
/* World Bank table */
.wb-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11.5px}
.wb-table thead th{
text-align:left;color:var(--mute);font-weight:400;
font-size:10px;letter-spacing:.16em;text-transform:uppercase;
padding:6px 4px;border-bottom:1px solid var(--line);
}
.wb-table thead th:nth-child(3),.wb-table thead th:nth-child(4){text-align:right}
.wb-table tbody td{
padding:9px 4px;border-bottom:1px dotted var(--line);color:var(--ink-2);
}
.wb-table tbody td:nth-child(3),.wb-table tbody td:nth-child(4){text-align:right;font-weight:500}
.wb-table tbody tr:last-child td{border-bottom:0}
.wb-table td.loading{color:var(--mute);font-style:italic;text-align:center}
.wb-table .pos{color:var(--ok)}
.wb-table .neg{color:#cf5a5a}
.wb-table .iso{color:var(--gold);font-weight:500}
/* GDELT Geo overlay on map */
.geo-overlay{
position:absolute;inset:0;width:100%;height:100%;
pointer-events:none;z-index:1;overflow:visible;
}
.geo-overlay circle{
fill:rgba(255,180,80,.35);
stroke:rgba(255,200,100,.7);
stroke-width:.08;
animation:geopulse 3s ease-in-out infinite;
}
@keyframes geopulse{
0%,100%{opacity:.85}
50%{opacity:.4}
}
.map-legend .sw.geo-l{
background:radial-gradient(circle,rgba(255,180,80,.7),rgba(255,180,80,0) 70%);
border:0;width:14px;height:14px;border-radius:50%;
}
/* Event tags (jihad, coup, election, attack) */
.evtag{
display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
padding:2px 6px;border-radius:2px;margin-right:8px;vertical-align:middle;
border:1px solid currentColor;
}
.evtag.jihad{color:#e16a4e;background:rgba(225,106,78,.10)}
.evtag.coup{color:#cf5a5a;background:rgba(207,90,90,.10)}
.evtag.élection,.evtag.election{color:#5cb1d6;background:rgba(92,177,214,.10)}
.evtag.attaque{color:#e09850;background:rgba(224,152,80,.10)}
.evtag.alerte{color:var(--gold);background:rgba(198,136,33,.10)}
/* ====== AFRICA FOCUS ====== */
.africa{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.africa-map{position:relative;background:linear-gradient(180deg,var(--panel),var(--bg));border:1px solid var(--line);border-radius:6px;padding:24px;min-height:560px;overflow:hidden}
.africa-stage{position:relative;width:100%;aspect-ratio:1/1;max-width:560px;margin:0 auto}
#africa-svg-mount{position:absolute;inset:0;width:100%;height:100%}
#africa-svg-mount svg{width:100%;height:100%;display:block}
/* recolor injected SVG */
/* Base : tous les pays africains, très subtil */
#africa-svg-mount .land{
fill:rgba(198,136,33,.06)!important;
stroke:rgba(255,255,255,.10)!important;
stroke-width:.5!important;
transition:fill .25s;
}
#africa-svg-mount .circle{opacity:0!important}
/* Tier · VEILLE — pays sous monitoring stratégique */
#africa-svg-mount #td,
#africa-svg-mount #cm,
#africa-svg-mount #cg,
#africa-svg-mount #ao,
#africa-svg-mount #ug,
#africa-svg-mount #tz,
#africa-svg-mount #rw,
#africa-svg-mount #bi,
#africa-svg-mount #et,
#africa-svg-mount #er,
#africa-svg-mount #dj,
#africa-svg-mount #so,
#africa-svg-mount #ss,
#africa-svg-mount #sd,
#africa-svg-mount #ma,
#africa-svg-mount #dz,
#africa-svg-mount #tn,
#africa-svg-mount #ly,
#africa-svg-mount #eg,
#africa-svg-mount #cf,
#africa-svg-mount #ga,
#africa-svg-mount #gq{
fill:rgba(120,140,170,.10)!important;
stroke:rgba(180,200,220,.22)!important;
stroke-width:.5!important;
}
/* Tier · OPÉRATION — toute l'Afrique de l'Ouest + RDC + Kenya (or dense) */
#africa-svg-mount #sl, /* Sierra Leone — HQ */
#africa-svg-mount #sn, /* Sénégal */
#africa-svg-mount #gn, /* Guinée */
#africa-svg-mount #lr, /* Liberia */
#africa-svg-mount #ci, /* Côte d'Ivoire */
#africa-svg-mount #ml, /* Mali */
#africa-svg-mount #bf, /* Burkina Faso */
#africa-svg-mount #ne, /* Niger */
#africa-svg-mount #gh, /* Ghana */
#africa-svg-mount #tg, /* Togo */
#africa-svg-mount #bj, /* Bénin */
#africa-svg-mount #ng, /* Nigeria */
#africa-svg-mount #mr, /* Mauritanie */
#africa-svg-mount #gm, /* Gambie */
#africa-svg-mount #gw, /* Guinée-Bissau */
#africa-svg-mount #cv, /* Cap-Vert */
#africa-svg-mount #cd, /* RDC */
#africa-svg-mount #ke{ /* Kenya */
fill:rgba(198,136,33,.36)!important;
stroke:rgba(242,193,114,.9)!important;
stroke-width:.7!important;
}
#africa-svg-mount .land:hover{
fill:rgba(198,136,33,.55)!important;
cursor:default;
}
/* FLOW LINES */
.flows{
position:absolute;inset:0;width:100%;height:100%;
pointer-events:none;z-index:2;overflow:visible;
}
.flow{
fill:none;
stroke:rgba(198,136,33,.55);
stroke-width:.15;
stroke-linecap:round;
stroke-dasharray:1.4 1;
animation:dash 4s linear infinite;
vector-effect:non-scaling-stroke;
}
.flow.main{
stroke:rgba(242,193,114,.95);
stroke-width:.32;
stroke-dasharray:2 1.4;
filter:drop-shadow(0 0 1px rgba(198,136,33,.6));
}
@keyframes dash{
to{stroke-dashoffset:-10}
}
/* LEGEND */
.map-legend{
display:flex;flex-wrap:wrap;gap:18px 28px;
margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
color:var(--ink-2);text-transform:uppercase;
}
.map-legend span{display:inline-flex;align-items:center;gap:8px}
.map-legend small{color:var(--mute);letter-spacing:.06em;margin-left:4px;text-transform:none;font-size:11px}
.map-legend .sw{width:14px;height:10px;border-radius:1px;display:inline-block}
.map-legend .sw.op{background:rgba(198,136,33,.55);border:1px solid rgba(242,193,114,.9)}
.map-legend .sw.west{background:rgba(198,136,33,.28);border:1px solid rgba(198,136,33,.55)}
.map-legend .sw.veille{background:rgba(120,140,170,.18);border:1px solid rgba(180,200,220,.35)}
.map-legend .sw.flow-l{
background:none;border:0;height:0;border-top:1.5px dashed rgba(198,136,33,.85);width:18px;
}
/* Special pin variants */
.pin-dot.paris{
width:9px;height:9px;background:#fff;
box-shadow:0 0 12px rgba(255,255,255,.7);
}
.pin-dot.paris::after{
opacity:1;color:#fff;border-color:rgba(255,255,255,.3);
background:rgba(7,9,12,.85);
}
.pin-dot.paris::before{border-color:rgba(255,255,255,.6)}
.pins{position:absolute;inset:0;pointer-events:none}
.pin-dot{
position:absolute;width:8px;height:8px;border-radius:50%;
background:var(--gold);box-shadow:0 0 12px rgba(198,136,33,.7);
transform:translate(-50%,-50%);pointer-events:auto;cursor:default;
}
.pin-dot::before{
content:"";position:absolute;inset:-6px;border-radius:50%;
border:1px solid var(--gold);opacity:.5;
animation:pinring 2.2s infinite;
}
.pin-dot::after{
content:attr(data-label);
position:absolute;left:14px;top:50%;transform:translateY(-50%);
font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
color:var(--ink-2);white-space:nowrap;
background:rgba(7,9,12,.85);padding:3px 8px;border:1px solid var(--line-2);border-radius:2px;
opacity:0;transition:opacity .2s;pointer-events:none;
}
.pin-dot:hover::after{opacity:1}
.pin-dot.hq{width:11px;height:11px;background:var(--gold);box-shadow:0 0 18px rgba(198,136,33,.9)}
.pin-dot.hq::after{opacity:1;color:var(--gold);border-color:rgba(198,136,33,.4)}
@keyframes pinring{
0%{transform:scale(1);opacity:.6}
100%{transform:scale(2.6);opacity:0}
}
.africa-tag{position:absolute;top:24px;left:24px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--gold);background:rgba(198,136,33,.08);padding:5px 10px;border:1px solid rgba(198,136,33,.2);border-radius:2px}
.africa-info h3{font-family:var(--display);font-weight:300;font-size:36px;line-height:1.1;margin:0 0 18px;letter-spacing:-.015em}
.africa-info h3 em{color:var(--gold);font-style:italic}
.africa-info p{font-size:16px;color:var(--ink-2);line-height:1.65;margin:0 0 28px}
.africa-info .facets{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.africa-info .facets > div{background:var(--bg);padding:18px 20px}
.africa-info .facets b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--gold);margin-bottom:6px;font-weight:500}
.africa-info .facets span{font-size:14px;color:var(--ink-2)}
/* ====== INSIGHTS — fiches de lecture ergonomiques ====== */
.insights{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.insight{
background:linear-gradient(180deg,var(--panel),#0c1118);
border:1px solid var(--line);border-radius:8px;
padding:0;
transition:border-color .25s, transform .25s;
display:flex;flex-direction:column;
overflow:hidden;cursor:pointer;
text-decoration:none;color:inherit;
}
.insight:hover{border-color:rgba(198,136,33,.45);transform:translateY(-4px)}
/* Header avec chip catégorie + temps de lecture */
.insight-head{
display:flex;justify-content:space-between;align-items:center;
padding:22px 26px 16px;
border-bottom:1px dotted var(--line);
}
.ins-cat{
font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
color:var(--gold);background:rgba(198,136,33,.08);
padding:5px 10px;border:1px solid rgba(198,136,33,.22);border-radius:2px;
text-transform:uppercase;
}
.ins-cat.brief{color:#5cb1d6;background:rgba(92,177,214,.08);border-color:rgba(92,177,214,.22)}
.ins-cat.analyse{color:var(--gold)}
.ins-cat.note{color:#5acf8f;background:rgba(242,193,114,.08);border-color:rgba(242,193,114,.22)}
.ins-time{
font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
color:var(--mute);display:inline-flex;align-items:center;gap:6px;
}
.ins-time::before{
content:"";width:5px;height:5px;border-radius:50%;background:var(--mute);
}
/* Corps */
.insight-body{padding:24px 26px 6px;flex:1;display:flex;flex-direction:column;gap:14px}
.insight h4{
font-family:var(--display);font-weight:300;
font-size:24px;line-height:1.25;letter-spacing:-.01em;
margin:0;color:var(--ink);
}
.insight h4 em{font-style:italic;color:var(--gold)}
.ins-excerpt{
font-size:14.5px;color:var(--ink-2);margin:0;
line-height:1.65;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
overflow:hidden;
}
/* Footer fiche */
.insight-foot{
display:flex;justify-content:space-between;align-items:center;
padding:18px 26px;margin-top:14px;
border-top:1px solid var(--line);background:rgba(255,255,255,.015);
}
.ins-author{display:flex;align-items:center;gap:10px;min-width:0}
.ins-avatar{
width:30px;height:30px;border-radius:50%;
background:linear-gradient(135deg,var(--navy),var(--gold-2));
color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.05em;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
border:1px solid rgba(255,255,255,.1);
}
.ins-author-info{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.ins-author-info b{font-size:12.5px;color:var(--ink);font-weight:500;letter-spacing:0}
.ins-author-info span{font-family:var(--mono);font-size:10px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase}
.ins-read{
font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
color:var(--gold);display:inline-flex;align-items:center;gap:6px;
transition:transform .2s;white-space:nowrap;
}
.insight:hover .ins-read{transform:translateX(4px)}
/* FEATURED — fiche grand format */
.insight-feature{
display:grid;grid-template-columns:1.35fr 1fr;
margin-bottom:0;
}
.insight-feature .feat-left{display:flex;flex-direction:column}
.insight-feature .insight-head{padding:26px 36px 18px}
.insight-feature .insight-body{padding:26px 36px;gap:18px}
.insight-feature .ins-ref{
font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
color:var(--mute);text-transform:uppercase;margin-bottom:-6px;
}
.insight-feature h3{
font-family:var(--display);font-weight:300;
font-size:clamp(28px,3.4vw,42px);line-height:1.1;
letter-spacing:-.015em;margin:0;color:var(--ink);
}
.insight-feature h3 em{font-style:italic;color:var(--gold)}
.insight-feature .ins-excerpt{
-webkit-line-clamp:unset;display:block;
font-size:16px;color:var(--ink-2);
}
.ins-key{
list-style:none;margin:6px 0 0;padding:14px 0 0;
border-top:1px solid var(--line);
display:flex;flex-direction:column;gap:8px;
}
.ins-key li{
font-family:var(--mono);font-size:12px;letter-spacing:.04em;
color:var(--ink-2);padding-left:18px;position:relative;
}
.ins-key li::before{
content:"›";color:var(--gold);position:absolute;left:0;top:-1px;
}
.insight-feature .insight-foot{padding:22px 36px;margin-top:0}
/* Cover side */
.feat-right{
background:
radial-gradient(500px 250px at 70% 30%, rgba(198,136,33,.22), transparent 70%),
linear-gradient(135deg,#0F2647 0%, #0a0d12 100%);
position:relative;overflow:hidden;
min-height:360px;
border-left:1px solid var(--line);
}
.feat-cover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:32px 36px}
.feat-cover-tag{
font-family:var(--mono);font-size:11px;letter-spacing:.18em;
color:rgba(255,255,255,.65);text-transform:uppercase;
}
.feat-num{
font-family:var(--display);font-style:italic;font-weight:300;
font-size:clamp(120px,18vw,200px);line-height:.85;
color:transparent;
-webkit-text-stroke:1px rgba(198,136,33,.4);
align-self:flex-end;letter-spacing:-.04em;
}
.feat-cover-meta{
display:flex;justify-content:space-between;
font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
color:rgba(255,255,255,.5);text-transform:uppercase;
}
@media (max-width:900px){
.insight-feature{grid-template-columns:1fr}
.feat-right{min-height:220px;border-left:0;border-top:1px solid var(--line)}
}
/* ====== ABOUT TEASER ====== */
.about-teaser{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about-teaser h2{font-family:var(--display);font-weight:300;font-size:clamp(32px,3.6vw,48px);line-height:1.1;margin:0 0 22px;letter-spacing:-.015em}
.about-teaser h2 em{color:var(--gold);font-style:italic}
.about-teaser p{font-size:17px;color:var(--ink-2);line-height:1.65;margin:0 0 18px}
.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.about-stats > div{background:var(--bg);padding:28px 26px}
.about-stats .n{font-family:var(--display);font-weight:300;font-size:42px;line-height:1;color:var(--gold);letter-spacing:-.01em}
.about-stats .l{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--mute);text-transform:uppercase;margin-top:10px;display:block}
/* ====== CTA BAND ====== */
.cta-band{
background:linear-gradient(180deg,#0a0d12,#050709);
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
padding:90px 0;text-align:center;position:relative;overflow:hidden;
}
.cta-band::before{
content:"";position:absolute;inset:0;
background:radial-gradient(600px 300px at 50% 50%, rgba(198,136,33,.08),transparent 70%);
}
.cta-band > .wrap{position:relative}
.cta-band h2{font-family:var(--display);font-weight:300;font-size:clamp(32px,4.4vw,56px);line-height:1.1;margin:0 0 22px;letter-spacing:-.02em}
.cta-band h2 em{color:var(--gold);font-style:italic}
.cta-band p{font-size:17px;color:var(--ink-2);max-width:560px;margin:0 auto 36px}
/* ====== FOOTER (simple : adresse + tel + carte) ====== */
.foot-simple{
background:linear-gradient(180deg,#06080c 0%,#03050a 100%);
border-top:1px solid var(--line);
position:relative;
}
.foot-simple::before{
content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
width:60%;height:1px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
opacity:.4;
}
.foot-simple-grid{
display:grid;grid-template-columns:1fr 1fr;gap:24px;
max-width:1280px;margin:0 auto;padding:60px 32px;
}
.ofc-simple{
background:linear-gradient(180deg,var(--panel),#0a0e14);
border:1px solid var(--line);border-radius:8px;
overflow:hidden;display:flex;flex-direction:column;
transition:border-color .25s;
}
.ofc-simple:hover{border-color:rgba(198,136,33,.4)}
.ofc-simple-info{padding:28px 30px 24px}
.ofc-simple .ofc-badge{margin-bottom:18px}
.ofc-simple h3{
font-family:var(--display);font-weight:300;
font-size:32px;line-height:1;letter-spacing:-.02em;
margin:0 0 16px;color:var(--ink);
}
.ofc-simple-addr{
font-family:var(--display);font-size:16px;line-height:1.6;
color:var(--ink-2);margin:0 0 18px;font-weight:300;
}
.ofc-simple-contact{
display:flex;flex-direction:column;gap:8px;
font-family:var(--mono);font-size:13px;
}
.ofc-simple-contact a{
color:var(--gold);display:inline-flex;align-items:center;gap:8px;
transition:opacity .15s;
}
.ofc-simple-contact a:hover{opacity:.7}
.ofc-simple-contact a::before{
content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);
}
.ofc-simple-map{
width:100%;height:240px;
border:0;border-top:1px solid var(--line);
filter:invert(92%) hue-rotate(180deg) brightness(.95) contrast(1.05);
}
.foot-simple-bottom{
display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
padding:18px 32px;
border-top:1px solid var(--line);background:#020407;
font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
color:var(--mute);text-transform:uppercase;
}
.foot-simple-bottom .brand-mini{display:flex;align-items:center;gap:14px}
.foot-simple-bottom .brand-mini img{height:22px;filter:brightness(0) invert(1);opacity:.8}
@media (max-width:880px){
.foot-simple-grid{grid-template-columns:1fr;padding:40px 22px}
.foot-simple-bottom{padding:16px 22px;flex-direction:column;align-items:flex-start}
}
/* ====== FOOTER (premium — conservé, peut servir ailleurs) ====== */
.foot{
background:linear-gradient(180deg,#06080c 0%,#03050a 100%);
border-top:1px solid var(--line);
position:relative;overflow:hidden;
padding:0;
}
.foot::before{
content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
width:60%;height:1px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
opacity:.4;
}
/* TOP — claim editorial */
.foot-top{padding:90px 0 70px;border-bottom:1px solid var(--line);position:relative}
.foot-top::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(700px 300px at 70% 30%, rgba(198,136,33,.08), transparent 70%);
}
.foot-top-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:80px;align-items:center;position:relative;z-index:1}
.foot-claim{
font-family:var(--display);font-weight:300;
font-size:clamp(34px,4.4vw,56px);line-height:1.08;letter-spacing:-.02em;
margin:18px 0 18px;color:var(--ink);
}
.foot-claim em{font-style:italic;color:var(--gold)}
.foot-claim-sub{font-size:17px;color:var(--ink-2);max-width:560px;margin:0;line-height:1.6}
.foot-cta-block{display:flex;flex-direction:column;gap:14px;align-items:stretch;min-width:280px}
.foot-cta-block .btn-gold,.foot-cta-block .btn-line{text-align:center;justify-content:center;display:inline-flex;align-items:center;gap:8px}
/* OFFICES — 2 cards prominentes */
.foot-offices{
display:grid;grid-template-columns:1fr 1fr;gap:24px;
padding:60px 32px;max-width:1280px;margin:0 auto;
}
.ofc-card{
background:linear-gradient(180deg,var(--panel),#0a0e14);
border:1px solid var(--line);border-radius:8px;
padding:36px 36px 32px;
position:relative;overflow:hidden;
transition:border-color .25s, transform .25s;
}
.ofc-card:hover{border-color:rgba(198,136,33,.4);transform:translateY(-3px)}
.ofc-card::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
opacity:.5;
}
.ofc-badge{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
color:var(--gold);background:rgba(198,136,33,.06);
padding:6px 12px;border:1px solid rgba(198,136,33,.22);border-radius:2px;
margin-bottom:24px;
}
.hq-tag{
font-size:9.5px;background:var(--gold);color:#0b0d11;
padding:2px 6px;border-radius:1px;letter-spacing:.18em;font-weight:600;
}
.ofc-card h3{
font-family:var(--display);font-weight:300;
font-size:38px;line-height:1;letter-spacing:-.02em;
margin:0 0 18px;color:var(--ink);
}
.ofc-addr{
font-family:var(--display);font-size:17px;line-height:1.6;
color:var(--ink-2);margin:0 0 28px;font-weight:300;
}
.ofc-meta{
display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;
background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;
}
.ofc-meta > div{
background:#0a0e14;padding:14px 16px;
display:flex;flex-direction:column;gap:6px;min-width:0;
}
.ofc-meta b{
font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
color:var(--mute);text-transform:uppercase;font-weight:500;
}
.ofc-meta a,.ofc-meta span{
font-size:12.5px;color:var(--ink-2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ofc-meta a:hover{color:var(--gold)}
/* NAV grid */
.foot-nav{
display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:48px;
padding:30px 32px 70px;max-width:1280px;margin:0 auto;
}
.foot-nav h6{
font-family:var(--mono);font-size:11px;letter-spacing:.2em;
color:var(--gold);text-transform:uppercase;margin:0 0 22px;font-weight:500;
}
.foot-nav a,.foot-nav p{
font-size:13.5px;color:var(--ink-2);line-height:2;display:block;
}
.foot-nav a:hover{color:var(--gold)}
.foot-brand-col img{height:34px;width:auto;filter:brightness(0) invert(1);margin-bottom:20px;display:block}
.foot-brand-col p{color:var(--mute);font-size:13px;line-height:1.65;max-width:300px;margin:0 0 24px}
.foot-social{display:flex;gap:6px;flex-wrap:wrap}
.foot-social a{
font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
border:1px solid var(--line);padding:6px 12px;border-radius:2px;
color:var(--ink-2);line-height:1;display:inline-flex;
transition:all .15s;
}
.foot-social a:hover{border-color:var(--gold);color:var(--gold);background:rgba(198,136,33,.04)}
/* BOTTOM bar */
.foot-bottom{
display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
padding:22px 32px;
border-top:1px solid var(--line);background:#020407;
font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--mute);
text-transform:uppercase;
}
.foot-bottom .foot-meta{color:rgba(255,255,255,.32)}
.foot-bottom a{color:var(--mute)}
.foot-bottom a:hover{color:var(--gold)}
.foot-legal-row{display:flex;gap:18px;flex-wrap:wrap}
@media (max-width:900px){
.foot-top{padding:60px 22px 50px}
.foot-top-inner{grid-template-columns:1fr;gap:32px}
.foot-offices{grid-template-columns:1fr;padding:40px 22px}
.ofc-meta{grid-template-columns:1fr}
.foot-nav{grid-template-columns:1fr 1fr;gap:36px;padding:24px 22px 50px}
.foot-bottom{padding:18px 22px;flex-direction:column;align-items:flex-start}
}
/* ====== REVEAL ====== */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease, transform .8s ease}
.reveal.on{opacity:1;transform:none}
/* ====== RESPONSIVE ====== */
@media (max-width:1024px){
.sec-head{grid-template-columns:1fr;gap:24px}
.africa{grid-template-columns:1fr;gap:40px}
.about-teaser{grid-template-columns:1fr;gap:40px}
.cc-body{grid-template-columns:1fr}
.serv article,.serv article:nth-child(4),.serv article:nth-child(5){grid-column:span 12}
.insights{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr 1fr}
.pos-grid > .span4,.pos-grid > .span6,.pos-grid > .span8{grid-column:span 12}
.hero-metrics{grid-template-columns:1fr 1fr}
.hero-metrics > div{padding:16px 0;border-left:0;border-top:1px solid var(--line)}
.hero-metrics > div:first-child{border-top:0}
}
@media (max-width:720px){
.nav nav{display:none}
.sec{padding:80px 0}
.wrap{padding:0 22px}
.foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
*{animation:none!important;transition:none!important}
.reveal{opacity:1;transform:none}
}
/* ============================================================
DYNAMIQUE — micro-interactions, tilt 3D, lueurs au survol
============================================================ */
/* Tuiles positionnement : lueur or qui suit la souris */
.pos-grid > div{
position:relative;overflow:hidden;
transition:transform .35s cubic-bezier(.2,.7,.2,1), background .25s;
transform-style:preserve-3d;
}
.pos-grid > div::after{
content:"";position:absolute;inset:0;
background:radial-gradient(280px 200px at var(--mx,50%) var(--my,50%),
rgba(198,136,33,.10), transparent 60%);
opacity:0;transition:opacity .25s;pointer-events:none;
}
.pos-grid > div:hover::after{opacity:1}
.pos-grid > div::before{
content:"";position:absolute;left:0;right:0;top:0;height:2px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
transform:scaleX(0);transform-origin:left;transition:transform .5s;
}
.pos-grid > div:hover::before{transform:scaleX(1)}
/* Services articles — tilt + glow */
.serv article{
transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .35s;
transform-style:preserve-3d;
}
.serv article::after{
content:"";position:absolute;inset:0;
background:radial-gradient(320px 240px at var(--mx,50%) var(--my,50%),
rgba(198,136,33,.07), transparent 60%);
opacity:0;transition:opacity .25s;pointer-events:none;border-radius:6px;
}
.serv article:hover::after{opacity:1}
/* Article featured — Gestion de projet stratégique */
.serv article.featured{
grid-column:span 12;
background:
radial-gradient(800px 300px at 80% 20%, rgba(198,136,33,.10), transparent 60%),
linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
border:1px solid rgba(198,136,33,.25);
padding:42px 44px;
position:relative;
}
.serv article.featured::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold) 70%,transparent);
opacity:.6;
}
.serv article.featured .ico{
background:rgba(198,136,33,.10);border-color:var(--gold);color:var(--gold);
width:52px;height:52px;font-size:15px;
}
.serv article.featured h3{font-size:28px;letter-spacing:-.015em}
.serv article.featured p{font-size:15.5px;max-width:760px}
.serv article.featured ul{
display:grid;grid-template-columns:repeat(2,1fr);gap:0 30px;
border-top:1px solid var(--line);padding-top:20px;
}
/* Flow pipeline visuel sous l'article featured */
.serv-flow{
display:flex;align-items:center;gap:14px;margin-top:28px;
padding-top:24px;border-top:1px dotted var(--line);
font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--mute);flex-wrap:wrap;
}
.serv-flow span{
display:inline-flex;align-items:center;gap:10px;
padding:8px 14px;border:1px solid var(--line-2);border-radius:2px;
background:rgba(198,136,33,.04);color:var(--ink-2);
position:relative;transition:all .25s;
}
.serv-flow span:hover{
border-color:var(--gold);color:var(--gold);
background:rgba(198,136,33,.10);transform:translateY(-2px);
box-shadow:0 8px 24px -10px rgba(198,136,33,.4);
}
.serv-flow span:not(:last-child)::after{
content:"→";position:absolute;right:-16px;top:50%;transform:translateY(-50%);
color:var(--gold);opacity:.5;font-family:var(--sans);
}
/* Hero metrics — compteurs animés en lueur */
.hero-metrics .v{
font-variant-numeric:tabular-nums;
display:inline-block;
background:linear-gradient(180deg,#fff 0%,#7BDFA0 65%,#1F4D2C 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
.hero-metrics .v em{
-webkit-text-fill-color:var(--gold);color:var(--gold);
background:none;
}
.hero-metrics > div{
transition:transform .3s;
}
.hero-metrics > div:hover{transform:translateY(-2px)}
.hero-metrics > div:hover .v em{animation:wiggle .5s}
@keyframes wiggle{
0%,100%{transform:translateY(0) rotate(0)}
50%{transform:translateY(-4px) rotate(8deg)}
}
/* Magnetic CTA — transitions plus douces */
.btn-gold,.nav .cta{
transition:transform .25s cubic-bezier(.2,.7,.2,1), background .2s, box-shadow .25s;
}
/* Insights cards — tilt */
.insight{
transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .35s;
transform-style:preserve-3d;position:relative;
}
.insight::after{
content:"";position:absolute;inset:0;
background:radial-gradient(320px 240px at var(--mx,50%) var(--my,50%),
rgba(198,136,33,.06), transparent 60%);
opacity:0;transition:opacity .25s;pointer-events:none;border-radius:8px;
}
.insight:hover::after{opacity:1}
/* Hero pulse plus marqué */
.hero-tag .pulse{animation:heroPulse 1.8s ease-in-out infinite}
@keyframes heroPulse{
0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(198,136,33,.6)}
50%{opacity:.7;transform:scale(1.15);box-shadow:0 0 0 8px rgba(198,136,33,0)}
}
/* Parallaxe perf — désactiver sur faible motion */
@media (prefers-reduced-motion: reduce){
.pos-grid > div,.serv article,.insight,.hero-metrics > div{transform:none !important}
.hero-tag .pulse{animation:none}
}
/* Responsive featured */
@media (max-width:760px){
.serv article.featured ul{grid-template-columns:1fr}
.serv-flow{font-size:10px;gap:8px}
.serv-flow span{padding:6px 10px}
.serv-flow span:not(:last-child)::after{display:none}
}
/* Insights footer sobre — sans auteur */
.ins-meta-foot{
display:flex;align-items:center;gap:14px;
font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--mute);
}
.ins-meta-foot .ins-pub{
color:var(--gold);padding:3px 8px;
border:1px solid rgba(198,136,33,.22);border-radius:2px;
background:rgba(198,136,33,.05);
}
.ins-meta-foot .ins-date::before{
content:"·";margin-right:10px;color:var(--mute);
}
/* ============================================================
LOGO PALETTE — finitions globales
Navy #0F2647 · Vert #1F4D2C / #C68821 · Cream #F0EEE5
============================================================ */
/* Gradient italique : du vert glow au vert charte (au lieu du doré) */
.hero h1 em,
.sec-title em,
.serv h3 em,
.africa-info h3 em,
.insight h4 em{
background:linear-gradient(180deg, #7BDFA0 0%, #C68821 50%, #1F4D2C 100%) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color:transparent !important;
color:transparent !important;
}
/* Footer & topbar — surface navy profond charte */
.topbar{background:var(--navy-deep)}
.foot,.foot-simple{
background:linear-gradient(180deg, var(--navy-deep), #050C18) !important;
border-top:4px solid var(--green-bright);
}
/* Press strip — fond crème géré plus bas (logos en couleur naturelle) */
/* Hero — bordure inférieure verte (filet d'autorité) */
.hero{border-bottom:4px solid var(--green-bright)}
/* Nav CTA — vert pop vif */
.nav .cta{background:var(--green-bright) !important;color:#fff !important}
.nav .cta:hover{background:var(--green-glow) !important}
/* Inputs focus → vert charte (au lieu de doré) */
input:focus, textarea:focus, select:focus{
border-color:var(--green-bright) !important;
box-shadow:0 0 0 3px rgba(198,136,33,.18) !important;
outline:none;
}
/* Hero metrics : v plus contrasté en blanc cassé */
.hero-metrics .v{
background:linear-gradient(180deg, #F0EEE5 0%, #C9D0DC 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
.hero-metrics .v em{
-webkit-text-fill-color:var(--green-bright);
background:none;color:var(--green-bright);
}
/* Logo nav — halo vert au lieu d'or */
.brand img{
filter:drop-shadow(0 6px 18px rgba(0,0,0,.55))
drop-shadow(0 0 22px rgba(198,136,33,.22)) !important;
}
.brand:hover img{
filter:drop-shadow(0 8px 22px rgba(0,0,0,.6))
drop-shadow(0 0 32px rgba(198,136,33,.40)) !important;
}
/* Carte Afrique — opération en vert charte (remplace l'or sahélien) */
#africa-svg-mount #sl, #africa-svg-mount #sn, #africa-svg-mount #gn,
#africa-svg-mount #lr, #africa-svg-mount #ci, #africa-svg-mount #ml,
#africa-svg-mount #bf, #africa-svg-mount #ne, #africa-svg-mount #gh,
#africa-svg-mount #tg, #africa-svg-mount #bj, #africa-svg-mount #ng,
#africa-svg-mount #mr, #africa-svg-mount #gm, #africa-svg-mount #gw,
#africa-svg-mount #cv, #africa-svg-mount #cd, #africa-svg-mount #ke{
fill:rgba(198,136,33,.32) !important;
stroke:rgba(198,136,33,.85) !important;
}
#africa-svg-mount .land:hover{fill:rgba(198,136,33,.55) !important}
/* Flow lines map — vert glow */
.flow{stroke:rgba(198,136,33,.55) !important}
.flow.main{
stroke:rgba(242,193,114,.95) !important;
filter:drop-shadow(0 0 1px rgba(198,136,33,.6));
}
/* Pins map */
.pin-dot{
background:var(--green-bright) !important;
box-shadow:0 0 12px rgba(198,136,33,.7) !important;
}
.pin-dot::before{border-color:var(--green-bright) !important}
.pin-dot.hq{
background:var(--green-glow) !important;
box-shadow:0 0 22px rgba(242,193,114,.95) !important;
}
/* Service pipeline chips - filet vert */
.serv-flow span{background:rgba(198,136,33,.06);border-color:rgba(198,136,33,.18)}
.serv-flow span:hover{
background:rgba(198,136,33,.14);border-color:var(--green-bright);
color:var(--green-bright);box-shadow:0 8px 24px -10px rgba(198,136,33,.4);
}
.serv-flow span:not(:last-child)::after{color:var(--green-bright)}
/* Insights cards : tag vert + flèche verte */
.ins-cat.brief{color:#7BC4E6;background:rgba(123,196,230,.10);border-color:rgba(123,196,230,.22)}
.ins-cat.note{color:var(--green-bright);background:rgba(198,136,33,.10);border-color:rgba(198,136,33,.22)}
.ins-cat.analyse{color:var(--green-glow);background:rgba(242,193,114,.10);border-color:rgba(242,193,114,.22)}
.ins-pub{
color:var(--green-bright) !important;
border:1px solid rgba(198,136,33,.22) !important;
background:rgba(198,136,33,.05) !important;
}
/* Command Center — accents vert charte */
.cc-stat em{color:var(--green-bright)}
.cc-rows .row b{color:var(--green-bright)}
.cc-feed .fmeta b{color:var(--green-bright)}
/* Map legend swatch */
.map-legend .sw.op{
background:rgba(198,136,33,.55);
border:1px solid rgba(198,136,33,.9);
}
.map-legend .sw.flow-l{border-top:1.5px dashed rgba(198,136,33,.85)}
/* About / facets accent */
.africa-info .facets b{color:var(--green-bright)}
.africa-tag{color:var(--green-bright);background:rgba(198,136,33,.10);border:1px solid rgba(198,136,33,.22)}
/* Bouton CTA principal — clarté visuelle vert charte */
.btn-gold{background:var(--green-bright) !important;color:#FFFFFF !important;font-weight:500}
.btn-gold:hover{background:var(--green-glow) !important;box-shadow:0 14px 40px -12px rgba(242,193,114,.55) !important}
/* ============================================================
TRIADE FINALE — Or Sahélien (accent) + Vert (live/success)
============================================================ */
/* OR SAHÉLIEN — accent premium */
.nav .cta{background:var(--gold) !important;color:#FFFFFF !important;font-weight:500}
.nav .cta:hover{background:var(--gold-2) !important;transform:translateY(-1px)}
.btn-gold{background:var(--gold) !important;color:#FFFFFF !important;font-weight:500}
.btn-gold:hover{background:var(--gold-2) !important;box-shadow:0 14px 40px -12px rgba(198,136,33,.55) !important}
/* Sélection texte */
::selection{background:var(--gold);color:#FFF}
.skip:focus{background:var(--gold) !important;color:#FFF !important}
/* Italiques éditoriaux — dégradé or chaud */
.hero h1 em,
.sec-title em,
.serv h3 em,
.africa-info h3 em,
.insight h4 em{
background:linear-gradient(180deg, var(--gold-glow) 0%, var(--gold) 55%, var(--gold-deep) 100%) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color:transparent !important;
color:transparent !important;
}
/* Hero filet + halo logo en or sahélien */
.hero{border-bottom:4px solid var(--gold)}
.brand img{
filter:drop-shadow(0 6px 18px rgba(0,0,0,.55))
drop-shadow(0 0 22px rgba(198,136,33,.22)) !important;
}
.brand:hover img{
filter:drop-shadow(0 8px 22px rgba(0,0,0,.6))
drop-shadow(0 0 32px rgba(198,136,33,.42)) !important;
}
/* Surfaces navy charte */
.topbar{background:var(--navy-deep) !important}
/* .press : fond crème géré plus bas (logos en couleur naturelle) */
.foot,.foot-simple{
background:linear-gradient(180deg, var(--navy-deep), #050C18) !important;
border-top:4px solid var(--gold) !important;
}
/* Inputs focus — or sahélien */
input:focus, textarea:focus, select:focus{
border-color:var(--gold) !important;
box-shadow:0 0 0 3px rgba(198,136,33,.18) !important;
}
/* === VERT IMPACT — réservé strictement aux signaux live/success === */
/* Dot live topbar + hero pulse → VERT (signal "actif/connecté") */
.topbar .dot{background:var(--green-glow) !important;box-shadow:0 0 10px var(--green-glow) !important}
.live-dot{background:var(--green-glow) !important;box-shadow:0 0 10px var(--green-glow) !important}
/* Deltas positifs / indicateurs success */
.cc-delta{color:var(--green-glow) !important}
.cc-delta.neg{color:#E67373 !important}
.cc-rows b.up{color:var(--green-glow) !important}
.cc-rows b.down{color:#E67373 !important}
.wb-table .pos{color:var(--green-glow) !important}
.wb-table .neg{color:#E67373 !important}
/* Pastille "note" insights (rappel pastille verte du logo) */
.ins-cat.note{
color:var(--green-bright) !important;
background:rgba(61,160,96,.10) !important;
border-color:rgba(61,160,96,.28) !important;
}
/* Cartographie Afrique : OPÉRATION en or sahélien, VEILLE en bleu navy */
#africa-svg-mount #sl, #africa-svg-mount #sn, #africa-svg-mount #gn,
#africa-svg-mount #lr, #africa-svg-mount #ci, #africa-svg-mount #ml,
#africa-svg-mount #bf, #africa-svg-mount #ne, #africa-svg-mount #gh,
#africa-svg-mount #tg, #africa-svg-mount #bj, #africa-svg-mount #ng,
#africa-svg-mount #mr, #africa-svg-mount #gm, #africa-svg-mount #gw,
#africa-svg-mount #cv, #africa-svg-mount #cd, #africa-svg-mount #ke{
fill:rgba(198,136,33,.32) !important;
stroke:rgba(198,136,33,.85) !important;
}
#africa-svg-mount .land:hover{fill:rgba(198,136,33,.58) !important}
.flow{stroke:rgba(198,136,33,.55) !important}
.flow.main{
stroke:rgba(242,193,114,.95) !important;
filter:drop-shadow(0 0 1px rgba(198,136,33,.6));
}
.pin-dot{
background:var(--gold) !important;
box-shadow:0 0 12px rgba(198,136,33,.7) !important;
}
.pin-dot::before{border-color:var(--gold) !important}
.pin-dot.hq{
background:var(--gold-2) !important;
box-shadow:0 0 22px rgba(224,168,72,.95) !important;
}
/* Pipeline projet stratégique — or sahélien */
.serv-flow span{
background:rgba(198,136,33,.06) !important;
border-color:rgba(198,136,33,.18) !important;
}
.serv-flow span:hover{
background:rgba(198,136,33,.14) !important;
border-color:var(--gold) !important;
color:var(--gold) !important;
box-shadow:0 8px 24px -10px rgba(198,136,33,.4) !important;
}
.serv-flow span:not(:last-child)::after{color:var(--gold) !important}
/* Hero metrics — chiffres blanc cassé, + or */
.hero-metrics .v{
background:linear-gradient(180deg, #F0EEE5 0%, #C9D0DC 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
.hero-metrics .v em{
-webkit-text-fill-color:var(--gold) !important;
background:none !important;
color:var(--gold) !important;
}
/* Hero tag pulse — or */
.hero-tag .pulse{
background:var(--gold) !important;
box-shadow:0 0 10px var(--gold) !important;
}
.hero-tag{
color:var(--gold);
border-color:rgba(198,136,33,.30) !important;
background:rgba(198,136,33,.06) !important;
}
/* Insight cat pills — analyse en or */
.ins-cat.analyse{
color:var(--gold) !important;
background:rgba(198,136,33,.10) !important;
border-color:rgba(198,136,33,.28) !important;
}
.ins-cat.brief{
color:#7BC4E6 !important;
background:rgba(123,196,230,.10) !important;
border-color:rgba(123,196,230,.22) !important;
}
.ins-pub{
color:var(--gold) !important;
border:1px solid rgba(198,136,33,.22) !important;
background:rgba(198,136,33,.05) !important;
}
/* ============================================================
STATIC MAP — remplace iframes OpenStreetMap (perf)
============================================================ */
.static-map{
position:relative;display:block;
border:1px solid var(--line);border-radius:4px;
overflow:hidden;cursor:pointer;
transition:border-color .25s, transform .25s;
}
.static-map svg{width:100%;height:100%;display:block}
.static-map:hover{border-color:var(--gold);transform:translateY(-2px)}
.static-map-overlay{
position:absolute;inset:0;padding:14px 16px;
display:flex;flex-direction:column;justify-content:space-between;
background:linear-gradient(180deg, rgba(7,13,24,.10), rgba(7,13,24,.85));
font-family:var(--mono);color:var(--ink);
}
.smo-label{font-size:11px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
.smo-coords{font-size:10.5px;color:var(--ink-2);align-self:flex-start;margin-top:4px}
.smo-cta{
font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
margin-top:auto;align-self:flex-start;
padding:5px 9px;border:1px solid rgba(198,136,33,.30);
background:rgba(198,136,33,.06);border-radius:2px;
transition:background .2s;
}
.static-map:hover .smo-cta{background:rgba(198,136,33,.14)}
/* ============================================================
CARRIÈRES — Rejoignez-nous + upload CV
============================================================ */
.careers{
background:linear-gradient(180deg, var(--bg) 0%, var(--navy-deep) 100%);
border-top:1px solid var(--line);
position:relative;overflow:hidden;
}
.careers::before{
content:"";position:absolute;top:0;right:-200px;width:600px;height:600px;
background:radial-gradient(circle, rgba(198,136,33,.10), transparent 60%);
pointer-events:none;
}
.careers-grid{
display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:start;
position:relative;z-index:1;
}
.careers-intro .sec-title{margin-bottom:16px}
.careers-intro .sec-sub{margin-bottom:48px;max-width:560px}
.careers-values{
list-style:none;margin:0 0 40px;padding:0;
display:flex;flex-direction:column;gap:20px;
}
.careers-values li{
display:grid;grid-template-columns:60px 1fr;gap:18px;
padding:18px 0;border-top:1px solid var(--line);
transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.careers-values li:hover{transform:translateX(6px)}
.careers-values li:last-child{border-bottom:1px solid var(--line)}
.cv-n{
font-family:var(--display);font-size:32px;color:var(--gold);
font-weight:400;line-height:1;letter-spacing:-.01em;
}
.careers-values b{
display:block;font-family:var(--display);font-weight:400;
font-size:19px;color:var(--ink);margin-bottom:6px;letter-spacing:-.005em;
}
.careers-values p{
font-size:14px;color:var(--ink-2);line-height:1.55;margin:0;max-width:480px;
}
.careers-roles{
padding:24px 26px;background:rgba(198,136,33,.04);
border:1px solid rgba(198,136,33,.20);border-radius:6px;
}
.cr-tag{
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
color:var(--gold);text-transform:uppercase;margin-bottom:14px;display:inline-block;
}
.cr-tag::before{
content:"●";color:var(--green-glow);margin-right:8px;
animation:pulse 2s infinite;
}
.cr-list{display:flex;flex-direction:column;gap:8px}
.cr-list span{
font-family:var(--sans);font-size:14px;color:var(--ink-2);
padding:8px 0;border-bottom:1px dotted var(--line);
}
.cr-list span:last-child{border-bottom:0}
.cr-list span::before{
content:"›";color:var(--gold);margin-right:10px;font-weight:600;
}
/* === FORM CANDIDATURE === */
.careers-form{
background:linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
border:1px solid var(--line-2);border-radius:10px;
padding:38px 36px;
box-shadow:0 30px 80px -20px rgba(0,0,0,.5);
display:flex;flex-direction:column;gap:18px;
position:sticky;top:120px;
}
.cf-head{margin-bottom:8px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.cf-head h3{
font-family:var(--display);font-weight:300;font-size:26px;
color:var(--ink);margin:0 0 8px;letter-spacing:-.01em;
}
.cf-head p{font-size:13px;color:var(--mute);margin:0;line-height:1.5}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.careers-form label{
display:flex;flex-direction:column;gap:6px;
}
.careers-form label > span{
font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
color:var(--mute);text-transform:uppercase;
}
.careers-form input,
.careers-form select,
.careers-form textarea{
width:100%;background:rgba(0,0,0,.30);border:1px solid var(--line-2);
color:var(--ink);font-family:var(--sans);font-size:14.5px;
padding:12px 14px;border-radius:4px;outline:none;
transition:border-color .2s, box-shadow .2s;
}
.careers-form textarea{min-height:90px;resize:vertical;line-height:1.55;font-family:var(--sans)}
.careers-form select{cursor:pointer;appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;
}
/* Upload CV — drop zone */
.cf-upload{
border:1.5px dashed var(--line-2);border-radius:6px;
padding:24px 20px;background:rgba(0,0,0,.20);
transition:all .25s;cursor:pointer;
}
.cf-upload:hover,.cf-upload.dragover{
border-color:var(--gold);background:rgba(198,136,33,.06);
}
.cf-upload-inner{display:flex;align-items:center;gap:18px;color:var(--gold)}
.cf-upload-text b{
display:block;font-family:var(--sans);font-size:14px;color:var(--ink);font-weight:500;margin-bottom:4px;
}
.cf-upload-text span{
font-family:var(--mono);font-size:10.5px;letter-spacing:.10em;color:var(--mute);
}
.cf-upload-file{
display:flex;align-items:center;gap:10px;padding:8px 14px;
background:rgba(198,136,33,.10);border:1px solid var(--gold);border-radius:3px;
margin-left:auto;
}
.cv-name{font-family:var(--mono);font-size:12px;color:var(--ink);max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-remove{
background:transparent;border:0;color:var(--mute);font-size:14px;cursor:pointer;
padding:0 4px;transition:color .2s;
}
.cv-remove:hover{color:#cf5a5a}
/* Consent checkbox */
.cf-check{
display:flex !important;flex-direction:row !important;align-items:flex-start;gap:10px;
font-family:var(--sans) !important;font-size:12.5px !important;color:var(--ink-2) !important;
line-height:1.5;
letter-spacing:.005em !important;text-transform:none !important;
}
.cf-check input{
width:auto !important;margin-top:3px;accent-color:var(--gold);
}
.cf-check span{
font-family:var(--sans) !important;font-size:12.5px !important;
color:var(--ink-2) !important;letter-spacing:.005em !important;text-transform:none !important;
}
.cf-check a{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(198,136,33,.4)}
.cf-submit{
align-self:flex-start;margin-top:6px;
}
.cf-sent{
font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--green-glow);
text-transform:uppercase;padding:14px;border:1px solid rgba(90,207,143,.30);
background:rgba(90,207,143,.06);border-radius:3px;
display:none;
}
.cf-sent.on{display:block;animation:slideIn .4s var(--ease-out,cubic-bezier(.2,.7,.2,1))}
@keyframes slideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:1024px){
.careers-grid{grid-template-columns:1fr;gap:50px}
.careers-form{position:relative;top:0}
.cf-row{grid-template-columns:1fr}
}
/* ============================================================
FOOTER CABINET (4 colonnes institutionnel)
============================================================ */
.foot-cab{
background:linear-gradient(180deg, var(--navy-deep) 0%, #050C18 100%);
border-top:4px solid var(--gold);
padding:80px 48px 28px;
color:var(--ink-2);
font-family:var(--sans);
}
.foot-cab-top{
display:grid;grid-template-columns:1.5fr 3fr;gap:80px;
max-width:1400px;margin:0 auto 60px;
}
/* Brand block */
.fc-brand{display:flex;gap:20px;align-items:flex-start}
.fc-brand img{
width:64px;height:64px;flex-shrink:0;
filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));
}
.fc-brand-text b{
display:block;font-family:var(--display);font-size:26px;font-weight:400;
letter-spacing:.04em;color:var(--ink);margin-bottom:4px;
}
.fc-brand-text span{
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
color:var(--gold);text-transform:uppercase;display:block;margin-bottom:14px;
}
.fc-brand-text p{
font-size:13.5px;line-height:1.6;color:var(--mute);margin:0;max-width:300px;
}
/* 4 cols */
.fc-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.fc-col h5{
font-family:var(--mono);font-size:11px;letter-spacing:.20em;
color:var(--gold);text-transform:uppercase;font-weight:500;
margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line);
}
.fc-col a{
display:block;padding:6px 0;font-size:13.5px;color:var(--ink-2);
transition:color .2s, transform .2s;line-height:1.45;
}
.fc-col a:hover{color:var(--gold);transform:translateX(3px)}
.fc-col a b{display:block;font-family:var(--sans);font-weight:500;color:var(--ink);font-size:14px}
.fc-col a span{
font-family:var(--mono);font-size:10.5px;letter-spacing:.10em;color:var(--mute);
}
.fc-col a:hover b{color:var(--gold)}
.fc-col a i.hq-pill{
font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
padding:1px 5px;background:var(--gold);color:#0B1424;border-radius:2px;margin-left:6px;
}
.fc-locale{font-family:var(--mono);font-size:12px;letter-spacing:.12em}
/* Tag central — signature */
.foot-cab-tag{
max-width:1100px;margin:0 auto;padding:50px 24px;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
display:flex;align-items:center;justify-content:center;gap:24px;
text-align:center;
}
.foot-cab-tag p{
font-family:var(--display);font-weight:300;font-style:italic;
font-size:clamp(20px,2.2vw,28px);line-height:1.4;letter-spacing:-.005em;
color:var(--ink);margin:0;max-width:780px;
}
.fct-quote{
font-family:var(--display);font-size:60px;font-weight:300;color:var(--gold);
line-height:1;display:block;
}
/* Bottom strip */
.foot-cab-bottom{
max-width:1400px;margin:30px auto 0;padding-top:24px;
display:flex;justify-content:space-between;align-items:center;
flex-wrap:wrap;gap:18px;
font-family:var(--mono);font-size:10.5px;letter-spacing:.10em;
color:var(--mute);
}
.fcb-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fcb-left a{color:var(--mute);transition:color .2s}
.fcb-left a:hover{color:var(--gold)}
.fcb-sep{color:var(--line-2);opacity:.5}
.fcb-right{display:flex;align-items:center;gap:14px}
.fcb-right a{
color:var(--ink-2);width:32px;height:32px;display:flex;align-items:center;justify-content:center;
border:1px solid var(--line);border-radius:50%;transition:all .2s;
}
.fcb-right a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.fcb-version{color:var(--gold);letter-spacing:.14em;padding-left:12px;border-left:1px solid var(--line);margin-left:6px}
@media (max-width:1024px){
.foot-cab{padding:60px 24px 24px}
.foot-cab-top{grid-template-columns:1fr;gap:40px}
.fc-cols{grid-template-columns:1fr 1fr;gap:28px}
.foot-cab-tag{padding:36px 20px}
.foot-cab-bottom{flex-direction:column;text-align:center}
}
@media (max-width:560px){
.fc-cols{grid-template-columns:1fr}
.fc-brand{flex-direction:column}
.fct-quote{font-size:40px}
}
/* ============================================================
CORRECTIONS POST-AUDIT — spinner, erreur, footer compact, a11y
============================================================ */
/* Spinner submit */
.cf-submit .spin{
display:inline-block;width:14px;height:14px;
border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
border-radius:50%;animation:spin .8s linear infinite;
vertical-align:-3px;margin-right:6px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.cf-submit:disabled{opacity:.7;cursor:wait}
.cf-submit:disabled:hover{transform:none !important}
/* État erreur — réutilise .cf-sent */
.cf-sent.err{
color:#E67373 !important;
border-color:rgba(230,115,115,.30) !important;
background:rgba(230,115,115,.06) !important;
}
/* === Footer cabinet : spacing réduit (#10) === */
.foot-cab{padding:60px 48px 24px} /* 80 → 60 top, 28 → 24 bottom */
.foot-cab-top{margin:0 auto 40px} /* 60 → 40 */
.foot-cab-tag{padding:28px 24px} /* 50 → 28 */
.foot-cab-tag p{
font-family:var(--display);font-weight:300;font-style:italic;
font-size:clamp(16px,1.7vw,21px); /* 20-28 → 16-21 (moins prétentieux) */
text-align:center;color:var(--ink-2);margin:0;max-width:680px;
}
.foot-cab-bottom{margin:20px auto 0;padding-top:18px} /* 30+24 → 20+18 */
/* === Touch targets footer (#7) === */
.fcb-right a{
width:44px;height:44px; /* 32 → 44 (WCAG AAA) */
border:1px solid var(--line);
}
.fcb-right{gap:10px}
/* Nav : carrières link active state */
.nav nav a[href="#careers"]{position:relative}
@media (max-width:1024px){
.foot-cab{padding:48px 24px 20px}
.foot-cab-top{gap:32px;margin-bottom:32px}
.foot-cab-tag{padding:22px 18px}
}
/* ============================================================
10/10 POLISH — scroll progress + burger + a11y AAA + dividers
============================================================ */
/* --- Scroll progress bar global --- */
.scroll-bar{
position:fixed;top:0;left:0;right:0;height:3px;z-index:200;
background:linear-gradient(90deg, var(--gold) 0%, var(--gold-glow) 50%, var(--gold-2) 100%);
transform-origin:left;transform:scaleX(0);
transition:transform .15s linear;
box-shadow:0 0 10px rgba(198,136,33,.40);
will-change:transform;
}
/* --- Skip link visible et stylé au focus --- */
.skip{position:absolute;left:-9999px;z-index:9999}
.skip:focus{
left:50%;top:16px;transform:translateX(-50%);
background:var(--gold);color:#070D18 !important;
padding:10px 22px;border-radius:4px;
font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
box-shadow:0 10px 30px -10px rgba(198,136,33,.6);
outline:2px solid var(--gold-glow);outline-offset:3px;
}
/* --- Focus AAA visible partout --- */
*:focus-visible{
outline:2px solid var(--gold);outline-offset:3px;
border-radius:3px;
}
a:focus-visible,button:focus-visible{
outline:2px solid var(--gold);outline-offset:4px;
}
input:focus-visible,textarea:focus-visible,select:focus-visible{
outline:none;
border-color:var(--gold) !important;
box-shadow:0 0 0 3px rgba(198,136,33,.25) !important;
}
/* --- Mobile burger button (desktop = hidden) --- */
.nav-burger{
display:none;
background:transparent;border:1px solid var(--line-2);
width:44px;height:44px;border-radius:6px;
flex-direction:column;align-items:center;justify-content:center;gap:5px;
cursor:pointer;transition:border-color .2s, background .2s;
padding:0;
}
.nav-burger span{
display:block;width:20px;height:1.5px;background:var(--ink);
transition:transform .25s var(--ease-out,cubic-bezier(.2,.7,.2,1)), opacity .2s;
}
.nav-burger:hover{border-color:var(--gold);background:rgba(198,136,33,.06)}
.nav-burger:hover span{background:var(--gold)}
.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)}
/* --- Mobile navigation drawer --- */
@media (max-width:880px){
.nav-burger{display:flex}
.nav .cta{display:none}
.nav nav{
position:fixed;top:88px;left:0;right:0;bottom:0;
background:rgba(7,13,24,.97);backdrop-filter:blur(20px);
flex-direction:column;align-items:stretch;justify-content:flex-start;
padding:32px 28px;gap:0;
transform:translateX(100%);transition:transform .35s var(--ease-out,cubic-bezier(.2,.7,.2,1));
z-index:55;overflow-y:auto;
}
.nav nav[data-open="true"]{transform:translateX(0)}
.nav nav a{
font-size:18px;font-weight:400;color:var(--ink);
padding:18px 0;border-bottom:1px solid var(--line);
border-radius:0;letter-spacing:.005em;
}
.nav nav a:hover,.nav nav a:focus-visible{color:var(--gold);background:transparent;padding-left:8px}
.nav nav::after{
content:"";display:block;margin-top:24px;padding-top:24px;
border-top:1px solid var(--line);
}
.nav nav::before{
content:"Prendre contact →";display:block;margin-top:32px;
padding:14px 24px;background:var(--gold);color:#fff;
text-align:center;border-radius:4px;font-weight:500;font-size:14px;letter-spacing:.02em;
cursor:pointer;
}
}
/* --- Section dividers : filet or animé --- */
.sec + .sec,
.press + .sec,
.sec + .cc,
.cc + .sec{
position:relative;
}
.sec::before,
.cc::before{
content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
width:60px;height:1px;background:var(--gold);opacity:.5;
box-shadow:0 0 12px rgba(198,136,33,.4);
}
.sec::after{
content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
width:6px;height:6px;background:var(--gold);border-radius:50%;
margin-top:-3px;box-shadow:0 0 14px rgba(198,136,33,.7);
}
.sec.cc::after,.sec#careers::after,.cc::after{display:none}
/* --- Press strip non-clickable mais visuellement plus présent --- */
.press-list span{
transition:opacity .25s, color .25s;
}
.press-list span:hover{opacity:1;color:var(--gold)}
/* --- Selection text amélioré --- */
::selection{background:var(--gold);color:#fff;text-shadow:none}
::-moz-selection{background:var(--gold);color:#fff}
/* --- Scroll smooth + offset nav --- */
html{scroll-behavior:smooth;scroll-padding-top:120px}
/* --- Reduce motion --- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
.scroll-bar{transition:none}
}
/* --- Contraste AAA : muté plus clair sur fond sombre --- */
.cc-feed .fmeta,
.cc-foot,
.topbar .clocks span,
.foot-cab-bottom{
color:#9FAAB8; /* contrast 5.4:1 sur #070D18 — AA confortable */
}
/* --- Touch target minimum 44×44 partout --- */
.fc-col a,
.contact-channels a,
.nav nav a,
.btn-gold,
.btn-line,
.cta-mini{
min-height:44px;
display:inline-flex;align-items:center;
}
.fc-col a{padding:8px 0}
/* --- Print stylesheet --- */
@media print{
.topbar,.nav,.scroll-bar,.hero canvas,.foot-cab-bottom .fcb-right,
.cf-upload,.careers-form,.command,.signals{display:none !important}
body{background:#fff;color:#000;font-size:11pt}
.hero h1,.sec-title{color:#000}
a{color:#000;text-decoration:underline}
.sec{padding:30px 0;break-inside:avoid}
.foot-cab{background:#fff;color:#000;border-top:2px solid #000;padding:20px}
}
/* ============================================================
FIXES CRITIQUES PRE-PROD
============================================================ */
/* ---- H1 enrichi SEO : eyebrow + slogan ---- */
.hero h1{display:flex;flex-direction:column;gap:18px}
.h1-eyebrow{
font-family:var(--mono);
font-size:13px;letter-spacing:.18em;
text-transform:uppercase;color:var(--gold);
font-weight:500;font-style:normal;
line-height:1.4;max-width:760px;
/* la phrase est visuellement secondaire mais reste H1 pour SEO */
}
.h1-display{
font-family:var(--display);font-weight:300;font-style:normal;
font-size:clamp(46px,7.6vw,108px);line-height:1.02;letter-spacing:-.025em;
display:block;
}
.h1-display em{
font-style:italic;font-weight:300;color:var(--gold);
background:linear-gradient(180deg, var(--gold-glow,#F2C172) 0%, var(--gold) 55%, var(--gold-deep,#A06F19) 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
/* ---- FOUNDER CARD — about.html ---- */
.founder-card{
display:grid;grid-template-columns:280px 1fr;gap:50px;
padding:48px 50px;
background:linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
border:1px solid rgba(198,136,33,.25);
border-radius:10px;
box-shadow:0 40px 80px -30px rgba(0,0,0,.55);
position:relative;overflow:hidden;
margin-top:24px;
}
.founder-card::before{
content:"";position:absolute;top:0;left:0;width:100%;height:3px;
background:linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}
.founder-left{display:flex;align-items:center;justify-content:center}
.founder-portrait{
position:relative;
width:240px;height:240px;
background:linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
border:2px solid var(--gold);
border-radius:50%;
display:flex;align-items:center;justify-content:center;
box-shadow:0 30px 70px -25px rgba(198,136,33,.55), inset 0 2px 0 rgba(255,255,255,.06);
}
.fp-initials{
font-family:var(--display);font-weight:300;font-size:88px;
color:var(--gold);letter-spacing:.02em;
}
.fp-badge{
position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);
font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
color:#fff;background:var(--gold);padding:6px 14px;border-radius:3px;font-weight:600;
box-shadow:0 8px 20px -6px rgba(198,136,33,.5);
white-space:nowrap;
}
.founder-right{display:flex;flex-direction:column;justify-content:center;gap:22px}
.founder-head h3{
font-family:var(--display);font-weight:300;font-size:42px;line-height:1.05;
color:var(--ink);letter-spacing:-.02em;margin:0 0 6px;
}
.founder-title{
font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--gold);margin:0;
}
.founder-pitch{
font-size:15.5px;line-height:1.65;color:var(--ink-2);margin:0;max-width:620px;
}
.founder-pitch strong{color:var(--gold);font-weight:500}
.founder-creds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 32px}
.founder-creds li{
display:flex;flex-direction:column;gap:4px;
padding:14px 0;border-top:1px solid var(--line);
}
.fc-label{
font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
color:var(--gold);font-weight:500;
}
.fc-text{
font-size:13.5px;color:var(--ink-2);line-height:1.5;
}
.founder-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.founder-cta{padding:13px 22px !important;font-size:13.5px !important}
.founder-link{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--mute);padding:8px 12px;border:1px solid var(--line-2);border-radius:3px;
transition:all .2s;
}
.founder-link:hover{color:var(--gold);border-color:var(--gold);background:rgba(198,136,33,.06)}
@media (max-width:880px){
.founder-card{
grid-template-columns:1fr;padding:36px 28px;gap:30px;text-align:center;
}
.founder-creds{grid-template-columns:1fr;text-align:left}
.founder-actions{justify-content:center}
.founder-portrait{width:180px;height:180px}
.fp-initials{font-size:64px}
.founder-head h3{font-size:32px}
}
/* Hide h1-display em gradient regression: ensure new var fallback */
.h1-display em{
color:var(--gold);
}
/* ============================================================
PHOTOS ÉQUIPE — founder card avec image
============================================================ */
.founder-portrait.has-photo{
padding:0;border-width:3px;overflow:hidden;
}
.founder-portrait.has-photo img{
width:100%;height:100%;object-fit:cover;display:block;
border-radius:50%;
filter:grayscale(20%) contrast(1.05);
transition:filter .4s;
}
.founder-portrait.has-photo:hover img{
filter:grayscale(0) contrast(1.1);
}
/* === TEAM GRID — équipe étendue === */
.team-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
margin-top:48px;
}
.team-card{
background:linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
border:1px solid var(--line);border-radius:8px;
padding:0;overflow:hidden;
transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .35s;
}
.team-card:hover{
transform:translateY(-4px);
border-color:rgba(198,136,33,.45);
box-shadow:0 30px 60px -25px rgba(15,38,71,.45);
}
.team-photo{
position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;
background:var(--navy-deep);
}
.team-photo::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg, transparent 60%, rgba(7,13,24,.7) 100%);
pointer-events:none;
}
.team-photo img{
width:100%;height:100%;object-fit:cover;display:block;
filter:grayscale(30%) contrast(1.05);
transition:filter .4s, transform .6s;
}
.team-card:hover .team-photo img{
filter:grayscale(0) contrast(1.1);
transform:scale(1.04);
}
.team-info{padding:26px 28px 30px}
.team-info h3{
font-family:var(--display);font-weight:300;font-size:24px;line-height:1.1;
color:var(--ink);margin:0 0 8px;letter-spacing:-.01em;
}
.team-role{
font-family:var(--mono);font-size:11px;letter-spacing:.18em;
text-transform:uppercase;color:var(--gold);margin:0 0 14px;
}
.team-bio{
font-size:14px;line-height:1.6;color:var(--ink-2);margin:0;
}
@media (max-width:980px){
.team-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
.team-grid{grid-template-columns:1fr;gap:18px}
}
/* ============================================================
PRESS STRIP v2 — logos clients réels
============================================================ */
.press{padding:60px 0}
.press-head{
display:flex;flex-direction:column;align-items:center;gap:8px;
text-align:center;margin-bottom:36px;
}
.press-label{
font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;
color:var(--gold);text-transform:uppercase;font-weight:500;
}
.press-label::before{content:"— ";color:var(--gold)}
.press-label::after{content:" —";color:var(--gold)}
.press-sub{
font-family:var(--sans);font-size:13.5px;color:var(--mute);
letter-spacing:.02em;
}
.press-logos{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:28px 36px;
padding:20px 0;
align-items:center;justify-items:center;
}
.press-logos img{
display:block;width:100%;max-width:120px;height:84px;
object-fit:contain;
padding:6px;background:transparent;border:0;
transition:transform .25s;
}
.press-logos img:hover{
transform:scale(1.10);
}
@media (max-width:980px){
.press-logos{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
}
@media (max-width:600px){
.press-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.press-logos img{height:64px;max-width:90px}
}
/* ============================================================
WHATSAPP — bouton flottant + lien footer
============================================================ */
.wa-float{
position:fixed;bottom:24px;right:24px;z-index:150;
width:56px;height:56px;border-radius:50%;
background:#25D366;color:#fff;
display:flex;align-items:center;justify-content:center;
box-shadow:0 14px 40px -8px rgba(37,211,102,.55), 0 0 0 0 rgba(37,211,102,.6);
transition:transform .25s var(--ease-out,cubic-bezier(.2,.7,.2,1)), box-shadow .3s;
animation:waPulse 2.4s ease-in-out infinite;
}
@keyframes waPulse{
0%,100%{box-shadow:0 14px 40px -8px rgba(37,211,102,.55), 0 0 0 0 rgba(37,211,102,.6)}
70%{box-shadow:0 14px 40px -8px rgba(37,211,102,.55), 0 0 0 18px rgba(37,211,102,0)}
}
.wa-float:hover{
transform:scale(1.08);
background:#1FB755;
animation:none;
box-shadow:0 18px 50px -10px rgba(37,211,102,.7);
}
.wa-float:focus-visible{
outline:3px solid #fff;outline-offset:3px;
}
.wa-float .wa-tip{
position:absolute;right:66px;top:50%;transform:translateY(-50%);
background:rgba(7,13,24,.95);color:#fff;
font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
padding:7px 12px;border-radius:4px;
white-space:nowrap;opacity:0;pointer-events:none;
transition:opacity .25s;
border:1px solid rgba(198,136,33,.3);
}
.wa-float:hover .wa-tip{opacity:1}
@media (max-width:600px){
.wa-float{bottom:18px;right:18px;width:52px;height:52px}
.wa-float .wa-tip{display:none}
}
@media (prefers-reduced-motion:reduce){
.wa-float{animation:none}
}
/* Lien WhatsApp dans footer (vert) */
.fc-whatsapp{
color:#25D366 !important;
font-weight:500;
}
.fc-whatsapp:hover{color:#1FB755 !important}
/* Press strip : fond crème (pattern géré inline pour rester visible) */
.press{
background-color:#F5F1EA !important;
border-top:1px solid rgba(15,38,71,.10);
border-bottom:1px solid rgba(15,38,71,.10);
padding:50px 0 !important;
}
.press .press-label{color:var(--navy)}
.press .press-label::before,
.press .press-label::after{color:var(--gold)}
.press .press-sub{color:#5A6C82}
/* ============================================================
FIX FOOTER — adresses bureaux alignées proprement
============================================================ */
.fc-bureaux a{
display:flex !important;
flex-direction:column;
gap:2px;
padding:14px 0 !important;
border-bottom:1px solid rgba(255,255,255,.05);
min-height:auto !important;
}
.fc-bureaux a:last-child{border-bottom:0}
.fc-bureaux a b{
display:block;font-family:var(--sans);font-weight:500;
color:var(--ink);font-size:14px;letter-spacing:.02em;
margin-bottom:4px;
text-transform:uppercase;letter-spacing:.10em;
}
.fc-bureaux a span{
display:block;font-family:var(--mono);font-size:11.5px;
color:var(--mute);letter-spacing:.04em;line-height:1.5;
}
.fc-bureaux a:hover b{color:var(--gold)}
.fc-bureaux a:hover span{color:var(--ink-2)}
/* Force pattern Ruche Souveraine press strip — override final */
.press-honeycomb{
background-color:#F5F1EA !important;
background-image:url("assets/brand/hivesia_pattern.svg") !important;
background-size:800px 700px !important;
background-repeat:repeat !important;
background-position:center !important;
border-top:1px solid rgba(15,38,71,.10) !important;
border-bottom:1px solid rgba(15,38,71,.10) !important;
padding:80px 0 !important;
}
.press .press-label{color:var(--navy) !important}
.press .press-sub{color:#5A6C82 !important}
/* Pattern ruche visible derrière, logos sur petites cellules crème individuelles */
.press-honeycomb .press-logos{
background:transparent !important;
border:0 !important;
padding:0 !important;
box-shadow:none !important;
}
.press-honeycomb .press-logos img{
background:rgba(245,241,234,.95) !important;
border:1px solid rgba(15,38,71,.10);
border-radius:6px;
padding:14px 18px !important;
height:90px !important;
max-width:140px !important;
box-shadow:0 8px 20px -10px rgba(15,38,71,.18);
transition:transform .25s, box-shadow .25s, background .25s !important;
}
.press-honeycomb .press-logos img:hover{
background:#FFFFFF !important;
transform:scale(1.08);
box-shadow:0 14px 30px -10px rgba(198,136,33,.35);
border-color:rgba(198,136,33,.4);
}
.press-logos img{
filter:none !important;
background:transparent !important;
mix-blend-mode:normal !important;
opacity:1 !important;
}
/* ============================================================
FAQ — section accordion + Schema FAQPage
============================================================ */
.faq{background:linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%)}
.faq-list{
display:flex;flex-direction:column;gap:0;
max-width:880px;margin:0 auto;
border-top:1px solid var(--line);
}
.faq-item{
border-bottom:1px solid var(--line);
transition:background .2s;
}
.faq-item summary{
list-style:none;cursor:pointer;
padding:28px 32px 28px 16px;
font-family:var(--display);font-weight:300;font-size:21px;
letter-spacing:-.005em;color:var(--ink);
position:relative;outline:none;
display:flex;align-items:center;justify-content:space-between;gap:24px;
transition:color .2s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
content:"+";display:inline-flex;align-items:center;justify-content:center;
width:32px;height:32px;border-radius:50%;
border:1px solid var(--line-2);color:var(--gold);
font-family:var(--mono);font-size:18px;font-weight:300;
flex-shrink:0;transition:transform .35s, background .25s, border-color .25s;
}
.faq-item[open] summary::after{
content:"−";transform:rotate(180deg);
background:rgba(198,136,33,.08);border-color:var(--gold);
}
.faq-item summary:hover{color:var(--gold)}
.faq-item summary:hover::after{border-color:var(--gold);background:rgba(198,136,33,.08)}
.faq-item summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
.faq-answer{
padding:0 64px 32px 16px;
animation:faqOpen .35s cubic-bezier(.2,.7,.2,1);
}
.faq-answer p{
font-size:15.5px;line-height:1.7;color:var(--ink-2);margin:0;
}
.faq-answer em{color:var(--gold);font-style:italic}
.faq-answer strong{color:var(--ink);font-weight:500}
.faq-answer a{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(198,136,33,.4)}
.faq-answer a:hover{text-decoration-color:var(--gold)}
@keyframes faqOpen{
from{opacity:0;transform:translateY(-4px)}
to{opacity:1;transform:none}
}
@media (max-width:640px){
.faq-item summary{padding:22px 24px 22px 14px;font-size:18px;gap:14px}
.faq-item summary::after{width:28px;height:28px;font-size:16px}
.faq-answer{padding:0 44px 26px 14px;font-size:15px}
}
/* ============================================================
PRESS STRIP — Marquee animé (logos qui défilent en boucle)
============================================================ */
.press-marquee{
overflow:hidden;
position:relative;
padding:14px 0;
margin-top:48px;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.press-marquee-track{
display:flex;align-items:center;gap:36px;
width:max-content;
animation:marqueeSlide 80s linear infinite;
padding:18px 0;
}
.press-marquee:hover .press-marquee-track{animation-play-state:paused}
.press-marquee img{
height:130px;width:auto;max-width:210px;
object-fit:contain;
background:#FFFFFF;
border:1px solid rgba(15,38,71,.12);
border-radius:10px;
padding:22px 28px;
flex-shrink:0;
transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .25s;
box-shadow:0 14px 30px -14px rgba(15,38,71,.18), 0 2px 6px rgba(15,38,71,.06);
filter:saturate(1.05);
}
.press-marquee img:hover{
transform:translateY(-4px) scale(1.05);
box-shadow:0 24px 50px -18px rgba(198,136,33,.45), 0 6px 12px rgba(15,38,71,.10);
border-color:rgba(198,136,33,.45);
}
@media (max-width:760px){
.press-marquee img{height:96px;max-width:160px;padding:16px 20px}
.press-marquee-track{gap:24px}
}
@keyframes marqueeSlide{
from{transform:translateX(0)}
to {transform:translateX(calc(-50% - 24px))}
}
@media (prefers-reduced-motion:reduce){
.press-marquee-track{animation:none}
.press-marquee{-webkit-mask-image:none;mask-image:none}
}
/* Piliers expertise cliquables vers pages dédiées */
.pos-grid a.pos-link{
text-decoration:none;color:inherit;
display:block;
position:relative;
}
.pos-grid a.pos-link .pos-cta{
display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
color:var(--gold);text-transform:uppercase;margin-top:16px;
opacity:0;transform:translateY(4px);
transition:opacity .3s, transform .3s;
}
.pos-grid a.pos-link:hover{
background:var(--bg-2);
}
.pos-grid a.pos-link:hover .pos-cta{
opacity:1;transform:translateY(0);
}
/* ============================================================
CORRECTIONS POST-LAUNCH — bureaux centrés + phone composé
============================================================ */
/* Footer bureaux : alignement centré, taille typo uniforme (3 bureaux égaux) */
.fc-bureaux{text-align:center}
.fc-bureaux h5{text-align:center}
.fc-bureaux a{
text-align:center !important;
align-items:center !important;
padding:18px 0 !important;
}
.fc-bureaux a b{
text-align:center;font-size:14px;
letter-spacing:.14em !important;
}
.fc-bureaux a span{
text-align:center;font-size:12px !important;
line-height:1.55 !important;
max-width:240px;
margin:0 auto;
}
/* Input téléphone composé (indicatif + numéro) */
.cf-phone{
display:grid;
grid-template-columns:160px 1fr;
gap:8px;
}
.cf-phone select{
width:100% !important;
padding-right:24px !important;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position:right 8px center;
appearance:none;
}
@media (max-width:600px){
.cf-phone{grid-template-columns:1fr;gap:6px}
}