/* Guichet — application mobile : onglets bas, listes tactiles, formes rondes. */
:root{
  --papier:#FFFFFF; --papier-2:#F1F3F7;
  --encre:#151221; --encre-2:#453F58; --gris:#7B738C;
  --vert:#00A86B; --vert-fonce:#008554; --menthe:#D8F7EA;
  --accent:#FFB703; --accent-clair:#FFF3D4; --accent-encre:#151221;
  --rose:#FF4D6D;
  --brique:#FF4D6D; --brique-clair:#FFE3E8;
  --lignes:#E8E9F0; --lignes-2:#F2F3F7;
  --r:16px; --r-lg:20px; --r-sm:12px; --r-btn:999px; --r-chip:999px;
  --bord:1px; --bord-fort:2px;
  --font:'Outfit','Noto Sans Arabic',system-ui,sans-serif;
  --poids-titre:800; --espacement-titre:-.035em;
  --carte-fond:#FFFFFF; --carte-bord:#E8E9F0;
  --corps:16px;
}
html[dir="rtl"] body{font-family:'Noto Sans Arabic',sans-serif}
.g-body{background:#fff;padding-bottom:78px}

.g-tete{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--lignes);
  display:flex;align-items:center;justify-content:space-between;padding:12px 18px}
.g-logo{font-weight:800;font-size:19px;letter-spacing:-.04em;color:var(--encre);text-decoration:none!important}
.g-logo span{color:var(--vert)}
.g-tete-actions{display:flex;gap:8px}
.g-rond{width:38px;height:38px;border-radius:50%;background:var(--papier-2);display:flex;
  align-items:center;justify-content:center;color:var(--encre);text-decoration:none!important;
  font-size:13px;font-weight:700}
.g-rond:hover{background:var(--vert);color:#fff}

.g-hero{background:var(--vert);color:#fff;padding:26px 0 30px;border-radius:0 0 28px 28px;margin-bottom:22px}
.g-hero h1{color:#fff;font-size:clamp(25px,6.4vw,34px);max-width:16ch;margin-bottom:18px}
.g-cherche{display:flex;background:#fff;border-radius:999px;padding:6px 6px 6px 20px;align-items:center}
.g-cherche input{border:0;background:transparent;flex:1;font:inherit;font-size:16px;min-height:44px;padding:0}
.g-cherche input:focus{box-shadow:none}
.g-cherche button{border:0;background:var(--encre);color:#fff;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.g-raccourcis{display:flex;gap:8px;margin-top:14px;overflow-x:auto;padding-bottom:2px}
.g-pastille{border:0;background:rgba(255,255,255,.2);color:#fff;border-radius:999px;padding:9px 16px;
  font:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;text-decoration:none!important}
.g-pastille:hover{background:#fff;color:var(--vert)}

.g-section{margin-bottom:26px}
.g-titre{font-size:18px;margin-bottom:12px}
.g-domaines{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
.g-domaine{background:var(--papier-2);border-radius:16px;padding:16px 14px;font-weight:600;font-size:14.5px;
  color:var(--encre);text-decoration:none!important;display:flex;align-items:center;min-height:62px}
.g-domaine:nth-child(4n+1){background:#D8F7EA}
.g-domaine:nth-child(4n+2){background:#FFE3E8}
.g-domaine:nth-child(4n+3){background:#FFF3D4}
.g-domaine:nth-child(4n){background:#E6E4FB}
.g-domaine:hover{background:var(--encre);color:#fff}

.g-defile{display:flex;gap:11px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.g-vignette{flex:0 0 220px;scroll-snap-align:start;background:#fff;border:1px solid var(--lignes);
  border-radius:18px;padding:15px;display:flex;flex-direction:column;gap:5px;
  color:var(--encre);text-decoration:none!important}
.g-vignette:hover{border-color:var(--vert)}
.g-date{color:var(--rose);font-weight:700;font-size:13px}

.g-ligne{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--lignes);
  border-radius:18px;padding:15px 17px;color:var(--encre);text-decoration:none!important}
.g-ligne:hover{border-color:var(--vert);background:#FAFFFC}
.g-ligne-corps{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.g-ligne-bas{display:flex;gap:9px;align-items:center;margin-top:5px;flex-wrap:wrap}
.g-prix{font-weight:800;color:var(--vert);font-size:16px}
.g-chevron{color:var(--gris);flex-shrink:0}
.g-anneau{flex-shrink:0;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--rose) calc(var(--p) * 1%), var(--papier-2) 0)}
.g-anneau span{width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;
  font-size:12.5px;font-weight:800}
.g-anneau small{font-size:9px;font-weight:600}

.g-pied-liens{display:flex;gap:16px;flex-wrap:wrap;padding:24px 20px 10px;font-size:13px;
  border-top:1px solid var(--lignes);margin-top:24px}
.g-pied-liens a{color:var(--gris)}

.g-onglets{position:fixed;bottom:0;left:0;right:0;z-index:60;background:#fff;
  border-top:1px solid var(--lignes);display:flex;padding-bottom:env(safe-area-inset-bottom,0)}
.g-onglets a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px;
  color:var(--gris);text-decoration:none!important;font-size:11px;font-weight:600}
.g-onglets a.on{color:var(--vert)}
.g-onglets a.on svg{stroke-width:2.4}

.grid.g3,.grid.g2{grid-template-columns:1fr}
.card{border-radius:20px}
.segments i{border-radius:50%}
@media (min-width:900px){
  .wrap{max-width:860px}
  .grid.g2{grid-template-columns:repeat(2,1fr)}
}