*{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{font-family:var(--texte);background:var(--fond);color:var(--encre);line-height:1.65;-webkit-font-smoothing:antialiased}
    body::before{content:'';position:fixed;inset:0;z-index:2147483647;pointer-events:none;opacity:.05;
      background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.8%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27180%27%20height%3D%27180%27%20filter%3D%27url(%23g)%27%2F%3E%3C%2Fsvg%3E");background-size:180px}
    img{max-width:100%;display:block}
    a{color:var(--primaire)}
    :focus-visible{outline:3px solid var(--primaire);outline-offset:2px;border-radius:4px}
    .wrap{max-width:820px;margin:0 auto;padding:0 20px}
    h1,h2,h3{font-family:var(--titres);line-height:1.12;font-weight:700}

    /* ---- reveals orchestrés au scroll (IntersectionObserver, ~10 lignes de JS) ---- */
    html.js .rv{opacity:0;transform:translateY(22px)}
    html.js .rv.vu{opacity:1;transform:none;
      transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);
      transition-delay:calc(var(--d,0)*80ms)}
    @media(prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none}}

    /* ---- barre du haut : marque + fil d'ariane + langues ---- */
    .navhaut{display:flex;align-items:center;justify-content:space-between;gap:14px;
      max-width:820px;margin:0 auto;padding:14px 20px;position:relative;z-index:3}
    .ariane{display:flex;align-items:center;gap:8px;min-width:0;font-size:.86rem}
    .ariane .marque{display:inline-flex;align-items:center;gap:6px;font-weight:800;text-decoration:none;color:var(--encre);flex:none}
    .ariane .marque:hover span{color:var(--primaire)}
    .ariane .sep{color:var(--encre-douce);flex:none}
    .ariane a:not(.marque){color:var(--encre-douce);text-decoration:none;white-space:nowrap}
    .ariane a:not(.marque):hover{color:var(--primaire);text-decoration:underline}
    .ariane .ici{color:var(--encre-douce);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
    @media(max-width:520px){.ariane .marque span{display:none}} /* mobile : l'icône suffit, place au fil d'ariane */
    .langbar{display:flex;gap:6px;flex:none}
    /* 44 px de haut : cinq langues collées les unes aux autres, c'est l'endroit
       où l'on se trompe de cible le plus facilement au pouce. */
    .langbar a{font-size:.78rem;text-decoration:none;padding:4px 10px;border-radius:99px;color:var(--encre-douce);border:1px solid transparent;font-weight:600;
      display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
    .langbar a.on{border-color:var(--primaire);color:var(--primaire)}
    .langbar a:hover{color:var(--primaire)}

    /* ---- HÉRO fiche : texte + photo en ARCHE MAROCAINE (signature visuelle) ---- */
    .hero{position:relative;padding:30px 0 46px;overflow:hidden}
    .hero::before{content:'';position:absolute;inset:0;background-image:var(--motif);
      -webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent)}
    .hero::after{content:'';position:absolute;inset:0;pointer-events:none;
      background:radial-gradient(70rem 34rem at 82% -12%,color-mix(in srgb,var(--primaire) 13%,transparent),transparent 62%),
                 radial-gradient(48rem 26rem at -10% 110%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 60%)}
    .hero .wrap{position:relative;z-index:1}
    .hero-grille{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:end}
    @media(max-width:680px){.hero-grille{grid-template-columns:1fr;gap:24px}}
    .badge{display:inline-flex;align-items:center;gap:7px;font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);font-weight:800;margin-bottom:16px;
      background:var(--surface);padding:6px 12px;border-radius:99px;box-shadow:0 1px 3px var(--ombre)}
    .badge::before{content:'';width:8px;height:8px;border-radius:99px;background:var(--accent)}
    .etat{display:inline-flex;align-items:center;gap:7px;font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;font-weight:800;
      margin:0 0 16px 8px;background:var(--surface);padding:6px 12px;border-radius:99px;box-shadow:0 1px 3px var(--ombre)}
    .etat:first-child{margin-left:0}
    .etat.ouvert{color:#1E6E5C}.etat.ferme{color:#B0432A}
    .etat.ftour{color:#6B4E9E}  /* Ramadan : heure de rupture du jeûne */
    .badge-revoir{color:#8A6A1F}          /* vérification de plus de 12 mois */
    .badge-revoir::before{background:#C89B3C}
    .badge small{font-weight:600;opacity:.75;text-transform:none;letter-spacing:0}
    .etat-pt{font-size:.9em}.etat-pt.ok{color:#1E6E5C}.etat-pt.ko{color:#B0432A}
    h1{font-size:clamp(2.2rem,7.5vw,3.6rem);margin-bottom:10px;letter-spacing:-.01em}
    .accroche{font-size:1.15rem;color:var(--encre-douce);max-width:32em}
    .lieu{margin-top:14px;font-size:.92rem;color:var(--encre-douce)}
    .lieu strong{color:var(--encre)}
    .lieu a{color:var(--encre-douce)}
    .preuve{margin-top:10px;font-size:.88rem;color:var(--encre-douce)}
    .preuve strong{color:var(--primaire);font-weight:800}
    .arche-cadre{width:100%;aspect-ratio:3/4;border-radius:999px 999px var(--radius) var(--radius);overflow:hidden;
      box-shadow:0 18px 50px -18px color-mix(in srgb, var(--primaire) 55%, transparent);
      border:5px solid var(--surface);position:relative}
    .arche{width:100%;height:100%;object-fit:cover}
    @media(prefers-reduced-motion:no-preference){
      .arche{animation:kenburns 16s ease-in-out infinite alternate}
      @keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
    }
    .arche-vide{display:grid;place-items:center;background:color-mix(in srgb,var(--primaire) 9%,var(--surface));background-image:var(--motif)}
    .arche-vide .cat-ico{width:46%;color:var(--primaire);opacity:.8}
    .arche-vide .cat-ico svg{width:100%;height:auto}
    @media(max-width:680px){.arche-cadre{max-width:320px;margin:0 auto;aspect-ratio:4/5}}
    @media(prefers-reduced-motion:no-preference){
      .hero-grille>*{animation:lever .7s cubic-bezier(.2,.7,.2,1) both}
      .hero-grille>*:nth-child(2){animation-delay:.14s}
      @keyframes lever{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
    }

    /* ---- boutons ---- */
    .cta-zone{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
    .btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:var(--radius);
      font-weight:800;text-decoration:none;font-size:1rem;font-family:var(--texte);border:none;cursor:pointer;
      transition:transform .14s,box-shadow .14s}
    .btn-wa{background:var(--primaire);color:var(--sur-primaire);box-shadow:0 6px 18px -8px var(--primaire)}
    .btn-wa:hover{transform:translateY(-2px);box-shadow:0 10px 22px -8px var(--primaire)}
    .btn-wa:active{background:var(--primaire-fonce);color:var(--sur-primaire-fonce);transform:none}
    .btn-sec{background:var(--surface);color:var(--encre);border:1.5px solid color-mix(in srgb, var(--encre) 25%, transparent)}
    .btn-sec:hover{transform:translateY(-2px)}
    .btn svg{flex:none}
    .btn[disabled]{opacity:.6;cursor:wait;transform:none}

    /* ---- sections ---- */
    section{padding:38px 0;border-top:1px solid color-mix(in srgb, var(--encre) 9%, transparent)}
    h2{font-size:1.6rem;margin-bottom:20px;display:flex;align-items:baseline;gap:12px}
    h2 .tiret{flex:none;width:30px;height:4px;background:var(--primaire);border-radius:2px;transform:translateY(-7px)}

    /* ---- menu à POINTS DE CONDUITE (vraie carte de restaurant) ---- */
    .ligne{display:flex;align-items:baseline;gap:8px;padding:12px 0}
    .ligne .pointille{flex:1;border-bottom:2px dotted color-mix(in srgb, var(--encre) 30%, transparent);transform:translateY(-4px)}
    .ligne .prix{font-weight:800;color:var(--primaire);white-space:nowrap;font-size:1.02rem}
    .ligne .nom-s{font-weight:600}

    /* ---- créneaux hommes / femmes (hammam) : deux colonnes lisibles d'un coup d'œil ---- */
    .creneaux{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
    .creneau{background:var(--surface);border-radius:var(--radius);padding:18px 20px;box-shadow:0 1px 3px var(--ombre)}
    .creneau h3{font-size:1.02rem;margin-bottom:12px;display:flex;align-items:center;gap:9px}
    .creneau h3 span{font-size:1.25rem;line-height:1}
    .creneau dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:.93rem;margin:0}
    .creneau dt{color:var(--encre-douce);text-transform:capitalize}
    .creneau dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
    .creneau dd.off{font-weight:400;color:var(--encre-douce)}
    .creneaux-note{margin-top:14px;font-size:.86rem;color:var(--encre-douce)}
    .badge-guide{color:#2F6F4E}
    .badge-guide::before{background:#2F6F4E}

    /* ---- galerie éditoriale : 1re photo pleine largeur, rythme asymétrique ---- */
    .galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
    .galerie img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);
      grid-column:span 2;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s;cursor:zoom-in}
    .galerie img:first-child{grid-column:span 4;aspect-ratio:16/8}
    .galerie img:nth-child(6n+6){grid-column:span 4;aspect-ratio:16/7}
    .galerie img:hover{transform:scale(1.015);box-shadow:0 14px 34px -12px var(--ombre)}
    @media(max-width:520px){.galerie img{grid-column:span 4}}

    /* ---- lightbox <dialog> natif ---- */
    #lb{border:none;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh}
    #lb::backdrop{background:rgba(12,9,6,.9)}
    #lb[open]{display:grid;place-items:center}
    #lb img{max-width:92vw;max-height:86vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
    #lb button{position:fixed;background:rgba(255,255,255,.12);color:#fff;border:none;border-radius:99px;
      width:46px;height:46px;font-size:1.3rem;cursor:pointer;backdrop-filter:blur(6px)}
    #lb button:hover{background:rgba(255,255,255,.25)}
    #lb .lb-x{top:18px;right:18px}
    #lb .lb-p{left:14px;top:50%;transform:translateY(-50%)}
    #lb .lb-n{right:14px;top:50%;transform:translateY(-50%)}

    /* ---- LA BOUSSOLE SOUK ---- */
    .boussole{background:var(--surface);border-radius:calc(var(--radius) + 4px);overflow:hidden;
      box-shadow:0 1px 3px var(--ombre),0 10px 34px var(--ombre)}
    .boussole iframe{width:100%;height:270px;border:0;display:block}
    .boussole-corps{padding:22px}
    .pluscode{display:flex;align-items:center;gap:14px;margin:16px 0;padding:14px 16px;border-radius:calc(var(--radius) - 2px);
      background:color-mix(in srgb, var(--primaire) 7%, var(--surface));border:2px dashed var(--primaire)}
    .pluscode code{font-size:1.35rem;font-weight:900;letter-spacing:.06em;color:var(--primaire);font-family:ui-monospace,monospace}
    .pluscode small{color:var(--encre-douce);line-height:1.45}
    .infos-grille{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;font-size:.93rem}
    .infos-grille div span{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--encre-douce);margin-bottom:2px;font-weight:700}
    @media(max-width:520px){.infos-grille{grid-template-columns:1fr}}
    .btn-avis{margin-top:18px;font-size:.92rem;padding:11px 18px}
    .btn-avis .etoiles{color:#E8A33D;letter-spacing:.12em;font-size:.88em}

    /* ---- hébergement : prix héro, équipements, réservation ---- */
    .hero-prix{margin-top:14px;font-size:1.05rem;color:var(--encre-douce)}
    .hero-prix strong{font-family:var(--titres);font-size:1.7rem;color:var(--primaire);margin-right:4px}
    .equip-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
      background:color-mix(in srgb,var(--encre) 10%,transparent);border:1px solid color-mix(in srgb,var(--encre) 10%,transparent);
      border-radius:calc(var(--radius) + 2px);overflow:hidden}
    .equip-cell{background:var(--surface);padding:16px 18px;display:flex;align-items:center;gap:12px;font-weight:600;font-size:.96rem}
    .equip-ico{flex:none;width:26px;height:26px;color:var(--primaire)}
    .equip-ico svg{width:100%;height:100%}
    .equip-libre{margin-top:16px;color:var(--encre-douce);font-size:.95rem}
    .equip-libre strong{color:var(--encre)}
    .reserver .resa-carte{background:var(--surface);border-radius:calc(var(--radius) + 4px);padding:26px 24px;text-align:center;
      box-shadow:0 1px 3px var(--ombre),0 10px 34px var(--ombre)}
    .resa-prix{font-family:var(--titres);font-size:clamp(2.2rem,6vw,3rem);color:var(--primaire);line-height:1;margin-bottom:18px}
    .resa-prix small{font-size:.32em;color:var(--encre-douce);letter-spacing:.06em;margin-left:6px}
    .reserver .resa-carte .btn{padding:15px 34px}
    .resa-rarete{margin-top:16px;font-size:.82rem;letter-spacing:.04em;color:var(--encre-douce)}

    /* ---- compositeur WhatsApp (demande → WhatsApp du commerçant) ---- */
    .contact-sous{margin:-8px 0 18px;color:var(--encre-douce);max-width:38em}
    .lead{background:var(--surface);border-radius:calc(var(--radius) + 4px);padding:24px;
      box-shadow:0 1px 3px var(--ombre),0 10px 34px var(--ombre)}
    .lead .duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    @media(max-width:520px){.lead .duo{grid-template-columns:1fr}}
    .lead label{display:block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--encre-douce);margin:12px 0 5px}
    .lead label small{font-weight:600;text-transform:none;letter-spacing:0;opacity:.75}
    .lead input,.lead textarea{width:100%;padding:12px 14px;border:1.5px solid color-mix(in srgb,var(--encre) 18%,transparent);
      border-radius:calc(var(--radius) - 2px);font-size:1rem;font-family:var(--texte);background:var(--fond);color:var(--encre)}
    .lead textarea{min-height:96px;resize:vertical}
    .lead button{margin-top:16px}
    /* Pot de miel anti-spam. La regle etait limitee a .lead : dans le formulaire
       de signalement, le champ s'affichait donc en clair — et un visiteur qui
       tapait dedans voyait un accuse de reception alors qu'on jetait son
       message. Il est desormais introuvable partout ou il est pose. */
    .hp{position:absolute;left:-5000px;width:1px;height:1px;opacity:0;pointer-events:none}
    .lead-ok{display:none;margin-top:14px;padding:12px 16px;border-radius:calc(var(--radius) - 2px);font-weight:600;
      background:color-mix(in srgb,#1E6E5C 12%,var(--surface));color:var(--encre)}

    /* ---- footer ---- */
    /* Le pied porte AUSSI la classe .wrap, dont la regle de remplissage
       horizontal l'emporte sur un selecteur d'element : les 40 px du haut et
       les 96 px du bas n'existaient tout simplement pas, et les liens se
       collaient au filet. On monte donc le selecteur d'un cran (footer.wrap) :
       meme regle, mais qui gagne. */
    footer.wrap{padding:40px 20px 96px;text-align:center;color:var(--encre-douce);font-size:.85rem;border-top:1px solid color-mix(in srgb, var(--encre) 9%, transparent)}
    footer a{color:var(--encre-douce)}
    footer .agence{margin-top:6px}
    footer .agence a{font-weight:800;color:var(--primaire);text-decoration:none}

    /* ---- barre WhatsApp collante mobile ---- */
    .sticky-wa{position:fixed;bottom:0;left:0;right:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
      background:color-mix(in srgb, var(--fond) 86%, transparent);backdrop-filter:blur(10px);display:flex;justify-content:center;z-index:50}
    .sticky-wa .btn{width:100%;max-width:760px;justify-content:center}
    @media(min-width:821px){.sticky-wa{display:none}}

    /* ---- annuaire : HÉRO ÉDITORIAL + arches décoratives ---- */
    .an-hero{position:relative;padding:64px 0 46px;overflow:hidden}
    .an-hero::before{content:'';position:absolute;inset:0;background-image:var(--motif);
      -webkit-mask-image:linear-gradient(#000 20%,transparent 85%);mask-image:linear-gradient(#000 20%,transparent 85%)}
    .an-hero::after{content:'';position:absolute;inset:0;pointer-events:none;
      background:radial-gradient(60rem 30rem at 88% -10%,color-mix(in srgb,var(--primaire) 14%,transparent),transparent 60%),
                 radial-gradient(40rem 22rem at 0% 115%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 55%)}
    .an-hero .wrap{position:relative;z-index:1}
    .an-hero h1{font-size:clamp(2.6rem,8.5vw,4.8rem);letter-spacing:-.015em;max-width:14em}
    .an-hero p{margin-top:16px;color:var(--encre-douce);max-width:34em;font-size:clamp(1.02rem,2.5vw,1.18rem)}
    .arche-deco{position:absolute;border-radius:999px 999px 28px 28px;pointer-events:none;z-index:0}
    .arche-deco.a1{right:-4%;top:10%;width:min(30vw,340px);aspect-ratio:3/4.4;
      border:2px solid color-mix(in srgb,var(--primaire) 26%,transparent);transform:rotate(7deg)}
    .arche-deco.a2{right:9%;top:34%;width:min(18vw,200px);aspect-ratio:3/4.4;
      background:color-mix(in srgb,var(--primaire) 8%,transparent);transform:rotate(-5deg)}
    @media(max-width:860px){.arche-deco{display:none}}

    /* ---- héro accueil avec vraie photo : texte clair sur voile sombre ---- */
    .an-hero.avec-photo{background-size:cover;background-position:center 62%;padding:92px 0 78px}
    @media(max-width:680px){.an-hero.avec-photo{padding:64px 0 54px}}
    .an-hero.avec-photo::before,.an-hero.avec-photo::after,.an-hero.avec-photo .arche-deco{display:none}
    .an-hero.avec-photo h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
    .an-hero.avec-photo p{color:#f1e6d4}
    .an-hero.avec-photo .hero-stats{color:#e5d6bf}
    .an-hero.avec-photo .hero-stats strong{color:#ffd9a0}
    .mondial-tag{display:inline-block;font-size:.75rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
      color:var(--sur-accent);background:var(--accent);padding:5px 12px;border-radius:99px;margin-bottom:18px}
    .hero-stats{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:26px;font-size:.92rem;color:var(--encre-douce);font-weight:600}
    .hero-stats strong{color:var(--primaire);font-family:var(--titres);font-size:1.35rem;margin-right:6px}

    /* ---- accueil moderne épuré : héro clair centré + recherche ---- */
    .accueil-hero{position:relative;overflow:hidden;padding:74px 0 46px;
      background:linear-gradient(180deg,color-mix(in srgb,var(--primaire) 7%,var(--fond)),var(--fond) 78%)}
    .accueil-hero::before{content:'';position:absolute;inset:0;background-image:var(--motif);opacity:.7;
      -webkit-mask-image:radial-gradient(120% 80% at 50% 0,#000,transparent 70%);mask-image:radial-gradient(120% 80% at 50% 0,#000,transparent 70%)}
    .accueil-hero .wrap{position:relative;z-index:1;text-align:center;max-width:780px}
    .badge-pays{display:inline-flex;align-items:center;gap:7px;font-size:.75rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
      color:var(--primaire);background:var(--surface);padding:7px 15px;border-radius:99px;box-shadow:0 1px 3px var(--ombre)}
    .accueil-hero h1{font-size:clamp(2.1rem,6vw,3.5rem);letter-spacing:-.02em;margin:18px 0 0}
    .accueil-hero .sous{margin:15px auto 0;color:var(--encre-douce);max-width:38em;font-size:clamp(1rem,2.3vw,1.16rem)}
    .recherche-hero{display:flex;gap:8px;margin:30px auto 0;max-width:580px;background:var(--surface);padding:8px;
      border-radius:16px;box-shadow:0 14px 44px -16px var(--ombre),0 1px 3px var(--ombre)}
    .recherche-hero input{flex:1;min-width:0;border:none;background:transparent;padding:14px 16px;font-size:1.05rem;color:var(--encre);font-family:var(--texte)}
    .recherche-hero input:focus{outline:none}
    .recherche-hero button{flex:none;border:none;background:var(--primaire);color:var(--sur-primaire);padding:0 22px;border-radius:11px;
      font-weight:800;font-size:1rem;cursor:pointer;font-family:var(--texte);transition:background .2s}
    .recherche-hero button:hover{background:var(--primaire-fonce)}
    @media(max-width:520px){.recherche-hero button span{display:none}.recherche-hero button{padding:0 18px}}
    .chips-cat{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
    .chips-cat a{font-size:.85rem;font-weight:700;text-decoration:none;padding:8px 15px;border-radius:99px;color:var(--encre-douce);
      display:inline-flex;align-items:center;min-height:44px;
      background:var(--surface);border:1.5px solid color-mix(in srgb,var(--encre) 12%,transparent);transition:transform .12s,border-color .12s,color .12s}
    .chips-cat a:hover{transform:translateY(-1px);color:var(--primaire);border-color:var(--primaire)}
    .accueil-hero .hero-stats{justify-content:center}
    .resultats-info{margin:6px 0 20px;color:var(--encre-douce);font-size:.95rem}
    .resultats-info b{color:var(--encre)}

    /* ---- héro IMMERSIF (accueil) : grande image + typo éditoriale, esprit conciergerie ---- */
    .accueil-hero.immersif{color:#fff;padding:106px 0 76px;background-size:cover;background-position:center 58%}
    @media(max-width:680px){.accueil-hero.immersif{padding:80px 0 56px}}
    .accueil-hero.immersif::before{display:none}
    .accueil-hero.immersif h1{font-family:var(--titres);font-size:clamp(2.5rem,7vw,4.7rem);line-height:1.02;letter-spacing:-.01em;
      text-shadow:0 2px 36px rgba(0,0,0,.42)}
    .accueil-hero.immersif .sous{color:rgba(255,255,255,.94);text-shadow:0 1px 16px rgba(0,0,0,.4)}
    .hero-surtitre{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
      color:#fff;background:rgba(255,255,255,.15);backdrop-filter:blur(6px);padding:8px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.28)}
    .accueil-hero.immersif .recherche-hero{box-shadow:0 22px 60px -20px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.2)}
    .accueil-hero.immersif .chips-cat a{background:rgba(255,255,255,.13);color:#fff;border-color:rgba(255,255,255,.32);backdrop-filter:blur(6px)}
    .accueil-hero.immersif .chips-cat a:hover{background:#fff;color:var(--primaire);border-color:#fff;transform:translateY(-1px)}
    .accueil-hero.immersif .hero-stats{color:rgba(255,255,255,.9);border-top:1px solid rgba(255,255,255,.22);padding-top:22px;margin-top:30px;justify-content:center}
    .accueil-hero.immersif .hero-stats strong{color:#fff}
    /* Sur la photo, le vert du lien disparaissait dans les ombres : ici « autour
       de moi » devient une pastille de verre, lisible quelle que soit l'image. */
    .accueil-hero.immersif .autour-lien{margin-top:18px}
    .accueil-hero.immersif .autour-lien a{gap:8px;padding:0 20px;border-radius:99px;color:#fff;
      background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(6px);
      text-shadow:0 1px 12px rgba(0,0,0,.5);transition:background .18s,color .18s,transform .18s}
    .accueil-hero.immersif .autour-lien a:hover{background:#fff;color:var(--primaire);border-color:#fff;
      text-shadow:none;text-decoration:none;transform:translateY(-1px)}

    /* ---- manifeste éditorial (donne l'âme / l'intention d'agence) ---- */
    .manifeste{text-align:center;max-width:820px;margin:0 auto}
    .manifeste .accent-line{display:block;width:46px;height:3px;margin:0 auto 24px;border-radius:2px;
      background:linear-gradient(90deg,var(--primaire),var(--accent))}
    .manifeste p{font-family:var(--titres);font-weight:500;font-size:clamp(1.35rem,3.2vw,2.05rem);line-height:1.4;color:var(--encre);letter-spacing:-.01em}
    .section-titre{text-align:center;margin-bottom:6px}
    .section-titre .eyebrow-c{display:inline-block;color:var(--primaire);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.75rem;margin-bottom:8px}

    /* ---- pages statiques (légales, à propos, contact) ---- */
    .page-hero{padding:38px 0 4px}
    .page-hero h1{font-size:clamp(1.8rem,5vw,2.7rem)}
    .page-statique{max-width:720px;padding:10px 0 24px;font-size:1.02rem;line-height:1.75}
    .page-statique h2{font-size:1.28rem;margin:28px 0 10px}
    .page-statique p{margin-bottom:14px}
    .page-statique ul{margin:0 0 14px 20px}
    .page-statique li{margin-bottom:7px}
    .page-statique .maj{color:var(--encre-douce);font-size:.88rem;margin-bottom:20px}
    .page-statique .avis{background:color-mix(in srgb,var(--accent) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
      padding:12px 16px;border-radius:10px;font-size:.92rem;color:var(--encre-douce);margin:0 0 22px}
    .pied-liens{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:14px}
    .pied-liens a{color:var(--encre-douce);text-decoration:none}
    .pied-liens a:hover{color:var(--primaire);text-decoration:underline}
    .pied-sep{color:var(--encre-douce);opacity:.45}

    /* ---- bandeau confiance ---- */
    .confiance{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px 0 6px}
    @media(max-width:680px){.confiance{grid-template-columns:1fr}}
    .conf{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border-radius:var(--radius);
      padding:16px 18px;box-shadow:0 1px 3px var(--ombre);font-size:.92rem;line-height:1.45}
    .conf .ico{flex:none;width:38px;height:38px;border-radius:999px 999px 10px 10px;display:grid;place-items:center;
      background:color-mix(in srgb,var(--primaire) 10%,var(--surface));font-size:1.05rem}

    /* ---- cartes villes : ARCHES ILLUSTRÉES ---- */
    .grille-villes{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:16px;margin:30px 0 10px}
    .carte-ville{background:var(--surface);border-radius:calc(var(--radius) + 8px);padding:12px 12px 18px;
      text-decoration:none;color:var(--encre);text-align:center;
      box-shadow:0 1px 3px var(--ombre);transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s}
    .carte-ville:hover{transform:translateY(-5px);box-shadow:0 16px 34px -12px var(--ombre)}
    .carte-ville .cv-art{display:block;aspect-ratio:1/1.12;border-radius:999px 999px 14px 14px;
      background-size:cover;background-position:center;margin-bottom:12px;
      transition:filter .18s}
    .carte-ville:hover .cv-art{filter:saturate(1.15)}
    .carte-ville h3{font-size:1.28rem}
    .carte-ville small{color:var(--encre-douce)}

    /* ---- bande commerçant (accueil) : le pitch agence ---- */
    .bande-pro{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;
      gap:22px;flex-wrap:wrap;background:var(--surface);border-radius:calc(var(--radius) + 8px);
      padding:30px 32px;box-shadow:0 1px 3px var(--ombre),0 12px 36px var(--ombre)}
    .bande-pro::before{content:'';position:absolute;inset:0;background-image:var(--motif);opacity:.55;
      -webkit-mask-image:linear-gradient(100deg,transparent 45%,#000);mask-image:linear-gradient(100deg,transparent 45%,#000)}
    .bande-pro>*{position:relative}
    .bande-pro h3{font-size:1.45rem;margin-bottom:7px}
    .bande-pro p{color:var(--encre-douce);max-width:34em;font-size:.95rem}

    /* ---- filtres catégorie (page ville) ---- */
    .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
    .chip{font-size:.85rem;font-weight:700;text-decoration:none;padding:7px 15px;border-radius:99px;
      color:var(--encre-douce);background:var(--surface);border:1.5px solid color-mix(in srgb,var(--encre) 14%,transparent);
      transition:transform .12s}
    .chip:hover{transform:translateY(-1px);color:var(--primaire)}
    .chip.on{background:var(--primaire);color:var(--sur-primaire);border-color:var(--primaire)}

    /* ---- cartes commerces ---- */
    .grille-commerces{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:24px}
    .carte-com{position:relative;background:var(--surface);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--encre);
      box-shadow:0 1px 3px var(--ombre);display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s}
    .carte-com:hover{transform:translateY(-3px);box-shadow:0 12px 26px -10px var(--ombre)}
    .carte-com .im{position:relative;overflow:hidden}
    .carte-com .im-vide{display:grid;place-items:center;aspect-ratio:16/10}
    .carte-com .im-vide svg{width:32%;max-width:104px;opacity:.85}
    .carte-com img{aspect-ratio:16/10;object-fit:cover;width:100%;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
    .carte-com:hover img{transform:scale(1.04)}
    .carte-com .corps{padding:15px 17px 17px}
    .carte-com .cat{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--primaire);font-weight:800}
    .carte-com h3{font-size:1.18rem;margin:3px 0 5px}
    .carte-com p{font-size:.88rem;color:var(--encre-douce)}
    .tag-verif{position:absolute;left:10px;bottom:10px;font-size:.75rem;font-weight:800;letter-spacing:.04em;
      background:rgba(255,255,255,.92);color:#14532D;padding:3px 9px;border-radius:99px}
    .tag-fan{position:absolute;left:10px;top:10px;font-size:.82rem;line-height:1;background:#166E4B;color:#fff;padding:5px 7px;border-radius:99px;box-shadow:0 1px 4px rgba(0,0,0,.25)}
    .badge-fan{color:#166E4B}.badge-fan::before{background:#166E4B}
    .chip-fan.on{background:#166E4B;border-color:#166E4B}
    .vide{margin:40px 0;padding:34px;text-align:center;background:var(--surface);border-radius:calc(var(--radius) + 6px);
      color:var(--encre-douce);box-shadow:0 1px 3px var(--ombre)}

    /* ---- voisins ---- */
    .voisins .grille-commerces{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}

    /* ---- DISPOSITIONS : variété de mise en page (se combinent aux 8 thèmes) ---- */
    /* disp-1 = éditorial (défaut, aucune règle) */
    /* disp-2 = vitrine : photo du héro à gauche, galerie en tuiles carrées régulières */
    @media(min-width:681px){
      .disp-2 .hero-grille{grid-template-columns:.85fr 1.15fr}
      .disp-2 .hero-grille>.arche-cadre{order:-1}
    }
    .disp-2 .galerie img,
    .disp-2 .galerie img:first-child,
    .disp-2 .galerie img:nth-child(6n+6){grid-column:span 2;aspect-ratio:1/1}
    /* disp-3 = magazine : cadre héro rectangulaire, tuiles portrait + bandeaux panoramiques */
    .disp-3 .arche-cadre{border-radius:var(--radius)}
    .disp-3 .galerie img{aspect-ratio:3/4}
    .disp-3 .galerie img:first-child,
    .disp-3 .galerie img:nth-child(6n+6){grid-column:span 4;aspect-ratio:16/6}

    /* ---- RTL (arabe) : police arabe (les polices de thème sont latines) + miroir des détails ---- */
    [dir=rtl] body,[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,
    [dir=rtl] input,[dir=rtl] textarea,[dir=rtl] button,[dir=rtl] .btn{font-family:'Tajawal',sans-serif}
    [dir=rtl] .ariane .sep{display:inline-block;transform:scaleX(-1)}
    [dir=rtl] .etat{margin:0 8px 16px 0}
    [dir=rtl] .etat:first-child{margin-right:0}
    [dir=rtl] .pluscode code,[dir=rtl] .infos-grille a[href^="/r/"]{direction:ltr;unicode-bidi:embed;display:inline-block}
    [dir=rtl] .hp{left:auto;right:-5000px}

    /* ---- Barre d'onglets basse (pages de decouverte uniquement) ----
       Absente de la fiche : la, le bas de l'ecran appartient au bouton
       WhatsApp collant. Deux barres empilees, c'est l'action principale
       repoussee vers le haut — exactement ce qu'une application evite.
       env(safe-area-inset-bottom) : sinon la barre passe sous la poignee
       des iPhone recents et la derniere ligne devient intouchable. */
    .barre-basse{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
      background:color-mix(in srgb,var(--fond) 92%,var(--encre));
      border-top:1px solid color-mix(in srgb,var(--encre) 12%,transparent);
      padding-bottom:env(safe-area-inset-bottom);backdrop-filter:blur(10px);
      /* iOS Safari : quand la barre d'adresse flottante se retracte, le viewport
         visuel descend plus bas que le viewport de mise en page — et une bande
         de contenu apparait SOUS la barre fixe. L'ombre pleine prolonge le fond
         vers le bas ; contrairement a un pseudo-element, elle n'ajoute rien au
         flux et ne cree aucun defilement parasite. */
      box-shadow:0 200px 0 200px color-mix(in srgb,var(--fond) 92%,var(--encre))}
    .barre-basse ul{display:flex;list-style:none;margin:0;padding:0}
    .barre-basse li{flex:1}
    .barre-basse a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
      min-height:56px;padding:6px 2px;text-decoration:none;color:var(--encre-douce);
      font-size:.75rem;font-weight:700}
    .barre-basse a[aria-current]{color:var(--primaire)}
    .barre-basse .ico{font-size:1.15rem;line-height:1}
    .barre-basse .pastille{position:absolute;transform:translate(15px,-8px);min-width:18px;height:18px;
      border-radius:99px;background:var(--primaire);color:var(--sur-primaire);font-size:.75rem;font-weight:800;
      display:inline-flex;align-items:center;justify-content:center;padding:0 5px;line-height:1}
    /* L'attribut hidden du HTML ne vaut qu'une declaration display:none dans la
       feuille du navigateur : la regle ci-dessus, plus specifique, le battait.
       Resultat, un rond vert VIDE colle au coeur « Favoris » sur toutes les
       pages, pour toute personne n'ayant encore rien garde — c'est-a-dire
       presque tout le monde, et des la premiere seconde de visite. */
    .barre-basse .pastille[hidden]{display:none}
    body.a-barre{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
    body.a-barre .barre-basse{display:block}
    @media(min-width:900px){
      body.a-barre{padding-bottom:0}
      body.a-barre .barre-basse{display:none}  /* au clavier-souris, le menu du haut suffit */
    }
    /* Le mode hors-ligne marchait deja, mais personne ne le savait : la mention
       n'apparait QUE si le service worker controle vraiment la page, sinon on
       promettrait quelque chose qui n'est pas encore vrai. */
    .hors-ligne{margin-top:10px;font-size:.75rem;font-weight:700;color:var(--encre-douce)}
    /* ---- Bouton « garder cette adresse » ---- */
    .btn-fav.on{background:var(--primaire);color:var(--sur-primaire);border-color:var(--primaire)}
    .fav-liste{display:flex;flex-direction:column;gap:10px;margin-top:22px}
    /* ---- Invitation a installer ---- */
    .installer{position:fixed;left:12px;right:12px;bottom:calc(70px + env(safe-area-inset-bottom));z-index:50;
      display:none;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--radius);
      background:var(--surface);box-shadow:0 18px 45px -12px var(--ombre);
      border:1px solid color-mix(in srgb,var(--encre) 12%,transparent)}
    .installer.vu{display:flex}
    .installer p{flex:1;margin:0;font-size:.85rem}
    .installer strong{display:block;font-size:.95rem}
    .installer button{min-height:44px;border-radius:99px;border:none;padding:10px 16px;font:inherit;
      font-weight:800;cursor:pointer}
    .installer .oui{background:var(--primaire);color:var(--sur-primaire)}
    .installer .non{background:transparent;color:var(--encre-douce)}
    @media(min-width:900px){.installer{left:auto;right:20px;bottom:20px;max-width:420px}}

    /* ---- Puces de filtre (recherche) et resultats « autour de moi » ---- */
    .filtres{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
    .filtre{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:99px;
      font-size:.85rem;font-weight:700;text-decoration:none;color:var(--encre-douce);
      background:var(--surface);border:1.5px solid color-mix(in srgb,var(--encre) 12%,transparent)}
    .filtre:hover{border-color:var(--primaire);color:var(--primaire)}
    .filtre.on{background:var(--primaire);border-color:var(--primaire);color:var(--sur-primaire)}
    .filtre.effacer{background:transparent;border-style:dashed}
    /* Repli des listes longues (9 metiers + 6 villes). Un <details> natif : il
       s'ouvre sans JavaScript, se referme au clavier, et la fleche indique
       toute seule qu'il reste quelque chose dessous. */
    .filtres-plus{margin-top:14px;text-align:center}
    .filtres-plus summary{display:inline-flex;align-items:center;justify-content:center;gap:7px;
      min-height:44px;padding:8px 18px;border-radius:99px;cursor:pointer;list-style:none;
      font-size:.85rem;font-weight:700;color:var(--encre-douce);
      border:1.5px dashed color-mix(in srgb,var(--encre) 22%,transparent)}
    .filtres-plus summary::-webkit-details-marker{display:none}
    .filtres-plus summary::after{content:'\25BE';font-size:.8em}
    .filtres-plus[open] summary::after{content:'\25B4'}
    .filtres-plus summary:hover{border-color:var(--primaire);color:var(--primaire)}
    .filtres-plus .filtres{margin-top:12px}
    .suggest-titre{margin:22px 0 0;font-weight:700}
    .autour-lien{margin-top:14px;text-align:center}
    .autour-lien a{display:inline-flex;align-items:center;min-height:44px;font-weight:800;text-decoration:none}
    .autour-lien a:hover{text-decoration:underline}
    .autour-actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:22px}
    .btn-autour{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;
      padding:14px 26px;border:none;border-radius:99px;background:var(--primaire);color:var(--sur-primaire);
      font:inherit;font-size:1.02rem;font-weight:800;cursor:pointer}
    .btn-autour[disabled]{opacity:.65;cursor:progress}
    .autour-msg{margin-top:16px;text-align:center;color:var(--encre-douce)}
    .autour-liste{display:flex;flex-direction:column;gap:10px;margin-top:22px}
    .autour-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--radius);
      background:var(--surface);border:1px solid color-mix(in srgb,var(--encre) 10%,transparent);
      text-decoration:none;color:var(--encre);min-height:44px}
    .autour-item:hover{border-color:var(--primaire)}
    .autour-item .dist{flex:none;font-weight:900;color:var(--primaire);font-variant-numeric:tabular-nums}
    .autour-item .nom{font-weight:800;display:block}
    .autour-item .meta{display:block;font-size:.78rem;color:var(--encre-douce)}

    /* ---- Confort tactile : 44 px minimum sous le doigt ----
       Ces liens sont volontairement discrets (fil d'ariane, pied de page) : les
       grossir vraiment doublerait la hauteur du pied et déformerait la barre du
       haut. On garde donc le dessin tel quel et on n'agrandit que la ZONE
       TOUCHABLE, avec un calque centré de 44 px de haut. Le pot de miel
       anti-spam (.hp) est exclu : il doit rester introuvable, y compris au doigt. */
    /* ---- « Se faire comprendre » : l'ecran tendu au commercant ----
       Toute la mise en forme sert une seule scene : le telephone change de
       mains. La darija est donc la ligne la PLUS GROSSE de la carte — c'est
       elle qu'on lit a bout de bras, parfois en plein soleil. La phrase du
       visiteur est au-dessus en petit (il sait deja ce qu'il veut dire) et la
       translitteration en dessous, discrete (elle ne sert qu'a lui).
       (Pas d'accent grave dans ce fichier : le CSS vit dans un template
       literal, un accent grave le termine — cf. DECISIONS.md.) */
    /* ---- « Je suis perdu » : lisible a bout de bras, en marchant ---- */
    .perdu{margin-top:16px;border-top:1px solid color-mix(in srgb,var(--encre) 10%,transparent);padding-top:10px}
    .perdu>summary{cursor:pointer;font-weight:800;list-style:none;padding:11px 0;min-height:44px;display:flex;align-items:center}
    .perdu>summary::-webkit-details-marker{display:none}
    .perdu-sous{color:var(--encre-douce);font-size:.86rem;margin-bottom:14px;max-width:48ch}
    .perdu-cadran{display:flex;align-items:center;gap:14px;padding:18px;background:var(--surface);
      border-radius:var(--radius);box-shadow:0 1px 3px var(--ombre)}
    .pf-fleche{font-size:2.6rem;line-height:1;color:var(--primaire);transition:transform .3s ease;display:inline-block}
    .pf-dist{font-size:1.7rem;font-variant-numeric:tabular-nums;line-height:1.1}
    .pf-cap{color:var(--encre-douce);font-weight:700}
    .perdu-facade{margin-top:12px}
    .perdu-facade img{width:100%;border-radius:var(--radius);display:block}
    .perdu-facade figcaption{color:var(--encre-douce);font-size:.84rem;margin-top:6px;text-align:center}
    .perdu-adr{margin-top:8px;color:var(--encre-douce);font-size:.9rem}
    @media(prefers-reduced-motion:reduce){.pf-fleche{transition:none}}
    .parler{margin:26px 0 4px;border-top:1px solid color-mix(in srgb,var(--encre) 10%,transparent);padding-top:18px}
    /* padding et non un calque : ce n'est pas un lien discret dans une rangee
       serree, il a la place de faire vraiment 44 px sous le doigt. */
    .parler>summary{cursor:pointer;font-weight:800;font-size:1.02rem;list-style:none;
      padding:11px 0;min-height:44px;display:flex;align-items:center}
    .parler>summary::-webkit-details-marker{display:none}
    .parler-sous{color:var(--encre-douce);font-size:.88rem;margin:6px 0 14px;max-width:52ch}
    .parler-liste{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
    .parler-liste li{display:flex;flex-direction:column;gap:3px;padding:13px 15px;background:var(--surface);
      border-radius:var(--radius);box-shadow:0 1px 3px var(--ombre);
      border-inline-start:3px solid color-mix(in srgb,var(--primaire) 55%,transparent)}
    .pl-vous{font-size:.86rem;color:var(--encre-douce)}
    .pl-ar{font-size:1.5rem;line-height:1.55;font-weight:700;font-family:'Tajawal',var(--texte)}
    .pl-lat{font-size:.85rem;font-style:italic;color:var(--encre-douce)}
    @media(min-width:700px){.pl-ar{font-size:1.7rem}}

    /* ---- Signaler un probleme ----
       Replie par defaut (la confiance est la promesse, pas un doute affiche),
       mais une vraie carte une fois ouvert : c'est le seul endroit ou un
       visiteur nous dit qu'on s'est trompes. Un formulaire laid a cet
       endroit-la, c'est choisir de ne pas le savoir.
       Boutons radio plutot qu'une liste deroulante : trois choix tiennent a
       l'ecran, et une cible de 48 px se touche du pouce en marchant. */
    .signaler{margin:26px 0 4px;border-top:1px solid color-mix(in srgb,var(--encre) 10%,transparent);padding-top:18px}
    .signaler>summary{cursor:pointer;font-weight:800;font-size:1.02rem;list-style:none;color:var(--encre-douce);
      padding:11px 0;min-height:44px;display:flex;align-items:center;gap:8px}
    .signaler>summary::-webkit-details-marker{display:none}
    .signaler[open]>summary{color:var(--encre)}
    .signal-carte{background:var(--surface);border-radius:calc(var(--radius) + 4px);padding:20px;margin-top:6px;
      box-shadow:0 1px 3px var(--ombre),0 10px 34px var(--ombre)}
    .signal-intro{color:var(--encre-douce);font-size:.9rem;margin:0 0 18px;max-width:44ch}
    .signal-motifs{border:0;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:8px}
    .signal-motifs legend{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
      color:var(--encre-douce);padding:0;margin-bottom:9px}
    .signal-motifs label{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 15px;cursor:pointer;
      background:var(--fond);font-size:.95rem;transition:border-color .15s ease,background .15s ease;
      border:1.5px solid color-mix(in srgb,var(--encre) 14%,transparent);border-radius:calc(var(--radius) - 2px)}
    .signal-motifs input{accent-color:var(--primaire);width:20px;height:20px;min-height:0;flex:none;margin:0}
    .signal-motifs label:has(input:checked){border-color:var(--primaire);
      background:color-mix(in srgb,var(--primaire) 8%,var(--fond))}
    .signal-motifs label:focus-within{outline:2px solid var(--primaire);outline-offset:2px}
    .signal-lbl{display:block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
      color:var(--encre-douce);margin:0 0 6px}
    .signal-lbl small{font-weight:600;text-transform:none;letter-spacing:0;opacity:.75}
    .signaler textarea{width:100%;padding:12px 14px;min-height:88px;resize:vertical;
      border:1.5px solid color-mix(in srgb,var(--encre) 18%,transparent);border-radius:calc(var(--radius) - 2px);
      font-size:1rem;font-family:var(--texte);background:var(--fond);color:var(--encre)}
    /* .btn seul ne porte AUCUN fond (il attend .btn-wa ou .btn-sec) : le bouton
       tombait donc sur le gris par defaut du navigateur. Encre sur fond, et non
       la couleur du theme : signaler n'est pas un geste envers le commercant,
       et ce bouton ne doit pas concurrencer le vert de WhatsApp au-dessus. */
    .signaler button{margin-top:18px;width:100%;justify-content:center;border:0;
      background:var(--encre);color:var(--fond)}
    .signaler button:hover{transform:translateY(-2px)}
    .signaler button:active{transform:none}
    @media(min-width:520px){.signaler button{width:auto}}
    .signal-ok{display:none;margin:0;padding:14px 16px;font-weight:600;border-radius:calc(var(--radius) - 2px);
      background:color-mix(in srgb,#1E6E5C 12%,var(--surface));color:var(--encre)}
    /* Une fois envoye, le formulaire s'efface : le remerciement est la reponse,
       pas une ligne de plus sous des champs qu'on ne peut plus renvoyer. */
    .signaler form.envoye>*:not(.signal-ok){display:none}
    .signaler form.envoye .signal-ok{display:block}
    @media(prefers-reduced-motion:reduce){.signal-motifs label{transition:none}}

    .ariane a,.lieu a,.pied-liens a,footer a,.infos-grille a{position:relative}
    .ariane a::after,.lieu a::after,.pied-liens a::after,footer a::after,.infos-grille a::after{
      content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
    /* Champs et boutons : 44 px sous le doigt, listes déroulantes comprises —
       c'est le motif de signalement, tapé une seule fois mais par quelqu'un
       d'agacé, donc l'endroit où rater sa cible coûte le plus cher. */
    input:not(.hp),select,textarea,button{min-height:44px}
    /* La balise small réduit ce qu'elle hérite : dans un bloc déjà petit elle
       tombait à 10,4 px. On la borne au plancher au lieu de la laisser
       rétrécir en cascade. (Pas d'accent grave dans ce fichier : le CSS vit
       dans un template literal, un accent grave le termine — cf. DECISIONS.md.) */
    small{font-size:max(.75rem,.85em)}
    /* Le fil d'ariane est une rangée serrée : on écarte au lieu d'empiler des
       zones qui se chevaucheraient, car deux cibles superposées valent une seule. */
    .ariane{gap:12px}
    .pied-liens{gap:9px 16px}

    @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}