.kca-section{
--kca-green:#234238;
--kca-wine:#430C15;
--kca-cream:#FBF8F2;
--kca-cream-alt:#F1EBDC;
--kca-ink:#1E1B1A;
--kca-line:rgba(30,27,26,0.12);
background:var(--kca-cream);
padding:80px 20px;
font-family:'Work Sans',Arial,sans-serif;
color:var(--kca-ink);
box-sizing:border-box;
/* full-bleed : sort du conteneur limité du thème WordPress */
width:100vw;
position:relative;
left:50%;
right:50%;
margin-left:-50vw;
margin-right:-50vw;
}
.kca-section *{box-sizing:border-box;}
.kca-wrap{max-width:1180px;margin:0 auto;}
.kca-head{max-width:640px;margin-bottom:20px;}
.kca-eyebrow{
font-size:12.5px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;
color:var(--kca-wine);margin:0 0 14px;
}
.kca-head h2{
font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(24px,3.2vw,34px);
line-height:1.2;margin:0;color:var(--kca-ink);
}
.kca-head p{margin-top:14px;font-size:15.5px;line-height:1.6;color:rgba(30,27,26,0.68);}
.kca-list{position:relative;margin-top:60px;}
.kca-list::before{
content:'';position:absolute;top:8px;bottom:8px;left:27px;width:1px;
background:repeating-linear-gradient(to bottom, var(--kca-wine) 0 6px, transparent 6px 12px);
}
.kca-step{position:relative;padding-left:76px;padding-bottom:52px;}
.kca-step:last-child{padding-bottom:0;}
.kca-dot{
position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:'Fraunces',serif;font-weight:600;font-size:20px;z-index:2;
transform:scale(0.7);background-color:var(--kca-cream-alt);color:var(--kca-wine);
border:2px solid var(--kca-wine);will-change:transform,background-color,color;
}
.kca-step h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:22px;margin:0;opacity:0;will-change:opacity,transform;}
.kca-loc{font-size:12.5px;color:var(--kca-wine);font-weight:600;letter-spacing:0.04em;text-transform:uppercase;margin:0 0 6px;opacity:0;will-change:opacity,transform;}
.kca-desc{margin:10px 0 16px;font-size:14.5px;color:rgba(30,27,26,0.68);max-width:56ch;opacity:0;will-change:opacity,transform;}
.kca-docs{display:flex;gap:10px;flex-wrap:wrap;}
.kca-chip{
display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
padding:7px 14px;border-radius:3px;background:var(--kca-cream-alt);border:1px solid var(--kca-line);
color:var(--kca-ink);opacity:0;will-change:opacity,transform;
}
.kca-chip::before{content:'';font-size:11px;}
@media (max-width:600px){
.kca-step{padding-left:64px;}
}
La chaîne d'approvisionnement
Un lot, un parcours, un dossier documenté.
Chaque étape génère sa propre documentation — de la coopérative éthiopienne jusqu'à votre livraison.
1
Éthiopie
Production & export
Sélection auprès de 2 à 3 coopératives et exportateurs partenaires, cupping et inspection systématiques avant embarquement.
Rapport de cupping
Certificat d'origine
Certificat phytosanitaire
2
Transport maritime
Via Djibouti
Acheminement maritime vers l'Afrique de l'Ouest, sous couvert des documents de transport internationaux.
Connaissement maritime
3
Sénégal
Port de Dakar
Réception, contrôle qualité à l'arrivée et vérification de la conformité de chaque lot.
Liste de colisage
Contrôle qualité à l'arrivée
4
Dakar
Stockage local contrôlé
Conditions optimales de température et d'hygrométrie, sacs GrainPro, pour garantir fraîcheur et conformité sanitaire.
Fiche de conditions de stockage
5
Vous
Livraison client
Torréfacteurs, HoReCa, transformateurs de Café Touba et distribution — livrés avec le dossier complet du lot.
Bon de livraison
Dossier qualité complet
(function(){
var steps = document.querySelectorAll('#kcaList .kca-step');
if(!steps.length) return;
var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if(reduceMotion){
steps.forEach(function(step){
step.querySelector('.kca-dot').style.cssText += 'transform:scale(1);background-color:#234238;color:#FBF8F2;border-color:transparent;';
step.querySelectorAll('.kca-loc,h3,.kca-desc,.kca-chip').forEach(function(el){
el.style.opacity = '1'; el.style.transform = 'none';
});
});
return;
}
var WINE = [67,12,21];
var GREEN = [35,66,56];
var CREAM_ALT = [241,235,220];
var CREAM = [251,248,242];
function clamp01(v){ return Math.max(0, Math.min(1, v)); }
function lerp(a,b,t){ return a + (b-a)*t; }
function lerpRgb(c1,c2,t){
return 'rgb(' + Math.round(lerp(c1[0],c2[0],t)) + ',' +
Math.round(lerp(c1[1],c2[1],t)) + ',' +
Math.round(lerp(c1[2],c2[2],t)) + ')';
}
function easeOutCubic(t){ return 1 - Math.pow(1-t,3); }
var ticking = false;
function update(){
var vh = window.innerHeight;
var zoneStart = vh * 0.88;
var zoneEnd = vh * 0.45;
steps.forEach(function(step){
var rect = step.getBoundingClientRect();
var raw = (zoneStart - rect.top) / (zoneStart - zoneEnd);
var progress = easeOutCubic(clamp01(raw));
var dot = step.querySelector('.kca-dot');
dot.style.transform = 'scale(' + (0.7 + 0.3*progress) + ')';
dot.style.backgroundColor = lerpRgb(CREAM_ALT, GREEN, progress);
dot.style.color = lerpRgb(WINE, CREAM, progress);
dot.style.borderColor = 'rgba(67,12,21,' + (1 - progress) + ')';
var loc = step.querySelector('.kca-loc');
var h3 = step.querySelector('h3');
var desc = step.querySelector('.kca-desc');
if(loc){ loc.style.opacity = progress; loc.style.transform = 'translateX(' + (-14*(1-progress)) + 'px)'; }
if(h3){ h3.style.opacity = progress; h3.style.transform = 'translateX(' + (-14*(1-progress)) + 'px)'; }
if(desc){ desc.style.opacity = progress; desc.style.transform = 'translateX(' + (-14*(1-progress)) + 'px)'; }
var chips = step.querySelectorAll('.kca-chip');
chips.forEach(function(chip, j){
var chipProgress = clamp01((progress - j*0.12) / (1 - j*0.12));
chip.style.opacity = chipProgress;
chip.style.transform = 'translateY(' + (8*(1-chipProgress)) + 'px)';
});
});
ticking = false;
}
function onScroll(){
if(!ticking){
requestAnimationFrame(update);
ticking = true;
}
}
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
update();
})();
