/* Cafix — site vitrine (2026-11-05) */
:root{--vert:#21a057;--vert-f:#178046;--brun:#6e4e37;--encre:#1f2a33;--gris:#5b6775;--fond:#f7f5f1;--carte:#fff;--bord:#e7e2da}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--encre);background:var(--fond);line-height:1.55;overflow-x:hidden}
[dir=rtl] body{font-family:Tajawal,system-ui,Arial,sans-serif;line-height:1.7}
img{max-width:100%;height:auto;display:block}
a{color:var(--vert-f)}
.cont{max-width:1120px;margin:0 auto;padding:0 16px}
.centre{text-align:center}.gris{color:var(--gris)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);text-align:center;color:var(--brun)}
section{padding:56px 0}

.barre{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(6px);border-bottom:1px solid var(--bord)}
.barre-in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.logo img{height:40px;width:auto}
nav{display:flex;align-items:center;gap:18px}
nav a{text-decoration:none;color:var(--encre);font-weight:600;font-size:.95rem}
nav a.langue{border:1.5px solid var(--vert);color:var(--vert-f);border-radius:999px;padding:5px 14px}

.hero{background:linear-gradient(160deg,#fff 0%,#eef8f1 55%,#f3ece4 100%);padding:48px 0 64px}
.hero-in{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center}
.badge{display:inline-block;background:#fff;border:1px solid var(--bord);border-radius:999px;padding:4px 14px;font-size:.9rem;color:var(--gris);margin:0 0 16px}
.hero h1{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;color:var(--brun)}
.hero h1 span{display:block;color:var(--vert)}
.sous{font-size:1.12rem;color:var(--gris);margin:0 0 26px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;text-decoration:none;font-weight:700;border-radius:12px;padding:14px 22px;font-size:1.02rem;text-align:center}
.btn.vert{background:var(--vert);color:#fff;box-shadow:0 6px 18px rgba(33,160,87,.3)}
.btn.vert:hover{background:var(--vert-f)}
.btn.contour{border:2px solid var(--brun);color:var(--brun)}
.btn.blanc{background:#fff;color:var(--vert-f)}

.maquette{position:relative;padding-bottom:30px}
.maquette .pc{background:#1f2a33;border-radius:14px 14px 4px 4px;padding:10px 10px 14px;box-shadow:0 20px 50px rgba(31,42,51,.25)}
.maquette .pc img{border-radius:4px}
.maquette .tel{position:absolute;width:30%;bottom:0;inset-inline-end:-10px;background:#1f2a33;border-radius:22px;padding:7px;box-shadow:0 16px 40px rgba(31,42,51,.35)}
.maquette .tel img{border-radius:16px;aspect-ratio:9/17;object-fit:cover;object-position:top}

.probleme{background:#fff}
.grille3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;padding:0;margin:26px 0 0}
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:16px;padding:20px}
.probleme .carte{background:var(--fond)}
.carte b{display:block;font-size:1.06rem;margin-bottom:6px}
.carte p{margin:0;color:var(--gris)}
.solution{text-align:center;font-size:1.25rem;font-weight:700;color:var(--vert-f);margin:30px 0 0}

.grille4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}
.fonc{background:#fff;border:1px solid var(--bord);border-radius:16px;padding:22px}
.fonc .ico{font-size:1.7rem;width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:#eaf6ee;margin-bottom:12px}
.fonc h3{font-size:1.08rem;color:var(--brun)}
.fonc p{margin:0;color:var(--gris);font-size:.96rem}

.ecrans{background:#fff}
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:28px 0 36px}
.galerie figure{margin:0;text-align:center}
.galerie img{border-radius:22px;border:7px solid #1f2a33;aspect-ratio:9/17;object-fit:cover;object-position:top;box-shadow:0 10px 26px rgba(31,42,51,.18)}
.galerie figcaption{margin-top:10px;font-weight:700;color:var(--brun)}
.pc-seul{max-width:880px;margin:0 auto;background:#1f2a33;border-radius:14px;padding:10px;box-shadow:0 16px 40px rgba(31,42,51,.2)}
.pc-seul img{border-radius:4px}

.etapes li{position:relative;padding-top:30px}
.etapes li span{position:absolute;top:-18px;inset-inline-start:20px;width:40px;height:40px;border-radius:50%;background:var(--vert);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.15rem}

.appel{background:linear-gradient(135deg,var(--vert) 0%,var(--vert-f) 100%);color:#fff}
.appel h2{color:#fff}.appel p{font-size:1.1rem;margin:0 0 22px}

.pied{background:#1f2a33;color:#cfd6dc;padding:36px 0 90px}
.pied-in{text-align:center}
.pied img{margin:0 auto 10px;background:#fff;border-radius:10px;padding:6px 10px;width:120px}
.pied a{color:#fff}.pied p{margin:6px 0}
.pied .gris{color:#8d99a4}

.wa-flottant{position:fixed;bottom:18px;inset-inline-end:18px;width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.25);z-index:30}

@media (max-width:900px){
  .hero-in{grid-template-columns:1fr}
  .grille4{grid-template-columns:repeat(2,1fr)}
  .galerie{grid-template-columns:repeat(2,1fr)}
  .maquette{max-width:560px;margin:0 auto;width:100%}
}
@media (max-width:620px){
  section{padding:42px 0}
  .cache-tel{display:none}
  .grille3,.grille4{grid-template-columns:1fr}
  .etapes .grille3{gap:30px}
  .actions .btn{flex:1 1 100%}
  .maquette .tel{inset-inline-end:0}
  .galerie{gap:14px}
}
.hero h1 sup{font-size:.5em}