:root{--green:#1A6B3A;--green-dark:#134f2b;--green-light:#e8f5ed;--green-mid:#2d8a50;
--gold:#D4A017;--gold-light:#fdf6e3;--gold-dark:#b8880f;--white:#fff;
--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-500:#6b7280;--gray-700:#374151;--gray-900:#111827;
--shadow-sm:0 1px 2px rgba(0,0,0,.05);--shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
--shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);
--radius:12px;--radius-lg:20px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--gray-900);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--gray-200);height:68px;display:flex;align-items:center}
.nav-inner{max-width:1200px;width:100%;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-icon{font-size:1.5rem;line-height:1}
.logo-text{font-size:1.15rem;font-weight:800;color:var(--green);letter-spacing:-.3px}
.logo-text span{color:var(--gold)}
.nav-links{display:flex;list-style:none;gap:2px}
.nav-links a{text-decoration:none;color:var(--gray-700);font-size:.9rem;font-weight:500;padding:8px 14px;border-radius:8px;transition:all .2s}
.nav-links a:hover{background:var(--green-light);color:var(--green)}
.head{background:linear-gradient(135deg,var(--green-dark),var(--green) 55%,var(--green-mid));padding:104px 24px 44px;color:var(--white)}
.head-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:26px}
.logo-slot{flex-shrink:0;width:104px;height:104px;border-radius:var(--radius);background:var(--white);
 border:1px solid rgba(255,255,255,.6);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:12px}
.logo-slot img{max-width:100%;max-height:100%;object-fit:contain;display:block;image-rendering:auto}
.mono{width:100%;height:100%;border-radius:8px;background:var(--green-light);color:var(--green);
 display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.55rem;letter-spacing:-.5px}
.head h1{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:-.5px;line-height:1.18;margin-bottom:6px}
.head p{color:rgba(255,255,255,.82);font-size:.98rem}
.badge{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
 padding:4px 12px;border-radius:100px;font-size:.76rem;font-weight:600;letter-spacing:.4px;margin-bottom:10px}
.bc{max-width:1200px;margin:0 auto;padding:16px 24px 0;font-size:.8rem;color:var(--gray-500)}
.bc a{color:var(--green);text-decoration:none}.bc a:hover{text-decoration:underline}
.wrap{max-width:1200px;margin:0 auto;padding:16px 24px 72px;display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:start}
.card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:28px 30px;margin-bottom:20px;box-shadow:var(--shadow-sm)}
.card h2{font-size:1.12rem;font-weight:800;letter-spacing:-.2px;margin-bottom:14px}
p,li{font-size:.93rem;color:var(--gray-700)}
dl{display:grid;grid-template-columns:132px 1fr;gap:10px 18px;font-size:.93rem}
dt{color:var(--gray-500);font-weight:500}dd{color:var(--gray-900);font-weight:600}
dd a{color:var(--green);text-decoration:none}dd a:hover{text-decoration:underline}
.just{border-radius:var(--radius);padding:18px 20px}
.just-org{background:var(--green-light);border:1px solid #A7F3D0}
.just-ens{background:var(--gray-100);border:1px solid var(--gray-200)}
.just b{display:block;font-size:1rem;font-weight:800;margin-bottom:6px}
.just-org b{color:var(--green-dark)}.just-ens b{color:var(--gray-700)}
.just small{display:block;color:var(--gray-700);font-size:.85rem;line-height:1.65}
.src{margin-top:14px;font-size:.8rem;color:var(--gray-500)}.src a{color:var(--green)}
.alert{background:var(--gold-light);border:1px solid var(--gold);border-radius:var(--radius);padding:15px 18px;margin-bottom:20px}
/* ⚠️ Couleur corrigee le 18/09/2026, apres mesure.
   Le texte etait en --gold-dark (#b8880f) sur --gold-light (#fdf6e3) :
   rapport de contraste 2,96, pour un minimum exige de 4,5 (WCAG 2.1 AA).
   Ces encadres portent l avertissement sur la portee du justificatif — la
   phrase la plus importante de la fiche sur le plan juridique, et celle
   qu il faut pouvoir lire. Elle etait la moins lisible de la page.
   Le brun fonce #92400E sur le meme fond donne 6,57. Le fond, la bordure et
   la place de l encadre ne changent pas : seule l encre fonce. */
.alert p{color:#92400E;font-size:.88rem;font-weight:600;margin:0}
.btn{display:inline-block;background:var(--green);color:var(--white);text-decoration:none;font-weight:700;font-size:.9rem;padding:12px 24px;border-radius:10px;box-shadow:var(--shadow-sm);transition:all .2s}
.btn:hover{background:var(--green-dark)}
.btn-o{background:var(--white);color:var(--green);border:1.5px solid var(--green)}
.btn-o:hover{background:var(--green-light)}

/* ⚠️ Corrige le 13/09/2026, signale par Farid en bas de la page A propos :
   « Nous ecrire » et « Retour a l annuaire » se chevauchaient sur telephone.

   Cause. Les deux boutons sont des « inline-block » poses cote a cote, le
   second decale par un margin-left ecrit en style en ligne. Sur un ecran de
   375 px la largeur cumulee (environ 315 px de boutons dans une carte qui
   n en offre que 295) depasse : le second passe a la ligne. La hauteur de
   ligne, elle, est calculee sur la police, pas sur les 24 px de
   remplissage vertical des boutons — les deux pastilles se recouvrent donc
   de quelques pixels. C est le meme defaut que le menu deroulant du haut,
   corrige le meme jour.

   Correction. En dessous de 560 px on sort completement de la mise en page
   en ligne : chaque bouton devient un bloc pleine largeur, empile, avec un
   ecart franc de 10 px. Le !important est necessaire pour neutraliser les
   margin-left ecrits en style en ligne dans le HTML, qui priment sur une
   feuille de style. Sur un telephone c est de toute facon la bonne forme :
   une cible tactile large, impossible a manquer.

   Cette regle vaut pour les cinq pages qui portent ce couple de boutons :
   /a-propos, /annuaire, /faq, /en/about et /en/directory. */
@media (max-width:560px){
  a.btn{display:block;width:100%;text-align:center;
        margin-left:0!important;margin-right:0!important}
  a.btn + a.btn{margin-top:10px}
}
.near a{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--gray-200);border-radius:10px;
 text-decoration:none;color:var(--gray-700);font-size:.88rem;margin-bottom:8px;transition:all .2s}
.near a:hover{border-color:var(--green);color:var(--green);background:var(--green-light)}
.near .m{width:30px;height:30px;border-radius:7px;background:var(--green-light);color:var(--green);
 display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.72rem;flex-shrink:0}
footer{background:var(--gray-900);color:rgba(255,255,255,.7);padding:44px 24px 30px;text-align:center}
footer p{color:rgba(255,255,255,.5);font-size:.84rem;margin-bottom:12px}
footer a{color:rgba(255,255,255,.45);text-decoration:none;margin:0 10px;font-size:.84rem}
footer a:hover{color:var(--gold)}
@media(max-width:900px){.wrap{grid-template-columns:1fr}}
@media(max-width:640px){.head{padding:92px 20px 34px}.head-in{flex-direction:column;align-items:flex-start;gap:16px}
 .logo-slot{width:82px;height:82px}dl{grid-template-columns:1fr;gap:2px}dt{margin-top:10px}
 .nav-links a{padding:8px 8px;font-size:.8rem;white-space:nowrap}.card{padding:22px 20px}
 /* ⚠️ Barre de navigation mobile — corrige le 13/09/2026.
    Les quatre liens et le logo ne tiennent pas sur 375 px : « Annuaire »
    chevauchait le nom de la marque et « Contact » sortait de l ecran.
    La barre est en position fixe avec une hauteur imposee de 68 px, et le
    padding superieur des en-tetes la compense ; la faire passer sur deux
    lignes decalerait donc toutes les pages. On garde une seule ligne et on
    rend la liste des liens defilable horizontalement : le logo reste entier,
    les liens restent atteignables, la hauteur ne bouge pas. */
 .nav-inner{padding:0 14px;gap:10px}
 .logo{flex:0 0 auto;min-width:0}
 .logo-text{font-size:1rem}
 .nav-links{flex:1 1 auto;min-width:0;justify-content:flex-end;gap:0;
   overflow-x:auto;overscroll-behavior-x:contain;
   scrollbar-width:none;-ms-overflow-style:none}
 .nav-links::-webkit-scrollbar{display:none}
 .nav-links li{flex:0 0 auto}}

/* Sous 430 px — la largeur d un telephone courant tenu en portrait — meme le
   defilement ne suffit pas : le nom de la marque et le premier lien se
   chevauchaient. Le texte « HalalSpot.fr » cede la place au picto seul, qui
   reste un lien vers l accueil et porte deja l identite. Les quatre liens
   tiennent alors sans defilement.
   Le nom reste lu par les lecteurs d ecran : c est l attribut aria-label du
   lien qui porte « HalalSpot — Accueil », pas ce texte. */
@media(max-width:430px){
  .logo-text{display:none}
  .nav-links{justify-content:flex-end}
  .nav-links a{padding:8px 7px;font-size:.78rem}

  /* ⚠️ Complement du 13/09/2026 — apres signalement sur /a-propos.
     Toutes les pages n ont pas la meme barre. L accueil, « A propos » et
     « Contact » portent SIX entrees au lieu de quatre — « Questions
     frequentes » en fait vingt caracteres a elle seule — plus un selecteur
     FR / EN. Masquer le nom de la marque ne suffisait donc pas sur ces
     trois pages.
     Deux entrees s effacent sous 430 px :
       - « Questions frequentes », qui reste atteignable depuis le pied de
         page et depuis « A propos » ;
       - le selecteur de langue, egalement present en pied de page.
     Les liens essentiels — Annuaire, Espace pro, A propos, Contact —
     restent tous visibles. */
  .nav-long{display:none}
  nav .lang{display:none}
}.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.gal figure{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--gray-200);background:var(--gray-50)}
.gal img{width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:4/3}
.livs{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.liv{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:10px;
 text-decoration:none;font-weight:700;font-size:.9rem;box-shadow:var(--shadow-sm);transition:filter .2s}
.liv:hover{filter:brightness(.93)}
.liv::before{content:'';width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.85);flex-shrink:0}
.just-verif{background:linear-gradient(135deg,#ECFDF5,#e8f5ed);border:1.5px solid var(--green)}
.just-verif b{color:var(--green-dark);display:flex;align-items:center;gap:8px}
.just-verif b::before{content:'';width:20px;height:20px;flex-shrink:0;
 background:url("/assets/verifie.svg") center/contain no-repeat}

/* Reseaux sociaux : bouton sobre, le picto porte la couleur de la plateforme,
   le fond reste neutre pour ne pas transformer la fiche en mur de logos. */
.socs{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.soc{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:10px;
 background:var(--white);border:1.5px solid var(--gray-200);text-decoration:none;
 font-size:.88rem;font-weight:700;color:var(--gray-700);transition:all .18s}
.soc:hover{border-color:var(--gray-300);box-shadow:var(--shadow);transform:translateY(-1px)}
.soc svg{flex-shrink:0}
.soc:focus-visible{outline:2px solid var(--green);outline-offset:2px}


/* ── Écrans tactiles ─────────────────────────────────────────────────
   Safari iOS agrandit automatiquement la page dès qu'un champ de saisie
   reçoit le focus si sa police fait moins de 16 px. L'utilisateur se
   retrouve zoomé sans l'avoir demandé, et la page ne revient pas seule.
   On force donc 16 px sur tous les champs en dessous de 640 px de large,
   quelle que soit la taille déclarée par ailleurs. */
@media (max-width:640px){
  input,textarea,select,button{font-size:16px}
  .form-i,.form-t,.form-s,.champ,.rech input,.filtres select{font-size:16px}
}

/* Zone tactile : 44 px est le minimum recommandé par Apple, 48 dp par
   Google. En dessous, un doigt touche l'élément voisin. */
@media (pointer:coarse){
  a.btn,button,.nav-links a,.fcard,.res button,.soc,.liv{min-height:44px}
  .nav-links a{display:inline-flex;align-items:center}
  button,a.btn{touch-action:manipulation}
}

/* Encoche et barre d'accueil : sans ces marges, le contenu passe dessous
   sur iPhone en orientation paysage. */
@supports(padding:max(0px)){
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  footer{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
}

/* Le rectangle gris que WebKit affiche à chaque appui est inutile ici :
   les états de survol et de focus sont déjà traités. */
*{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* Débordement horizontal : une seule ligne trop longue fait apparaître un
   défilement latéral sur toute la page, défaut très visible sur mobile. */
html,body{overflow-x:hidden;max-width:100%}
img,svg,table,pre{max-width:100%;height:auto}
.recu,.champ{overflow-wrap:anywhere}

/* Défilement fluide sur iOS pour les zones à hauteur limitée. */
.res,.recu{-webkit-overflow-scrolling:touch}