/* =========================================================
   Omra Guide — application
   #0F3D2E · #E8F0EA · #C8A96B · #F7F5F2 · #1C1C1C
   Poppins pour toute l'interface
   ========================================================= */

:root{
  --vert:#0F3D2E;
  --vert-2:#175642;
  --vert-pale:#E8F0EA;
  --or:#C8A96B;
  --or-2:#A8873F;
  --or-pale:#F3E9D6;
  --fond:#F7F5F2;
  --ink:#1C1C1C;
  --doux:#6E7671;
  --ligne:#E7E4DF;
  --blanc:#FFFFFF;
  --r:20px;
  --r-sm:14px;
  --om-s:0 1px 3px rgba(28,28,28,.06);
  --om-m:0 10px 30px -12px rgba(15,61,46,.22);
  --om-l:0 26px 60px -24px rgba(15,61,46,.35);
  --barre:74px;             /* hauteur de la barre d'onglets */
  --motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23C8A96B' stroke-width='1'%3E%3Crect x='14' y='14' width='28' height='28'/%3E%3Crect x='14' y='14' width='28' height='28' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E");
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--fond);color:var(--ink);
  font-size:16px;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--barre) + env(safe-area-inset-bottom,0px));
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--or-pale);color:var(--vert)}
:focus-visible{outline:3px solid var(--or);outline-offset:3px;border-radius:6px}

/* Poppins pour tout le latin. L'arabe garde sa propre pile de polices. */
h1,h2,h3,h4,.serif{font-family:'Poppins',sans-serif;font-weight:700;line-height:1.22;letter-spacing:-.03em;color:var(--vert)}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.sec{padding:26px 0}

/* =========================================================
   EN-TÊTE
   ========================================================= */
#hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:.2s}
#hdr.scrolled{border-bottom-color:var(--ligne);box-shadow:0 4px 20px -16px rgba(15,61,46,.4)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:70px}
.marque{display:flex;align-items:center;gap:10px}
.marque .sceau{width:38px;height:38px;flex:none}
.marque .n1{font-size:1.3rem;font-weight:700;letter-spacing:-.035em;color:var(--vert);line-height:1}
.marque .n2{display:block;font-size:.56rem;letter-spacing:.34em;color:var(--doux);margin-top:3px}
.hnav{display:flex;align-items:center;gap:6px}
.hnav a{padding:9px 16px;border-radius:999px;font-size:.88rem;font-weight:500;color:var(--doux);transition:.18s}
.hnav a:hover{background:var(--vert-pale);color:var(--vert)}
.hnav a.on{background:var(--vert-pale);color:var(--vert);font-weight:600}
.hicos{display:flex;align-items:center;gap:8px}
.hico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--doux);transition:.18s}
.hico:hover{background:var(--vert-pale);color:var(--vert)}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;background:linear-gradient(170deg,#FFFDF9 0%,var(--vert-pale) 100%);overflow:hidden;border-radius:0 0 28px 28px}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center;padding:34px 0 30px}
.hero h1{font-size:clamp(1.85rem,4.4vw,3rem);margin-bottom:14px}
.hero h1 .v{color:var(--vert)}
.hero h1 .o{color:var(--or)}
.hero p{color:var(--doux);font-size:1.04rem;line-height:1.7;margin-bottom:24px;max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px}
.hero-vis{position:relative;min-height:210px}
.hero-vis .img{position:absolute;inset:0;border-radius:24px;overflow:hidden;background:var(--vert)}
.hero-vis .img img{width:100%;height:100%;object-fit:cover}
.hero-vis .img.vide::after{content:"";position:absolute;inset:0;background-image:var(--motif);background-size:52px;opacity:.22}

/* =========================================================
   BOUTONS
   ========================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:.92rem;font-weight:600;padding:14px 24px;border:1.5px solid transparent;border-radius:14px;transition:transform .18s,box-shadow .18s,background .18s,color .18s}
.btn svg{flex:none}
.btn-vert{background:var(--vert);color:#fff}
.btn-vert:hover{background:var(--vert-2);transform:translateY(-2px);box-shadow:var(--om-m)}
.btn-or{background:var(--or);color:#fff}
.btn-or:hover{background:var(--or-2);transform:translateY(-2px);box-shadow:var(--om-m)}
.btn-line{background:#fff;color:var(--ink);border-color:var(--ligne)}
.btn-line:hover{border-color:var(--vert);color:var(--vert);transform:translateY(-2px)}
.btn-block{width:100%}

/* =========================================================
   BLOC DE SECTION
   ========================================================= */
.panneau{background:#fff;border-radius:26px;padding:22px 20px;margin-top:20px;box-shadow:var(--om-s)}
.pan-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:18px}
.pan-ico{width:44px;height:44px;flex:none;border-radius:14px;background:var(--vert-pale);color:var(--vert);display:grid;place-items:center}
.pan-txt{flex:1;min-width:0}
.pan-txt h2{font-size:1.3rem;margin-bottom:4px}
.pan-txt p{font-size:.88rem;color:var(--doux);line-height:1.55}
.pan-cpt{flex:none;background:var(--fond);border-radius:999px;padding:7px 14px;font-size:.76rem;font-weight:600;color:var(--doux);white-space:nowrap}
@media (max-width:640px){
  /* sans cela le compteur est comprimé et son texte se coupe */
  .pan-head{flex-wrap:wrap}
  .pan-txt{flex:1 1 100%;order:2}
  .pan-ico{order:1}
  .pan-cpt{order:1;margin-left:auto}
}

/* =========================================================
   CARROUSEL DE BADGES
   ========================================================= */
.carrousel{position:relative}
.piste{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:6px 2px 14px;-ms-overflow-style:none;scrollbar-width:none;
  /* empêche le geste « page précédente » du navigateur quand on arrive au bout */
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
}
.piste:focus-visible{outline:3px solid var(--or);outline-offset:4px;border-radius:12px}
/* pendant le glissement à la souris, le texte ne doit pas se sélectionner */
.piste:active{cursor:grabbing}
.piste img,.piste .badge{user-select:none;-webkit-user-drag:none}
.piste::-webkit-scrollbar{display:none}

.badge{
  flex:0 0 226px;scroll-snap-align:center;background:#fff;border:1px solid var(--ligne);
  border-radius:var(--r);padding:18px 16px 14px;display:flex;flex-direction:column;
  transition:.22s;position:relative;
}
.badge:hover{transform:translateY(-4px);box-shadow:var(--om-m);border-color:var(--or-pale)}
.badge .n{width:28px;height:28px;border-radius:9px;background:var(--vert);color:#fff;font-size:.78rem;font-weight:700;display:grid;place-items:center;margin-bottom:12px}
.badge.or .n{background:var(--or)}
.badge h3{font-size:1.08rem;line-height:1.3;margin-bottom:10px}
/* sous l'illustration : arabe puis phonétique, chacun borné en hauteur
   pour que toutes les cartes du carrousel gardent le même gabarit */
.badge .ar{
  font-size:1.12rem;line-height:2;text-align:center;direction:rtl;
  color:var(--vert);font-family:'Traditional Arabic','Amiri','Segoe UI',serif;
  margin-bottom:7px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.badge .tr{
  font-size:.86rem;line-height:1.6;font-style:italic;color:var(--or-2);
  text-align:center;margin-bottom:11px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.badge .vign{margin-bottom:14px}
.badge .vign{width:96px;height:96px;border-radius:50%;margin:0 auto 12px;background:var(--vert-pale);position:relative;overflow:hidden;flex:none}
.badge .vign img{width:100%;height:100%;object-fit:cover}
.badge .vign.vide::after{content:"";position:absolute;inset:0;background-image:var(--motif);background-size:40px;opacity:.4}
.badge .res{
  font-size:.89rem;color:var(--doux);line-height:1.6;flex:1;margin-bottom:12px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
}
.badge .pied{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--ligne);padding-top:11px}
.badge .det{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:500;color:var(--doux)}
.fav{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#B9C0BB;transition:.18s;flex:none}
.fav:hover{background:var(--vert-pale);color:var(--vert)}
.fav.on{color:var(--or)}
.fav.on svg{fill:currentColor}

.badge.actif{border-color:var(--vert);box-shadow:var(--om-l);transform:translateY(-4px)}
.badge .cta{display:none;margin-top:10px}
.badge.actif .cta{display:block}

.fleche{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;
  border-radius:50%;background:var(--vert);color:#fff;display:grid;place-items:center;
  box-shadow:var(--om-m);transition:.18s;
}
.fleche:hover{background:var(--vert-2);transform:translateY(-50%) scale(1.06)}
.fleche[disabled]{opacity:.28;cursor:default}
.fleche.g{left:-14px}
.fleche.d{right:-14px}
.points{display:flex;justify-content:center;gap:7px;margin-top:4px}
.points i{width:7px;height:7px;border-radius:50%;background:#D8DCD9;transition:.2s;display:block}
.points i.on{background:var(--vert);width:20px;border-radius:999px}

/* =========================================================
   GRILLE (page parcours)
   ========================================================= */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
.grille .badge{flex:none;width:auto}

/* =========================================================
   ATOUTS
   ========================================================= */
.atouts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.atout{background:#fff;border-radius:var(--r);padding:20px 16px;text-align:center;box-shadow:var(--om-s)}
.atout .ic{width:48px;height:48px;border-radius:16px;background:var(--vert-pale);color:var(--vert);display:grid;place-items:center;margin:0 auto 12px}
.atout b{display:block;font-size:.94rem;font-weight:600;color:var(--ink);margin-bottom:5px}
.atout span{font-size:.83rem;color:var(--doux);line-height:1.5}

/* =========================================================
   PAGE ÉTAPE
   ========================================================= */
.et-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0 6px}
.rond-btn{width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:var(--om-s);display:grid;place-items:center;color:var(--vert);transition:.18s;flex:none}
.rond-btn:hover{background:var(--vert-pale)}
.jauge{display:flex;gap:5px;margin:8px 0 6px}
.jauge i{flex:1;height:5px;border-radius:999px;background:#E2E6E3;display:block}
.jauge i.fait{background:var(--or)}
.jauge i.ici{background:var(--vert)}
.et-cpt{text-align:center;font-size:.9rem;color:var(--vert);font-weight:600;margin-bottom:20px}

.et-carte{
  background:#fff;border-radius:26px;padding:26px 22px;box-shadow:var(--om-s);
  /* le navigateur garde le défilement vertical, on ne récupère que l'horizontal */
  touch-action:pan-y;
}
.et-num{width:38px;height:38px;border-radius:12px;background:var(--vert);color:#fff;font-weight:700;display:grid;place-items:center;margin-bottom:14px}
.et-carte h1{font-size:clamp(1.45rem,3.4vw,2rem);margin-bottom:16px}
.et-ar{
  font-size:1.62rem;line-height:2.15;text-align:center;direction:rtl;color:var(--vert);
  font-family:'Traditional Arabic','Amiri','Segoe UI',serif;margin-bottom:12px;
}
.et-tr{
  font-size:1.06rem;font-style:italic;line-height:1.75;color:var(--or-2);
  text-align:center;margin:0 0 22px;padding:0 6px;
}
.et-med{
  width:min(230px,62vw);aspect-ratio:1;margin:4px auto 24px;border-radius:50%;
  overflow:hidden;position:relative;background:var(--vert-pale);box-shadow:var(--om-m);
}
.et-med img{width:100%;height:100%;object-fit:cover}
.et-med.vide::after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,var(--vert),var(--vert-2))}
.et-med.vide::before{content:"";position:absolute;inset:0;z-index:1;background-image:var(--motif);background-size:46px;opacity:.3}
.et-carte p.txt{font-size:1.05rem;line-height:1.8;color:#333B37;margin-bottom:20px}

.enc{background:var(--vert-pale);border-radius:18px;padding:20px 22px;margin-bottom:16px}
.enc h4{display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:600;color:var(--vert);margin-bottom:12px}
.enc ul li{position:relative;padding-left:18px;font-size:.96rem;line-height:1.75;color:#333B37}
.enc ul li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--vert)}

.acc{background:#fff;border:1px solid var(--ligne);border-radius:18px;overflow:hidden;margin-bottom:16px}
.acc-t{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px;font-size:1rem;font-weight:600;color:var(--vert);text-align:left}
.acc-t svg{transition:transform .25s;flex:none}
.acc.open .acc-t svg{transform:rotate(180deg)}
.acc-c{max-height:0;overflow:hidden;transition:max-height .3s ease}
.acc.open .acc-c{max-height:900px}
.acc-in{padding:0 20px 20px}
.acc-in .ar{font-size:1.4rem;line-height:2.05;text-align:right;direction:rtl;color:var(--vert);font-family:'Traditional Arabic','Amiri','Segoe UI',serif;margin-bottom:14px}
.acc-in .tr{font-size:.94rem;font-style:italic;color:var(--or-2);line-height:1.7;margin-bottom:9px}
.acc-in .fr{font-size:.97rem;color:#333B37;line-height:1.7}
.acc-in .src{display:block;margin-top:12px;font-size:.75rem;color:var(--doux);border-top:1px solid var(--ligne);padding-top:10px}

.et-nav{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:20px 0 8px}
.et-nav .btn{padding:15px 14px;font-size:.9rem}
.et-nav .vide{visibility:hidden}
/* affichée uniquement sur les appareils sans souris */
.astuce-swipe{display:none;text-align:center;font-size:.76rem;color:var(--doux);margin-top:4px}
@media (hover:none) and (pointer:coarse){ .astuce-swipe{display:block} }

/* =========================================================
   BARRE D'ONGLETS
   ========================================================= */
.onglets{
  position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--vert);
  display:grid;grid-template-columns:repeat(5,1fr);
  padding:9px 6px calc(9px + env(safe-area-inset-bottom,0px));
  border-radius:22px 22px 0 0;box-shadow:0 -8px 30px -14px rgba(15,61,46,.6);
}
.onglet{display:flex;flex-direction:column;align-items:center;gap:5px;color:rgba(255,255,255,.62);font-size:.72rem;font-weight:500;padding:5px 2px;transition:.18s;position:relative}
.onglet:hover{color:rgba(255,255,255,.9)}
.onglet.on{color:#fff}
.onglet.on::after{content:"";position:absolute;bottom:-3px;width:22px;height:2.5px;border-radius:999px;background:var(--or)}

/* =========================================================
   ÉTAT VIDE (favoris)
   ========================================================= */
.vide-etat{text-align:center;padding:60px 20px}
.vide-etat .ic{width:78px;height:78px;border-radius:50%;background:var(--vert-pale);color:var(--vert);display:grid;place-items:center;margin:0 auto 20px}
.vide-etat h2{font-size:1.35rem;margin-bottom:10px}
.vide-etat p{color:var(--doux);font-size:.92rem;line-height:1.7;max-width:38ch;margin:0 auto 24px}

/* =========================================================
   AVERTISSEMENT
   ========================================================= */
.avert{background:#fff;border-left:4px solid var(--or);border-radius:0 16px 16px 0;padding:18px 20px;margin:22px 0;font-size:.82rem;line-height:1.7;color:var(--doux)}
.avert strong{color:var(--ink)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width:721px){
  .wrap{padding:0 26px}
  .sec{padding:32px 0}
  .panneau{padding:28px 26px}
  .badge{flex:0 0 244px}
}
@media (max-width:900px){
  .hnav{display:none}
  .atouts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .hero-in{grid-template-columns:1fr;padding:24px 0 26px}
  .hero-vis{min-height:170px;order:-1}
  .fleche{display:none}
  .hero-cta .btn{width:100%}

  /* --- une carte occupe toute la largeur, et rien de plus --- */

  /* le point clé : sans cela, toutes les cartes prennent la hauteur de la plus
     haute de la piste, et une carte courte affiche un écran entier de vide */
  .piste{gap:12px;padding:4px 0 10px;align-items:flex-start}

  /* une seule carte à l'écran : on profite de la place pour agrandir le texte */
  .badge{flex:0 0 100%;scroll-snap-align:center;padding:20px 18px 16px}
  .badge .n{margin-bottom:8px}
  .badge h3{font-size:1.3rem;text-align:center;margin-bottom:14px;padding:0 30px;line-height:1.25}
  .badge .vign{width:124px;height:124px;margin-bottom:14px}
  .badge .ar{font-size:1.5rem;line-height:2;margin-bottom:10px;-webkit-line-clamp:2}
  .badge .tr{font-size:1rem;line-height:1.65;margin-bottom:13px;-webkit-line-clamp:2}
  .badge .res{flex:none;text-align:center;font-size:1rem;line-height:1.65;margin-bottom:0;-webkit-line-clamp:3}

  /* le cœur remonte dans le coin, en face du numéro : une ligne de gagnée */
  .badge .pied{position:absolute;top:12px;right:12px;border-top:0;padding:0}
  .badge .det{display:none}          /* redondant avec le bouton ci-dessous */
  .badge .cta{display:block;margin-top:14px;padding:15px;font-size:1rem}

  /* la mise en avant n'a plus de sens quand une seule carte est visible */
  .badge.actif{transform:none;box-shadow:none;border-color:var(--ligne)}

  /* on resserre aussi ce qui entoure le carrousel */
  .sec{padding:18px 0}
  .panneau{padding:18px 14px;margin-top:14px;border-radius:22px}
  .et-carte{padding:24px 18px}
  .et-carte h1{font-size:1.62rem}
  .et-ar{font-size:1.72rem}
  .et-tr{font-size:1.08rem}
  .et-carte p.txt{font-size:1.06rem;line-height:1.8}
  .enc{padding:18px 18px}
  .enc ul li{font-size:1rem}
  .pan-head{margin-bottom:14px}
  .pan-txt h2{font-size:1.24rem}
  .pan-txt p{font-size:.92rem;line-height:1.55}
  .atouts{margin-top:14px;gap:10px}
  .atout{padding:16px 12px}
}
@media (max-width:480px){
  .badge{flex:0 0 214px}
  .et-nav{grid-template-columns:1fr}
  .atouts{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .piste{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
}