/* ================================================================
GLOBAL CS-CI — Feuille de style
Page : Références & Partenaires
----------------------------------------------------------------
Dépendances :
· Google Fonts : Montserrat 400/500/600/700/800
https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800
· Feuille de style principale : 00index.css (doit être chargée avant)
----------------------------------------------------------------
Architecture CSS :
1. Variables et base → héritées de 00index.css
2. Composants partagés réutilisés
· nav · hero · .badge · .dot-pulse · .hstat · .archi-card
· .stats · .stats-g · .stat-it
· .eyebrow · .sh · .ssub · .wrap · .btn · .btn-g · .btn-outline
· .briques-bg · .why-c · .why-grid
· .ckpi · .cv · .cl
· .cta-bg · .cta-in · .cta-list
· .lead · .field · .frow · .btn-sub · .legal
· footer · .foot-g · .foot-bot
3. Composants propres à cette page (ci-dessous)
· .hero-ref Override hero fond + grain SVG
· .filter-bar / .flt Filtres projets par catégorie
· .proj-grid Grille de cartes projet
· .proj-card Carte individuelle avec accent animé
· .proj-logo Zone logo dans la carte
· .proj-badge Badge catégorie coloré inline
· .proj-name Titre de la carte
· .proj-desc Description de la carte
· .proj-tags / .proj-tag Tags techniques
· .ref-bg Section fond gris clair (projets)
· .lw-grid Mur de logos partenaires
· .lw-cell Cellule individuelle du mur
· .lw-label / .lw-text / .lw-name-big / .lw-sub Contenu cellule
· .quote-block Bloc citation navy avec accent vert
· @keyframes countUp Animation entrée stats
----------------------------------------------------------------
Charte : #8CBF44 (vert) · #242E3D (navy) · #B7B7B7 (gris)
Police : Montserrat 400/500/600/700/800
Usage : Lier cette feuille après 00index.css :
================================================================ */
/* ── Compléments page Références (composants non présents dans 00index.css) ── */
/* Hero override — fond navy pur avec grain */
.hero-ref{
background:linear-gradient(140deg,#1A222E 0%,#1a2f1a 55%,#1e2a10 100%);
}
.hero-ref::after{
content:'';position:absolute;inset:0;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events:none;opacity:.4;
}
/* Bandeau stats vert — override couleur texte */
.stats .sv{color:var(--navy)}
.stats .sl{color:rgba(36,46,61,.68)}
/* ── Filtres projets ── */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:36px}
.flt{
background:transparent;border:1.5px solid rgba(58,71,90,.35);
color:var(--navyLt);border-radius:20px;padding:7px 18px;
font-family:var(--F);font-size:12px;font-weight:700;cursor:pointer;
transition:all .2s;letter-spacing:.2px;
}
.flt:hover{border-color:var(--green);color:var(--green)}
.flt.on{background:var(--green);border-color:var(--green);color:var(--navy)}
/* ── Grille projets ── */
.proj-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
gap:20px;
}
.proj-card{
background:#fff;
border:1px solid var(--light);
border-radius:var(--r);
padding:24px;
transition:box-shadow .25s,transform .25s,border-color .25s;
position:relative;overflow:hidden;
}
.proj-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:3px;
background:var(--green);transform:scaleX(0);transform-origin:left;
transition:transform .3s ease;
}
.proj-card:hover{
box-shadow:0 12px 36px rgba(36,46,61,.12);
transform:translateY(-3px);border-color:rgba(140,191,68,.4);
}
.proj-card:hover::before{transform:scaleX(1)}
.proj-card.hidden{display:none}
.proj-logo{
height:48px;display:flex;align-items:center;margin-bottom:16px;
}
.proj-logo img{max-height:44px;max-width:150px;object-fit:contain}
.proj-initials{
font-size:18px;font-weight:800;color:var(--navyLt);
background:var(--xlt);border-radius:6px;padding:8px 12px;
letter-spacing:.5px;
}
.proj-badge{
display:inline-block;font-size:10px;font-weight:800;letter-spacing:1.2px;
text-transform:uppercase;padding:3px 10px;border-radius:10px;
margin-bottom:12px;
}
.proj-name{
font-size:14px;font-weight:800;color:var(--navy);line-height:1.3;
margin-bottom:9px;
}
.proj-desc{
font-size:12.5px;color:var(--navyLt);line-height:1.6;margin-bottom:16px;
}
.proj-tags{display:flex;flex-wrap:wrap;gap:5px}
.proj-tag{
font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:5px;
background:var(--xlt);color:var(--navyLt);
}
/* ── Section fond blanc (projets) ── */
.ref-bg{background:var(--xlt)}
.ref-bg .sh{color:var(--navy)}
.ref-bg .ssub{color:var(--navyLt)}
/* ── Logo wall ── */
.lw-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
border:1px solid var(--light);border-radius:var(--r);overflow:hidden;
background:#fff;
}
.lw-cell{
padding:32px 20px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:9px;
border-right:1px solid var(--light);border-bottom:1px solid var(--light);
transition:background .25s;cursor:default;
min-height:110px;
}
.lw-cell:hover{background:var(--greenSft)}
.lw-cell img{
max-height:38px;max-width:120px;object-fit:contain;
filter:grayscale(1) brightness(.8);
transition:filter .25s,transform .25s;
}
.lw-cell:hover img{filter:none;transform:scale(1.07)}
.lw-label{
font-size:10px;font-weight:700;color:var(--grey);letter-spacing:.5px;
text-align:center;text-transform:uppercase;transition:color .25s;
}
.lw-cell:hover .lw-label{color:var(--greenDk)}
.lw-text{flex-direction:column;gap:4px}
.lw-name-big{
font-size:14px;font-weight:800;color:var(--navy);
letter-spacing:.3px;text-align:center;transition:color .25s;
}
.lw-cell:hover .lw-name-big{color:var(--greenDk)}
.lw-sub{font-size:10px;color:var(--grey);text-align:center;transition:color .25s}
.lw-cell:hover .lw-sub{color:var(--greenDk);opacity:.7}
/* ── Bande chiffres sur fond vert (réutilise .stats) ── */
/* ── Bloc citation (réutilise .why-c) ── */
.quote-block{
background:var(--navy);border-radius:var(--r);padding:36px;
border-left:4px solid var(--green);position:relative;overflow:hidden;
}
.quote-block::after{
content:'';position:absolute;bottom:-20px;right:-20px;
width:100px;height:100px;
background:rgba(140,191,68,.08);border-radius:50%;
}
.quote-block blockquote{
font-size:18px;font-weight:700;color:#fff;line-height:1.45;
margin-bottom:16px;
}
.quote-block blockquote em{color:var(--green);font-style:normal}
.quote-source{font-size:12px;color:rgba(255,255,255,.45);font-weight:600}
/* ── CTA section ── (réutilise .cta-bg, .cta-in, .sh, .ssub) ── */
/* ── Compteur animé ── */
@keyframes countUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.stats-g .sv{animation:countUp .5s ease both}
/* ── Responsive ── */
@media(max-width:720px){
.filter-bar{gap:6px}
.flt{font-size:11px;padding:6px 13px}
.proj-grid{grid-template-columns:1fr}
.lw-grid{grid-template-columns:repeat(2,1fr)}
.quote-block blockquote{font-size:15px}
}