/* ============================================================
   ENRICH.CSS — Bandeau d'enrichissement (systeme commun)
   Composant partage par toutes les pages encyclopedie : barre
   d'outils, pop-ups (header noir), guide d'ID, checklist, FAQ,
   overview, mediashow habitats/menaces. Un style par type de
   pop-up. Aucune regle de grille (pas de conflit .species-grid).
   ============================================================ */
body.enc-pillar .species-section{padding-top:6rem}
      .vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
      /* --- BARRE D'OUTILS --- */
      .enc-pillar-toolbar{--ocre:#C06A2C;--ocre-deep:#9E5220;--ink:#211E19;display:flex;gap:clamp(18px,3.2vw,42px);border-bottom:1px solid #ececec;flex-wrap:wrap;margin:1.6rem 0 2.2rem}
      .enc-pillar-toolbar button{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:2px 0 15px;margin-bottom:-1px;font:700 14.5px/1 'Lato',sans-serif;color:#6a6459;cursor:pointer;border-bottom:2px solid transparent;transition:.16s;white-space:nowrap}
      .enc-pillar-toolbar button i{color:var(--ocre);font-size:14px}
      .enc-pillar-toolbar button .dot{width:7px;height:7px;border-radius:50%;background:var(--fm-danger,#b23b2e)}
      .enc-pillar-toolbar button:hover{color:var(--ink);border-bottom-color:var(--ocre)}
      @media(max-width:720px){.enc-pillar-toolbar{gap:20px;overflow-x:auto;flex-wrap:nowrap}}
      /* --- Intro --- */
      .lead{font-size:1rem;line-height:1.6;color:#3f3a33;max-width:62ch;margin:1.4rem 0 .6rem}
      .lead b{color:var(--ink)}
      .lead + .lead{margin-top:.75rem}
      /* --- Pop-ups (hierarchie par typo, sans boites ni filets) --- */
      /* --- POP-UPS (MODALES) --- */
      
      
      .modal{background:#fff;width:min(1060px,92vw);max-height:80vh;display:flex;flex-direction:column;overflow:hidden;border-radius:2px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
      .modal-head{position:sticky;top:0;background:var(--paper);display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 26px 15px;border-bottom:1px solid var(--line)}
      .mh-txt{display:flex;flex-direction:column;gap:3px}
      .eyebrow{font:700 11px/1 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.14em;color:var(--ocre-deep)}
      .modal-head .x{border:0;background:var(--beige);color:#7a7266;width:34px;height:34px;border-radius:50%;font-size:18px;cursor:pointer;flex:0 0 auto;margin-top:2px;transition:.15s}
      .modal-head .x:hover{background:var(--ocre);color:#fff}
      .modal-body{padding:0 26px 28px;overflow-y:auto}
      .modal-body .psub{color:var(--muted-strong);font-size:1rem;margin:0 0 1.3rem;line-height:1.6}
      .modal-body p{color:#3f3a33;font-size:1rem;line-height:1.6;margin:0 0 1rem}.modal-body p b{color:var(--ink)}
      a.inl{color:var(--ocre-deep);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(158,82,32,.35)}
      a.inl:hover{color:var(--ocre)}
      .deflist .d{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:baseline;padding:12px 2px;border-bottom:1px solid var(--line)}
      .deflist .k{font:700 11px/1.3 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--ocre-deep)}
      .deflist .v{color:#3f3a33;line-height:1.55;font-size:.95rem}
      .grp{margin:0;padding-left:1.1rem;color:#3f3a33;line-height:1.75;font-size:.96rem}
      .grp li{margin:0 0 .3rem}
      /* --- STATS VENIMEUX/INOFFENSIF --- */
      .statrow{display:flex;gap:52px;flex-wrap:wrap;margin:.2rem 0 1.6rem}
      .stat{display:flex;align-items:last baseline;gap:14px}
      .stat .num{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(42px,4.2vw,56px);line-height:1;letter-spacing:.005em;color:var(--ocre-deep)}
      .stat.danger .num{color:var(--ocre)}.stat.safe .num{color:var(--fm-endemic,#2E6B62)}
      .stat.danger .lbl{color:var(--ocre-deep)}.stat.safe .lbl{color:var(--fm-endemic,#2E6B62)}
      .stat .lbl{font-family:'Lato',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:11.5px;line-height:1.25;color:var(--muted-strong)}
      .steps{margin:0 0 1.2rem;padding:0;list-style:none;counter-reset:s}
      .steps li{position:relative;padding:11px 0 11px 42px;border-bottom:1px solid #f0ece3;color:#3f3a33;line-height:1.55}
      .steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:9px;font:600 22px/1 'Oswald',sans-serif;color:var(--ocre-deep)}
      .steps li.no::before{content:"\00d7";color:var(--fm-danger,#b23b2e);font-size:25px;top:8px}
      .steps li b{color:var(--ink)}
      .note{margin:.6rem 0 0;font-size:.9rem;color:var(--muted-strong);font-style:italic;line-height:1.55}
      .note b{font-style:normal;color:var(--ink)}
      /* --- CHECKLIST --- */
      .splist{border:1px solid var(--line);border-radius:2px;overflow:hidden}
      .fam-grp{border-top:1px solid var(--line)}
      .fam-grp:first-child{border-top:0}
      .splist .fam{display:flex;align-items:center;gap:10px;background:#f0f0f0;padding:11px 16px 11px 12px;cursor:pointer;list-style:none}
      .splist .fam::-webkit-details-marker{display:none}
      .splist .fam:hover{background:#e8e8e8}
      .fam-chev{flex:0 0 auto;color:var(--ocre-deep);font-size:13px;line-height:1;transition:transform .2s}
      .fam-grp[open] .fam-chev{transform:rotate(90deg)}
      .fam-name{flex:1;min-width:0;font-size:.92rem;color:var(--muted-strong)}
      .fam-name .fl{font-style:italic;font-weight:700;color:var(--ink)}
      .fam-name .fv{font-weight:700;color:var(--ink)}
      .fam-name .fc{font-weight:700;color:var(--ocre-deep)}
      .splist .row{display:grid;grid-template-columns:1.55fr 1.25fr .8fr auto;gap:16px;align-items:center;padding:10px 16px;border-top:1px solid #efe7d9;color:#3f3a33;font-size:.88rem;text-decoration:none}
      .splist .row:hover{background:#f6f6f6}
      .splist .row .sci{font-style:italic;font-weight:700;color:var(--ink);font-size:.84rem}
      .splist .row .ar{direction:rtl;text-align:right;color:var(--muted-strong);padding-right:28px}
      .splist .row .more{justify-self:end;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:#fff;background:var(--ocre);font-weight:700;font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;border:1.5px solid var(--ocre);border-radius:2px;padding:6px 8px;transition:background .18s,border-color .18s,color .18s}
      .splist .row:hover .more{background:var(--ocre-deep);border-color:var(--ocre-deep);color:#fff}
      .splist .row .more i{font-style:normal;transition:transform .25s cubic-bezier(.22,1,.36,1)}
      .splist .row:hover .more i{transform:translateX(3px)}
      .faq details{border-top:1px solid var(--line)}.faq details:first-of-type{border-top:0}
      .faq summary{cursor:pointer;font:700 1rem 'Lato',sans-serif;color:var(--ink);list-style:none;display:flex;align-items:center;gap:12px;padding:14px 2px}
      .faq summary::-webkit-details-marker{display:none}
      @media(hover:hover) and (pointer:fine){.faq summary:hover{color:var(--ocre-deep)}}
      .faq summary .q{flex:1;min-width:0}
      .faq .faq-chev{flex:0 0 auto;color:var(--ocre-deep);font-size:13px;transition:transform .2s}
      .faq details[open] .faq-chev{transform:rotate(90deg);color:var(--ocre)}
      .faq details[open]{background:var(--paper);margin:4px -26px;padding:2px 26px 15px;border-top:2px solid var(--ocre)}
      .faq details[open]+details{border-top-color:transparent}
      .faq details[open] summary{color:var(--ocre)}
      .faq p{margin:.45rem 0 0;padding:0 48px 0 26px;color:#3f3a33;line-height:1.6;font-size:1rem}
      /* Liens dans les reponses de FAQ = meme style que les liens d'intro (ocre souligne) */
      .faq p a{color:var(--ocre-deep);font-weight:700;text-decoration:underline;text-decoration-color:#d8c3a8;text-underline-offset:2px;transition:color .15s}
      @media(hover:hover) and (pointer:fine){.faq p a:hover{color:var(--ocre)}}
      @media(max-width:720px){.modal{width:100%;max-height:100vh;height:100%;border-radius:0}.statrow{gap:32px}.deflist .d{grid-template-columns:92px 1fr;gap:12px}.splist .fam{flex-wrap:wrap}.splist .row{grid-template-columns:1fr auto;padding-left:28px}.splist .row .en,.splist .row .ar{display:none}}
      /* Slideshow d'intro (image a droite) */
      .intro-wrap{display:grid;grid-template-columns:minmax(0,62ch) 1fr;gap:44px;align-items:start;margin:1.4rem 0 1.6rem}
      body.enc-pillar .intro-txt .lead{max-width:none;margin-top:0}
      body.enc-pillar .intro-txt .lead + .lead{margin-top:.75rem}
      /* --- SLIDESHOW --- */
      .slideshow{position:relative;border:1px solid var(--line);border-radius:2px;overflow:hidden;aspect-ratio:16/9;background:var(--paper)}
      .slideshow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;opacity:0;transition:opacity .7s ease}
      .slideshow img.on{opacity:1}
      .slideshow::after{content:"";position:absolute;inset:0;background:radial-gradient(72% 78% at 5% 100%,rgba(8,5,2,.82) 0%,rgba(8,5,2,.30) 38%,transparent 60%);z-index:2;pointer-events:none}
      .ss-cap{position:absolute;left:16px;bottom:13px;z-index:3;display:flex;flex-direction:column;gap:0;text-decoration:none}
      .ss-cap--static{cursor:default}
      .ss-cap .ln{font-style:italic;font-size:.92rem;line-height:1.15;color:var(--ocre-bright)}
      .ss-cap .cn{font:700 1.1rem/1.15 'Lato',sans-serif;color:#fff;margin-top:0;display:inline-flex;align-items:center;gap:7px}
      .ss-chev{font-size:.72em;color:#fff;position:relative;top:2px}
      .ss-cap:hover .cn::after{color:#f0d9c4}
      .ss-cap:hover .cn{color:#f0d9c4}
      .ss-dots{position:absolute;bottom:12px;right:12px;z-index:4;display:flex;gap:6px}
      .ss-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.65);cursor:pointer;box-shadow:0 0 4px rgba(0,0,0,.35)}
      .ss-dots span.on{background:var(--ocre)}
      /* ESSAI 2026-08-31 : inversion slideshow (gauche) / intro (droite) sur pages d'ordre */
      body.enc-pillar .intro-wrap{grid-template-columns:1fr minmax(0,62ch)}
      body.enc-pillar .intro-wrap .slideshow{order:-1}
      @media(max-width:900px){.intro-wrap,body.enc-pillar .intro-wrap{grid-template-columns:1fr;gap:20px}}
      /* Tag venimeux sur la grille */
      body.enc-pillar .species-item-wrapper{position:relative}
      .venom-tag{position:absolute;top:12px;left:12px;z-index:4;display:inline-flex;align-items:center;gap:5px;background:var(--fm-danger,#b23b2e);color:#fff;font:700 10px/1 'Lato',sans-serif;letter-spacing:.05em;text-transform:uppercase;padding:5px 9px;border-radius:2px}
      /* Grille familles : legerement agrandie (scope page) */
      body.enc-pillar .species-item{width:22.5rem}
      body.enc-pillar .species-image{max-width:22.5rem;aspect-ratio:3/1.8}
      /* Guide venimeux/inoffensif : etapes deroulantes */
      .id-steps{margin:1rem 0 0}
      .id-step>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:13px;background:var(--beige);margin:0 -26px;padding:14px 26px;font:700 1rem/1.2 'Lato',sans-serif;color:var(--ink);transition:background .15s;border-top:1px solid #d8cdb8}
      .id-step:first-child>summary{border-top:0}
      .id-step>summary::-webkit-details-marker{display:none}
      .id-step>summary:hover{background:#e3d8c4}
      .st-n{flex:0 0 auto;font:700 18px/1 'Oswald',sans-serif;color:var(--ocre-deep);min-width:14px}
      .st-chev{margin-left:auto;color:var(--ocre-deep);font-size:13px;transition:transform .2s}
      .id-step[open] .st-chev{transform:rotate(90deg)}
      .id-band{border:1px dashed #cdbfa8;background:var(--paper);border-radius:2px;min-height:96px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ocre-deep);font:700 10.5px/1.5 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.08em;padding:14px;margin:16px 0 0}
      .id-cap{margin:11px 0 18px;color:#3f3a33;line-height:1.6;font-size:1rem}
      .id-cap b{color:var(--ink)}
      /* venimeux/inoffensif : intro (gauche) + pastilles (droite) */
      .venom-head{display:flex;align-items:center;gap:44px;margin:0 0 1.1rem}
      .venom-head .psub{margin:0;flex:1 1 auto;max-width:40ch;color:var(--muted-strong)}
      .venom-head .statrow{margin:0;flex:0 0 auto;gap:38px}
      @media(max-width:640px){.venom-head{flex-direction:column;align-items:flex-start;gap:18px}}

      /* venimeux/inoffensif : collage plein-hauteur (gauche) + colonne texte (droite) */
      /* ======================================================================
         GUIDE « Venimeux ou inoffensif ? » (.vq) — refonte 2026-09-17
         UNE seule image (le collage), UN critere actif a la fois, pastilles
         numerotees qui se retrouvent a l'identique sur l'image.

         POUR RETOUCHER :
         - couleurs et mesures : les variables de .vq ci-dessous, rien d'autre ;
         - ajouter un critere : un <button class="vq-cue" data-cue="cN"> dans le
           HTML + une image clue-N.jpg. Le JS et le pager s'adaptent seuls ;
         - remplacer un coloriage : ecraser images/encyclopedia/serpentes/
           venomous-harmless/clue-N.jpg (clue-0 = planche neutre, repli).
         AUCUNE font-family ici (a part le compteur en Oswald) : la famille
         s'herite du silo, donc l'arabe marche sans regle de rattrapage.
         ====================================================================== */
      .vq{--vq-v:#b23b2e;--vq-h:var(--teal);--vq-line:#d8cdb8;
        --vq-pin:21px;            /* diametre de la pastille = celui sur l'image */
        --vq-pin-line:22px;       /* hauteur de ligne des verdicts ; >= --vq-pin */
        --vq-btn-h:38px;          /* hauteur du bouton de sortie */
        --vq-route-lh:23px}
      .vq *{box-sizing:border-box}
      /* les <button> n'heritent pas de la police : on la fait suivre le silo
         (Lato en EN/FR, Noto en AR) sans jamais coder de famille en dur */
      .vq-cue,.vq-pager .pg-arw{font-family:inherit}
      .vq-box{border:1px solid var(--vq-line);border-radius:2px;overflow:hidden;background:#fff}

      /* barres haute et basse */
      .vq-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
        padding:11px 16px;background:var(--beige);border-bottom:1px solid var(--vq-line)}
      .vq-bar--end{border-bottom:0;border-top:1px solid var(--vq-line);padding:13px 16px;align-items:flex-start}
      .vq-legend{display:inline-flex;align-items:center;gap:20px;flex-wrap:wrap}
      .vq-lg{display:inline-flex;align-items:center;gap:9px;color:var(--ink);
        font-weight:700;font-size:12.5px;line-height:1.3;text-transform:uppercase;letter-spacing:.06em}
      .vq-lg i{width:11px;height:11px;border-radius:2px;display:inline-block}
      .vq-lg--v i{background:var(--vq-v)}
      .vq-lg--h i{background:var(--vq-h)}
      .vq-warn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
        border-bottom:2px solid var(--ocre);padding:2px 0 5px;
        font-weight:700;font-size:12.5px;line-height:1.3;text-transform:uppercase;letter-spacing:.05em;
        transition:border-color .16s}
      .vq-warn>i:first-child{color:var(--vq-v);font-size:14.5px}
      .vq-ar{color:var(--ocre);font-size:12px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
      .vq-warn:hover{border-bottom-color:var(--ocre-deep)}
      .vq-warn:hover .vq-ar{transform:translateX(4px)}

      /* image a gauche, criteres a droite */
      .vq-split{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(300px,1fr)}
      .vq-plate{margin:0;padding:20px;display:flex;flex-direction:column;align-items:center;gap:11px;
        border-inline-end:1px solid var(--vq-line);background:#fff}
      .vq-plate-box{position:relative;width:100%;max-width:450px;aspect-ratio:.8;background:#fff}
      .vq-plate-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
        opacity:0;transition:opacity .3s ease}
      .vq-plate-box img.is-on{opacity:1}
      .vq-plate figcaption{font-weight:400;font-size:11.5px;line-height:1.45;
        color:var(--muted-strong);text-align:center;max-width:340px}

      /* les trois criteres */
      .vq-cues{display:flex;flex-direction:column;background:#fff}
      .vq-cue{flex:1 1 0;align-content:center;display:block;width:100%;text-align:start;
        background:none;border:0;border-bottom:1px solid #eadfce;padding:18px 22px;cursor:pointer;
        transition:background .16s}
      .vq-cue:last-child{border-bottom:0}
      .vq-cue:hover,.vq-cue.is-on{background:var(--paper)}
      .vq-cue-t{display:block;color:var(--ink);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
      .vq-cue-t em{display:block;font-weight:400;font-style:normal;text-transform:none;letter-spacing:0;
        color:var(--ocre-deep);font-size:12px;line-height:1.45;margin-top:3px}
      .vq-cue-v,.vq-cue-h{display:grid;grid-template-columns:var(--vq-pin) minmax(0,1fr);column-gap:11px;
        align-items:start;margin-top:9px;font-weight:700;line-height:var(--vq-pin-line)}
      .vq-cue-v{color:#6d2b23}
      .vq-cue-h{color:#255a52}
      /* la pastille EST le numero, et on la retrouve au meme endroit sur l'image */
      .vq-pin{display:flex;align-items:center;justify-content:center;
        width:var(--vq-pin);height:var(--vq-pin);border-radius:50%;color:#fff;
        font-style:normal;font-weight:700;font-size:11.5px;line-height:1;
        font-variant-numeric:lining-nums tabular-nums;
        margin-top:calc((var(--vq-pin-line) - var(--vq-pin)) / 2)}
      .vq-pin--v{background:var(--vq-v)}
      .vq-pin--h{background:var(--vq-h)}
      /* hierarchie par la TAILLE seulement, jamais par un voile d'opacite */
      .vq-cue--1 .vq-cue-t{font-size:1.02rem}
      .vq-cue--1 .vq-cue-v,.vq-cue--1 .vq-cue-h{font-size:.98rem}
      .vq-cue--2 .vq-cue-t{font-size:.9rem}
      .vq-cue--2 .vq-cue-v,.vq-cue--2 .vq-cue-h{font-size:.9rem}
      .vq-cue--3 .vq-cue-t{font-size:.82rem}
      .vq-cue--3 .vq-cue-v,.vq-cue--3 .vq-cue-h{font-size:.84rem}

      /* pager : memes fleches que le guide d'ID, actif seulement en mobile */
      .vq-pager{display:none;align-items:center;justify-content:space-between;
        padding:6px 10px;background:var(--paper);border-bottom:1px solid #eadfce}
      .vq-pager .pg-arw{background:none;border:0;cursor:pointer;padding:11px 16px;
        display:inline-flex;align-items:center;justify-content:center;transition:transform .12s}
      .vq-pager .pg-arw .pgc{display:block;width:9px;height:9px;
        border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transition:border-color .15s}
      .vq-pager .pg-arw[data-d="-1"] .pgc{transform:rotate(135deg)}
      .vq-pager .pg-arw[data-d="1"] .pgc{transform:rotate(-45deg)}
      .vq-pager .pg-arw:hover .pgc{border-color:var(--ocre)}
      .vq-pager .pg-arw:active{transform:scale(.9)}
      .vq-pager .pg-n{font-family:'Oswald',sans-serif;font-weight:500;font-size:14px;line-height:1;
        letter-spacing:.03em;color:var(--muted-strong);min-width:44px;text-align:center}
      .vq-pager .pg-n b{font-weight:500;color:var(--ocre-deep)}

      /* sortie : meme hauteur des deux blocs => marges egales et textes sur la meme ligne */
      .vq p.vq-route{margin:0;flex:0 1 auto;white-space:nowrap;color:#3f3a33;font-size:.95rem;
        line-height:var(--vq-route-lh);
        padding:calc((var(--vq-btn-h) - var(--vq-route-lh)) / 2) 0}
      .vq p.vq-route b{color:var(--ink)}
      .vq-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;box-sizing:border-box;
        background:var(--ink);color:#fff;border:1.5px solid var(--ink);border-radius:2px;
        padding:12px 20px;text-decoration:none;font-weight:700;font-size:12px;line-height:1;
        text-transform:uppercase;letter-spacing:.04em;transition:background .2s,transform .16s}
      .vq-btn:hover{background:var(--ocre);border-color:var(--ocre);transform:translateY(-1px)}
      .vq-btn:hover .vq-ar{transform:translateX(4px)}
      .vq-btn .vq-ar{color:currentColor}

      /* arabe : une seule reprise, le compteur en Noto Kufi (le reste s'herite) */
      html[lang="ar"] .vq-pager .pg-n{font-family:"Noto Kufi Arabic","Oswald",sans-serif}
      html[lang="ar"] .vq-pager .pg-arw[data-d="-1"] .pgc{transform:rotate(-45deg)}
      html[lang="ar"] .vq-pager .pg-arw[data-d="1"] .pgc{transform:rotate(135deg)}
      html[lang="ar"] .vq-warn:hover .vq-ar,html[lang="ar"] .vq-btn:hover .vq-ar{transform:translateX(-4px)}

      @media(max-width:860px){
        .vq-split{grid-template-columns:1fr}
        .vq-plate{border-inline-end:0;border-bottom:1px solid var(--vq-line)}
      }
      @media(max-width:720px){
        .vq-bar{padding:11px 14px;gap:12px}
        .vq-legend{gap:14px}
        .vq-warn{align-self:flex-end;margin-inline-start:auto}
        .vq-pager{display:flex}
        .vq-cue{display:none;padding:16px}      /* un seul critere a la fois */
        .vq-cue.is-on{display:block}
        .vq-cue:hover,.vq-cue.is-on{background:#fff}
        .vq-bar--end{padding:14px}
        .vq p.vq-route{white-space:normal;padding:0}
        .vq-btn{width:100%;justify-content:center}
      }
      /* ===== Ajustements MOBILE ===== */
      @media(max-width:900px){
        .slideshow::after{background:radial-gradient(74% 84% at 5% 0%,rgba(8,5,2,.82) 0%,rgba(8,5,2,.30) 40%,transparent 62%)}
        .ss-cap{top:14px;bottom:auto;flex-direction:column-reverse}
      }
      @media(max-width:720px){
        .lead{font-size:1rem;line-height:1.6}
        .lead + .lead{margin-top:.6rem}
        .enc-pillar-toolbar{gap:10px 20px;overflow-x:visible;flex-wrap:wrap}
        .enc-pillar-toolbar button{padding:4px 0 6px}
      }

/* ===================================================================
   HOMOGÉNÉISATION POP-UPS + GUIDE D'ID (m-id) — 2026-08-29
   Header noir global + composant guide d'ID réutilisable (scopé .idg)
   =================================================================== */
/* Header noir — TOUS les pop-ups */
.modal-head{background:var(--bg-dark);border-bottom:0}
.modal-head .eyebrow{color:var(--ocre-bright)}
.modal-head h3{font:600 24px/1.15 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.01em; color:#fff; margin:0}
.modal-head .x{background:rgba(255,255,255,.14);color:#fff}
.modal-head .x:hover{background:var(--ocre);color:#fff}

/* Corps du guide d'ID : bandes pleine largeur */
.modal-body.idg{padding:0}
.idg .route{display:flex;align-items:center;justify-content:space-between;gap:18px;background:#fff;padding:18px 26px;border-bottom:1px solid var(--line)}
.idg .route p{margin:0;color:#3f3a33;font-size:1rem;line-height:1.5}.idg .route p b{color:var(--ink)}
.idg .rbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;background:none;border:0;border-bottom:2px solid var(--ocre);padding:2px 0 6px;font:700 13px/1 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);cursor:pointer;text-decoration:none;transition:.16s;white-space:nowrap}
.idg .rbtn i{font-size:13px;color:var(--ocre)}
.idg .rbtn .ar{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.idg .rbtn:hover{border-bottom-color:var(--ocre-deep)}.idg .rbtn:hover i{color:var(--ocre-deep)}.idg .rbtn:hover .ar{transform:translateX(4px)}
.idg .band{border-bottom:1px solid var(--line)}
.idg .band>.bandhd{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:13px;background:var(--beige);padding:15px 26px;font:700 1.06rem/1.2 'Lato',sans-serif;color:var(--ink);transition:background .15s}
.idg .band>.bandhd::-webkit-details-marker{display:none}
.idg .band>.bandhd:hover{background:#e3d8c4}
.idg .band>.bandhd .bn{font:700 18px/1 'Oswald',sans-serif;color:var(--ocre-deep);min-width:14px}
.idg .band>.bandhd .chev{margin-left:auto;align-self:center;transition:.2s;color:var(--ocre-deep)}
.idg .band[open]>.bandhd .chev{transform:rotate(90deg)}
.idg .bandbody{background:#fff;padding:22px 26px 26px}
/* fond beige : section 1 (confirm) pleine + planches section 2 ; bande de sélection reste blanche */
.idg .bandbody:has(.idconfirm2){background:var(--paper)}
.idg2 .famdetail{background:var(--paper);margin:0 -26px -26px;padding:22px 26px 26px}
.idg2 #s2-detail>.fd-grid{margin-top:0}
.idg .bandbody>.lead{color:var(--muted-strong);font-size:1rem;line-height:1.6;margin:0 0 1.1rem}
/* Plus de lead d'intro dans les bandeaux ID (2026-09-20) : le selecteur colle a l'en-tete de section. */
.idg .bandbody:has(>.idsel-wrap:first-child){padding-top:0}
.idg .idrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.idg .idrow .cap{font:700 12px/1.25 'Lato',sans-serif;color:var(--ink);margin:.6rem 0 .3rem;text-transform:uppercase;letter-spacing:.04em}
.idg .idrow .cap .lat{font-weight:400;font-style:italic;text-transform:none;letter-spacing:0;color:var(--muted-strong);font-size:11.5px;display:block}
.idg .ph{position:relative;background:#f4ecdb;border:1px dashed #cdbfa8;border-radius:2px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px}
.idg .ph .phtxt{font:600 9.5px/1.5 'Lato',sans-serif;color:#8a6a3a;max-width:92%}
.idg .idkey{margin:.7rem 0 0;padding:0;list-style:none}
.idg .idkey li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line);font-size:.88rem;color:#3f3a33;line-height:1.45}
.idg .idkey li:last-child{border-bottom:0}
.idg .idkey .n{font:600 13px/1.45 'Oswald',sans-serif;color:var(--ocre-deep)}.idg .idkey b{color:var(--ink)}
.idg .headband{display:flex;margin:0 -26px;border-top:1px solid #d8cdb8;border-bottom:1px solid #d8cdb8}
.idg .head{flex:1 1 0;min-width:0;cursor:pointer;background:none;border:0;padding:0;display:block;position:relative}
.idg .head[aria-selected=true] .him{z-index:2}
.idg .head[aria-selected=true] .him::after{content:'';position:absolute;inset:0;background:var(--paper);mix-blend-mode:multiply;opacity:.65;pointer-events:none;z-index:3}
.idg .famhead{display:flex;align-items:center;gap:12px;margin:1.3rem 0 0}
.idg #fhmid{flex:1;display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap}
.idg .fh-grp{display:inline-flex;align-items:center}
.idg .fam-name{display:inline-flex;align-items:baseline}
.idg .fh-grp .badge{margin-left:18px}
.idg #fhmid .vern{font:700 20px/1 'Lato',sans-serif;color:var(--ink)}
.idg #fhmid .cnt{font:400 13px/1 'Lato',sans-serif;color:var(--muted-strong)}
.idg #fhmid .sep{color:var(--on-dark-muted);font-size:12px;padding:0 9px}
.idg .fnav{background:none;border:0;color:var(--ink);cursor:pointer;font-size:16px;line-height:1;padding:4px 2px;transition:color .15s}
.idg .fnav:hover{color:var(--ocre)}
.idg .badge.danger{background:var(--fm-danger,#b23b2e);color:#fff}
.idg .badge.safe{background:var(--fm-endemic,#2E6B62);color:#fff}
.idg .fd-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:stretch;margin:1.3rem 0 0}
.idg .fd-grid[hidden]{display:none}
.idg .fd-right{display:flex;flex-direction:column;min-width:0}
.idg .fd-intro{margin:0 0 .8rem;color:#3f3a33;font-size:1rem;line-height:1.6}
.idg .fd-key{margin:0;padding:0;list-style:none}
.idg .fd-key li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line);font-size:.9rem;color:#3f3a33;line-height:1.45}
.idg .fd-key li:last-child{border-bottom:0}
.idg .fd-key .n{font:600 13px/1.45 'Oswald',sans-serif;color:var(--ocre-deep)}.idg .fd-key b{color:var(--ink)}
/* ID-key icon variant (✗ signature / ≠ look-alikes) — tuile Snakes du hub, 2026-09-11 */
.idg .fd-key .ic{display:inline-block;width:18px;text-align:center;font-size:13px;line-height:1.45;color:var(--ocre);flex:0 0 auto}
.idg .fd-key .ic-x{color:var(--ocre-deep);font-size:14px}
.idg .fd-key .ic-neq{color:var(--ocre)}
.idg .fd-key--ic a{color:var(--ocre-deep);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.idg .fd-key--ic a:hover{color:var(--ocre)}
/* note discrète sous une liste fd-key (disclaimer / renvoi guide) — 2026-09-13 */
.idg .fd-note{margin:.85rem 0 0;font:400 12.5px/1.5 'Lato',sans-serif;color:#6a6459}
.idg .fd-note a{color:var(--ocre-deep);font-weight:700;text-decoration:underline;text-decoration-color:#d8c3a8;text-underline-offset:2px}
.idg .fd-note a:hover{color:var(--ocre)}
.idg .fd-note a i{margin-right:6px;color:var(--ocre)}
.idg .fd-cta{margin-top:auto;padding-top:1.2rem}
.idg .fd-cta .lead2{margin:0 0 .7rem;color:var(--muted-strong);font-size:1rem;line-height:1.6}
.idg .btn-orange{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--ocre);color:#fff;border:1.5px solid transparent;border-radius:2px;padding:15px 28px;font:700 13px/1 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;transition:background .2s,transform .16s}
.idg .btn-orange .ar{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.idg .btn-orange:hover{background:var(--ocre-deep)}.idg .btn-orange:hover .ar{transform:translateX(4px)}.idg .btn-orange:active{transform:scale(.97)}
@media(max-width:720px){.idg .idrow{grid-template-columns:1fr}.idg .fd-grid{grid-template-columns:1fr}.idg .route{flex-direction:column;align-items:flex-start}}

/* Guide d'ID : photos de têtes (remplacent le placeholder quand présentes) */
.idg .head .him{aspect-ratio:1.8/3; background:#fff; display:flex; align-items:center; justify-content:center; text-align:center; font:600 8px/1.35 'Lato',sans-serif; color:#a08a63; padding:0; position:relative; overflow:hidden}
.idg .him-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}/* ===== HUB : overview + mediashow habitats/menaces ===== *//* mediashow : légende incrustée (style Snakes of Morocco) ; paragraphe à droite ; contrôle bas-droite */
.ms-img.on{opacity:1}
.ms-ph.on{opacity:1}
.ms-dot.on{background:var(--ocre)}

/* 2026-08-29 — largeur pop-up elargie + mesure de lecture confortable */
.modal-body>p,.modal-body>.psub,.faq p{max-width:62ch}

/* Variante : bandeau centre (pages 'magistrales' type hub). Ajouter la classe .hub-centered sur .enc-pillar-toolbar */
.enc-pillar-toolbar.hub-centered{justify-content:center}
@media(max-width:720px){.enc-pillar-toolbar.hub-centered{justify-content:center;flex-wrap:wrap;overflow-x:visible}}

/* ===== ID Guide Section 1 : onglets segmentes + stage glissant (layout constant) ===== */
.idg .seg{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 1.2rem}
.idg .seg-btn{background:#fff;border:1.5px solid var(--line);border-radius:2px;padding:8px 15px;font:700 12.5px/1 'Lato',sans-serif;color:var(--ink);cursor:pointer;transition:.15s;white-space:nowrap}
.idg .seg-btn:hover{border-color:var(--ocre);color:var(--ocre-deep)}
.idg .seg-btn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.idg .seg-btn .vs{color:var(--ocre-deep);font-style:italic}
.idg .seg-btn.on .vs{color:var(--ocre-bright)}
.idg .stage{overflow:hidden}
.idg .track{display:flex;align-items:stretch;transition:transform .38s cubic-bezier(.4,0,.2,1)}
.idg .slide{flex:0 0 100%;min-width:0;padding:2px}
.idg .idconfirm{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:center;height:100%}
.idg .idc-photo{aspect-ratio:16/10}
.idg .idc-intro{margin:0 0 .95rem;color:var(--muted-strong);font-size:1rem;line-height:1.6}
.idg .cmp-diff .n{color:var(--fm-danger,#b23b2e)}
.idg .confuse-line{margin:1.1rem 0 0;padding-top:.9rem;border-top:1px solid var(--line);color:var(--muted-strong);font-size:.92rem;line-height:1.55}
.idg .confuse-line .cl-opts{display:inline-block;margin-top:5px}
.idg .confuse-link{background:none;border:0;padding:0;font:inherit;color:var(--ocre-deep);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.idg .confuse-link:hover{color:var(--ocre)}
@media(max-width:640px){.idg .idconfirm{grid-template-columns:1fr}}/* === 2026-08-30 — Hub : carte Overview, bloc conservation Threats, ID guide onglets === */

.idg-check{margin:.2rem 0 0;padding:0;list-style:none}
.idg-check li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem;color:#3f3a33;line-height:1.5}
.idg-check li:last-child{border-bottom:0}
.idg-check li i{color:var(--ocre);font-size:12px}
.idg-check b{color:var(--ink)}
@media(max-width:640px){#idg-pane .fd-collage .ph{height:220px}}

.tshow-ctrl{position:absolute;right:clamp(16px,2.4vw,26px);bottom:clamp(14px,2vw,20px);z-index:4;display:flex;align-items:center;gap:11px}
.tshow-count{display:inline-flex;gap:.2em;font:500 14px/1 'Oswald',sans-serif;letter-spacing:.1em;color:var(--on-dark-muted);text-shadow:0 1px 8px rgba(0,0,0,.85)}
.tshow-count b{color:var(--ocre-bright);font-weight:600}
.tshow-nav{background:none;border:0;font-size:0;cursor:pointer;padding:8px;filter:drop-shadow(0 1px 12px rgba(0,0,0,.9));transition:opacity .25s,transform .16s}
.tshow-nav::before{content:'';display:block;width:15px;height:15px;border-right:3.5px solid var(--on-dark);border-bottom:3.5px solid var(--on-dark)}
.tshow-nav:hover{opacity:.7}
.tshow-nav:active{transform:scale(.92)}
.tshow-nav.prev::before{transform:rotate(135deg)}
.tshow-nav.next::before{transform:rotate(-45deg)}

/* === 2026-08-31 — ID Guide Section 1 (Option B) : barre "look-alikes" en bas + retour serpent === */
.idg .lb-bar{background:#fff;padding:8px 26px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.idg .lb-txt{font:700 13.5px/1 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--ocre);flex:0 0 auto;white-space:nowrap}
.idg .lb-pills{display:flex;gap:8px;flex-wrap:wrap}
.idg .lb-pill{background:#fff;border:1.5px solid var(--line);border-radius:2px;padding:8px 16px;font:700 12.5px/1 'Lato',sans-serif;color:var(--ink);cursor:pointer;transition:.15s}
.idg .lb-pill:hover{border-color:var(--ocre);color:var(--ocre-deep)}
.idg .lb-pill.on{background:var(--ink);border-color:var(--ink);color:#fff}
.idg .lb-home{margin-left:auto;display:none;align-items:center;gap:7px;background:none;border:0;border-bottom:2px solid var(--ocre);padding:2px 0 5px;font:700 12px/1 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);cursor:pointer;white-space:nowrap}
.idg .lb-home i{color:var(--ocre);font-size:13px}
.idg .lb-home:hover{border-bottom-color:var(--ocre-deep)}.idg .lb-home:hover i{color:var(--ocre-deep)}
.idg .band.on-compare .lb-home{display:inline-flex}
@media(max-width:640px){.idg .lb-bar{padding-left:20px;padding-right:20px}.idg .lb-home{margin-left:0}}

/* === 2026-08-31 — Feature 1 : 2e bouton "Open the [X] ID guide" (hub, deep-link #m-id) === */

.idg .btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--ocre-deep);border:1.5px solid #d8c3a8;border-radius:2px;padding:15px 24px;font:700 13px/1 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.idg .btn-ghost:hover{border-color:var(--ocre);color:var(--ocre-deep);background:#faf3ea}

/* === 2026-08-31 — Intro page pilier : eyebrow kicker + pastilles = clone EXACT du template accueil (.enjeu) === */
body.enc-pillar .page-eyebrow{font:700 clamp(20px,1.8vw,22px)/1.3 'Lato',sans-serif;text-transform:none;letter-spacing:0;color:var(--ink);margin:0 0 .6rem}
body.enc-pillar .intro-stats{display:flex;gap:44px;flex-wrap:wrap;align-items:flex-end;margin:1.4rem 0}
body.enc-pillar .istat{display:flex;align-items:last baseline;gap:12px}
body.enc-pillar .istat-num{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(40px,4vw,52px);line-height:1;letter-spacing:.005em;color:var(--ocre-deep)}
body.enc-pillar .istat-lbl{font-family:'Lato',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:11.5px;line-height:1.25;color:var(--muted-strong)}
/* Variante endémique : teal charte (var(--fm-endemic,#2E6B62)) — pastille intro d'ordre */
body.enc-pillar .istat.endemic .istat-num{color:var(--fm-endemic,#2E6B62)}
/* 2026-09-20 — la couleur est dans le CHIFFRE, jamais dans le libelle : la variante teal ne recolore plus .istat-lbl (il reste gris, comme la variante ocre). Ancienne regle : color:var(--fm-endemic). */
@media(max-width:520px){body.enc-pillar .intro-stats{gap:30px}}

/* === 2026-08-31 — Checklist hub : libellé d'ordre + badges de statut (Endemic/To confirm) === */
/* Checklist hub : ordre = bandeau beige ; familles = bandeaux gris DÉCALÉS d'un cran (hiérarchie) */
.splist .ord-lbl{background:var(--beige);color:var(--ink);font:700 14px/1 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:13px 16px;display:flex;align-items:center;gap:10px;border-top:1px solid #d8cdb8}
.splist .ord-lbl:first-child{border-top:0}
.splist .ord-lbl .ord-n{font-weight:700;color:var(--ocre-deep);letter-spacing:.02em;text-transform:none;font-size:12.5px}
/* décalage d'une tabulation des familles sous leur ordre */
.splist-hub .fam{padding-left:16px}
.splist .row .sci .st-badge{margin-left:8px;display:inline-flex;align-items:center;font:700 9px/1 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.04em;padding:3px 6px;border-radius:2px;vertical-align:middle;white-space:nowrap}
.splist .row .sci .st-badge.st-e{background:var(--fm-endemic,#2E6B62);color:#fff}
.splist .row .sci .st-badge.st-pc{background:#fff;color:#8a7a55;border:1px solid #d8c3a8}
.splist .row .sci .st-badge+.st-badge{margin-left:5px}
/* Sous-especes = rows standards (template hub), juste indentees sous l'espece */
.splist .row.is-ssp{padding-left:34px}
@media(max-width:720px){.splist .row.is-ssp{padding-left:34px}}

/* === 2026-08-31 — Item 6 FAQ : animation d'ouverture + bloc "Ask us" === */
.faq details[open] > :not(summary){animation:faqReveal .28s cubic-bezier(.22,1,.36,1)}
@keyframes faqReveal{from{opacity:0}to{opacity:1}}
/* Ouverture/fermeture en douceur de la HAUTEUR (navigateurs récents ; repli = ouverture instantanée) */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{height:0;overflow:hidden;transition:height .3s cubic-bezier(.22,1,.36,1),content-visibility .3s allow-discrete}
  .faq details[open]::details-content{height:auto}
  .faq details[open] > :not(summary){animation:none}
}
@media(prefers-reduced-motion:reduce){
  .faq details[open] > :not(summary){animation:none}
  .faq details::details-content{transition:none}
}
.faq p{max-width:62ch;color:#3f3a33;line-height:1.6}
.faq p + p{margin-top:.8rem}
.faq-foot{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.faq-foot p{margin:0;padding:0;font:400 14px/1.4 'Lato',sans-serif;color:var(--muted-strong);max-width:none}
.faq-foot .ask{display:inline-flex;align-items:center;gap:7px;border-bottom:2px solid var(--ocre);padding:2px 0 4px;font:700 13px/1 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);text-decoration:none;white-space:nowrap;transition:border-color .16s}
.faq-foot .ask:hover{border-bottom-color:var(--ocre-deep)}
.faq-foot .ask .ar{color:var(--ocre);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.faq-foot .ask:hover .ar{transform:translateX(3px)}

/* ============================================================================
   ID GUIDE v2 — composant unifié réplicable (scopé .idg2, 2026-09-01)
   Corps du pop-up = class="modal-body idg idg2" : les atomes .idg (btn-orange,
   btn-ghost, badge, idkey, idc-intro, fd-key, fd-intro, lb-*) restent partagés ;
   la STRUCTURE v2 (sélecteur scrollable, grilles nommées, pager, boutons empilés)
   est scopée .idg2 pour ne pas impacter les pages encore en ancien système.
   ============================================================================ */
/* Sélecteur horizontal : scroll si débordement, centré sinon */
.idg2 .idsel-wrap{position:relative;margin:0 -26px}
.idg2 .idsel{display:flex;gap:0;overflow-x:auto;overflow-anchor:none;scroll-snap-type:none;border-top:1px solid #d8cdb8;border-bottom:1px solid #d8cdb8;background:#fff;scrollbar-width:none}
.idg2 .idsel.is-fit{justify-content:center}
.idg2 .idsel::-webkit-scrollbar{display:none}
.idg2 .idsel::-webkit-scrollbar-track{background:#ececec}
.idg2 .idsel::-webkit-scrollbar-thumb{background:#c3bdb2;border-radius:0}
.idg2 .idsel.is-scroll::-webkit-scrollbar-thumb{background:#a49d90}
.idg2 .idtile{position:relative;flex:0 0 auto;width:var(--tile-w);padding:0;border:0;margin:0;background:#fff;cursor:pointer;overflow:hidden;display:block}
.idg2 .idtile .im{position:relative;aspect-ratio:var(--tile-ar);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.idg2 .idtile .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.idg2 .idtile .lbl{font:600 8.5px/1.35 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.03em;color:#a08a63;text-align:center;padding:6px}
.idg2 .idtile::after{content:'';position:absolute;inset:0;background:var(--paper);mix-blend-mode:multiply;opacity:0;transition:opacity .15s;pointer-events:none}
.idg2 .idtile[aria-selected=true]::after{opacity:0}
/* State selectionne (tuiles image, tous modes heads/thumbs/inline) : fine ligne ocre en bas, par-dessus l'image. Discret + homogene. 2026-09-13 */
/* selectionnee : leger voile beige + ligne ocre ; les non-selectionnees restent pleine couleur */
body:not(.enc-hub) .idg2 .idtile[aria-selected=true]::after{opacity:.5}
body:not(.enc-hub) .idg2 .idtile[aria-selected=true]::before{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ocre);z-index:4;pointer-events:none}
/* Nav clavier : pas de contour ocre sur les tuiles (le state selectionne = ligne + voile fait deja l'indication). */
.idg2 .idtile:focus-visible,.idg2 .idtile:focus{outline:none}
.idg2 .idtile:hover:not([aria-selected=true]){filter:brightness(.97)}
.idg2 .idsel[data-mode=heads]{--tile-w:14%;--tile-ar:1.8/3}
.idg2 .idsel[data-mode=heads45]{--tile-w:14%;--tile-ar:4/5} /* headshots portrait 4:5 (viperidae) */
.idg2 .idsel[data-mode=thumbs]{--tile-w:25%;--tile-ar:1200/700}
/* Drag-to-scroll (2026-09-18) : la bande s'annonce glissable des qu'elle depasse */
.idg2 .idsel.is-scroll .idtile{cursor:grab}
.idg2 .idsel.is-scroll.is-dragging,.idg2 .idsel.is-scroll.is-dragging .idtile{cursor:grabbing}
.idg2 .idsel.is-dragging{user-select:none;-webkit-user-select:none}
.idg2 .idsel-wrap::before,.idg2 .idsel-wrap::after{content:'';position:absolute;top:1px;bottom:1px;width:34px;pointer-events:none;z-index:3;opacity:0;transition:opacity .2s}
.idg2 .idsel-wrap::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.idg2 .idsel-wrap::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.idg2 .idsel-wrap.can-left::before{opacity:1}
.idg2 .idsel-wrap.can-right::after{opacity:1}
.idg2 .fd-collage .ph2{aspect-ratio:16/10;border-radius:2px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px #ece4d5}
.idg2 .fd-collage .ph2 img{width:100%;height:100%;object-fit:cover;display:block}
/* Section 1 : grille photo | head | body | chooser */
.idg2 .idconfirm2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"photo head" "photo body";grid-template-rows:auto 1fr;column-gap:22px;row-gap:.5rem;align-items:start}
.idg2 #s1-photo{grid-area:photo;align-self:start}
.idg2 .idc-head{grid-area:head;min-width:0}
.idg2 .idc-body{grid-area:body;min-width:0}
.idg2 .idphoto{position:relative;border-radius:2px;overflow:hidden;background:#f4ecdb;border:1px dashed #cdbfa8}
.idg2 .idphoto .ph{position:relative;aspect-ratio:16/9;border:0;background:none;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;pointer-events:none}
/* Collage de la section 1 : les collages de famille sont livres en 16/10 (regle Rayane 15/09).
   Classe posee sur le modal-body des pages de FAMILLE ; les pages d'ordre restent en 16/9. */
.idg2.idg--s1-1610 .idphoto .ph{aspect-ratio:16/10}

.idg2 .idphoto .ph.on{opacity:1}
/* Fix viperidae : n'afficher que l'etat actif (le toggle .on bascule via s1-pills) ; sinon les 3 collages s'empilent. 2026-09-13 */
.idg2 .idphoto .ph:not(.on){display:none}
.idg2 .idphoto:has(img){border:1px solid #d8cbb2;background:none}
.idg2 .idphoto:has(img) .phtxt{display:none}
.idg2 .idphoto .phtxt{font:600 9.5px/1.5 'Lato',sans-serif;color:#8a6a3a;max-width:92%}
.idg2 .idtitle{font:700 clamp(18px,1.6vw,20px)/1.25 'Lato',sans-serif;text-transform:none;letter-spacing:0;color:var(--ink);margin:0 0 .55rem}
.idg2 .idc-head .idc-intro{margin:0}
.idg2 .idc-body .idkey{margin:0}
.idg2 .idconfirm2 .lb-bar.in-col{grid-area:chooser;align-self:end;margin:0;padding:.95rem 0 0;background:none;border-top:1px solid var(--line);gap:12px}
.idg2 .lb-bar.in-col .lb-txt{font-size:12px}
.idg2 .lb-bar.in-col .lb-home{margin-left:0}
/* Section 2 : grille collage | head | body | cta */
.idg2 .fd-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"collage head" "collage body" "collage cta";grid-template-rows:auto 1fr auto;column-gap:22px;row-gap:.5rem;align-items:start;margin:1.3rem 0 0}
.idg2 .fd-grid>.fd-collage{grid-area:collage;align-self:start}
.idg2 .fd-grid>.fd-head{grid-area:head}
.idg2 .fd-grid>.fd-body{grid-area:body}
.idg2 .fd-grid>.fd-cta{grid-area:cta;align-self:end;margin-top:0}
.idg2 .fd-head{min-width:0}
.idg2 .fd-head-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.idg2 .fd-head-txt{min-width:0}
.idg2 .fd-head .idtitle{margin:0}
.idg2 .fd-head .sp-lat{font:400 15px/1.3 'Lato',sans-serif;color:var(--muted-strong);margin:.18rem 0 0}
.idg2 .fd-head .sp-lat .fl{font-style:italic}
.idg2 .fd-head .sp-lat .idcnt{font-style:normal;color:var(--muted)}
.idg2 .sp-lat .idend{display:inline-block;background:var(--fm-endemic,#2E6B62);color:#fff;font:700 9px/1 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.04em;padding:3px 7px;border-radius:2px;vertical-align:middle}
.idg2 .fd-head .fd-meta{margin:.6rem 0 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.idg2 .fd-head .fd-meta .fm-end{display:inline-flex;align-items:center;font:700 9.5px/1 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.05em;padding:5px 9px;border-radius:2px}
.idg2 .fd-head .fd-meta .fm-cons{font:700 9.5px/1 'Lato',sans-serif}
.idg2 .fd-cta .btn-soon{display:inline-flex;align-items:center;justify-content:center;width:100%;background:#fff;color:var(--ocre-deep,#9E5220);border:1.5px solid var(--ocre,#C06A2C);border-radius:2px;padding:15px 28px;font:700 13px/1 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.04em;text-align:center;transition:background .2s,color .2s}
.idg2 .fd-cta .btn-soon:hover{background:var(--ocre,#C06A2C);color:#fff}
.idg2 .fd-head .fd-meta .fm-end--e{background:var(--fm-endemic,#2E6B62);color:#fff}
.idg2 .fd-head .fd-meta .idg2 .fd-body .fd-intro{margin-top:0}
/* pager ‹ n/total › (chevrons style hero + compteur Oswald) */
.idg2 .fd-pager{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;margin-top:2px}
.idg2 .pg-arw{background:none;border:0;cursor:pointer;padding:7px;min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center;transition:transform .12s}
.idg2 .pg-arw .pgc{display:block;width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transition:border-color .15s}
.idg2 .pg-arw[data-d="-1"] .pgc{transform:rotate(135deg)}
.idg2 .pg-arw[data-d="1"] .pgc{transform:rotate(-45deg)}
.idg2 .pg-arw:hover .pgc{border-color:var(--ocre)}
.idg2 .pg-arw:active{transform:scale(.9)}
.idg2 .pg-n{font:600 14px/1 'Oswald',sans-serif;letter-spacing:.03em;color:var(--muted-strong);min-width:40px;text-align:center}
.idg2 .pg-n b{font-weight:600;color:var(--ocre-deep)}
/* boutons empilés : lien 'X ID guide' (loupe + barre orange) au-dessus, bouton page en dessous */
.idg2 .fd-cta{display:flex;flex-direction:column;gap:11px;align-items:stretch;margin-top:0}
.idg2 .fd-cta>a{width:100%}
.idg2 .fd-idglink{display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-bottom:2px solid var(--ocre);background:none;padding:11px 6px;font:700 14px/1 'Lato',sans-serif;color:var(--ink);text-decoration:none;cursor:pointer;transition:color .15s}
.idg2 .fd-idglink i{color:var(--ocre);font-size:13px}
.idg2 .fd-idglink:hover{color:var(--ocre-deep)}
.idg2 .btn-ghost .ar{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.idg2 .btn-ghost:hover .ar{transform:translateX(4px)}
.idg2 .fd-cta .btn-orange,.idg2 .fd-cta .btn-ghost,.idg2 .fd-cta .fd-idglink{white-space:normal;line-height:1.25;text-align:center}
/* 2026-09-11 — CTA ID-guide standard : bouton ID guide (cadre, loupe orange, texte noir) AU-DESSUS, bouton page (noir plein) EN DESSOUS. Remplace orange+ghost sur le hub. */
.idg2 .fd-cta .btn-dark{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--ink);color:#fff;border:1.5px solid transparent;border-radius:2px;padding:15px 28px;font:700 13px/1 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;transition:background .2s,transform .16s}
.idg2 .fd-cta .btn-dark:hover{background:var(--ocre);transform:translateY(-1px)}
.idg2 .fd-cta .btn-dark .ar{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.idg2 .fd-cta .btn-dark:hover .ar{transform:translateX(4px)}
.idg2 .fd-cta .btn-idguide{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#fff;color:var(--ink);border:1.5px solid #d8c3a8;border-radius:2px;padding:13px 24px;font:700 12.5px/1 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;transition:border-color .2s,background .2s}
.idg2 .fd-cta .btn-idguide i{color:var(--ocre);font-size:13px}
.idg2 .fd-cta .btn-idguide:hover{border-color:var(--ocre);background:#faf3ea}
.idg2 .fd-cta .btn-dark,.idg2 .fd-cta .btn-idguide{white-space:normal;line-height:1.25;text-align:center}
/* mobile : réordonner (texte haut · image milieu · texte bas) */
@media(max-width:640px){
  .idg2 .idconfirm2{grid-template-columns:1fr;grid-template-areas:"head" "photo" "body" "chooser";row-gap:.9rem}
  .idg2 .fd-grid{grid-template-columns:1fr;grid-template-areas:"head" "collage" "body" "cta";row-gap:1rem}
}
@media(max-width:720px){
  .idg2 .idsel[data-mode=thumbs]{--tile-w:44%}
  .idg2 .idsel-wrap::before,.idg2 .idsel-wrap::after{display:none}
}
.modal-head .hnb{white-space:nowrap}

/* états Section 1 (contenu HTML statique, bascule par .on) */
.idg2 .idc-state{display:none}
.idg2 .idc-state.on{display:block}
.idg2 .fd-grid[hidden]{display:none}

/* Mode vignettes peu nombreuses (thumbs ≤4) : intro à GAUCHE + vignettes PLEINE HAUTEUR collées à DROITE,
   bord à bord (sans gap, sans cadre), LIGNE DE SÉPARATION dessous. Flex simple, aucun calcul de colonnes.
   Hauteur du bandeau = hauteur du texte d'intro ; les images la remplissent (object-fit cover). 5+ espèces = bandeau plein (pas de .ids-inline). */
.idg2 .ids-inline{display:flex;align-items:stretch;justify-content:space-between;gap:0;margin:-22px -26px 0 -26px;padding-left:26px;padding-right:18px;border-bottom:1px solid #d8cdb8;overflow:hidden}
.idg2 .ids-inline .lead{align-self:center;margin:0;padding:20px 26px 20px 0;max-width:400px}
.idg2 .ids-inline .idsel-wrap{align-self:stretch;margin:0;display:flex;flex:0 0 auto}
.idg2 .ids-inline .idsel{align-self:stretch;display:flex;align-items:flex-start;overflow:visible;border:0;background:none;scroll-snap-type:none;padding-bottom:0}
.idg2 .ids-inline .idtile{width:185px;border:0;border-radius:0}
.idg2 .ids-inline .idtile .im{aspect-ratio:var(--tile-ar);height:auto}
@media(max-width:640px){
  .idg2 .ids-inline{flex-direction:column;margin-left:-26px;margin-right:-26px;padding-left:0;padding-right:0;border-bottom:0}
  .idg2 .ids-inline .lead{align-self:stretch;padding:16px 20px;max-width:none}
  .idg2 .ids-inline .idsel-wrap{align-self:stretch}
  .idg2 .ids-inline .idsel{width:100%;border-top:1px solid #d8cdb8;border-bottom:1px solid #d8cdb8}
  .idg2 .ids-inline .idtile{flex:1 1 0;width:auto}
  .idg2 .ids-inline .idtile .im{aspect-ratio:var(--tile-ar);height:auto}
}

/* liens dans les intros de pages d'ordre : ocre (charte), pas le bleu par défaut */
body.enc-pillar .intro-txt a{font-weight:700;color:var(--ocre-deep);text-decoration:underline;text-decoration-color:#d8c3a8;text-underline-offset:2px;transition:color .15s}
body.enc-pillar .intro-txt a:hover{color:var(--ocre);text-decoration-color:var(--ocre)}

/* === Déroulant sous-espèces (checklist) — canonique 2026-09-03 ===
   Règle : une espèce ayant des sous-espèces listées les range derrière
   un déclencheur inline « N subspecies / N sous-espèces » à droite du nom
   latin. Cliquer le nom (.sci.js-ssp) déroule .ssp-list. JS = enrich.js. */
.splist .sci.js-ssp{cursor:pointer}
.splist .ssp-tog{margin-left:10px;display:inline-flex;align-items:center;gap:7px;padding:4px 9px;border-radius:2px;font:600 11px/1 'Lato',sans-serif;font-style:normal;text-transform:none;letter-spacing:.01em;color:#948d80;vertical-align:baseline;transition:color .15s,background .15s}
.splist .sci.js-ssp:hover .ssp-tog{color:var(--ocre-deep);background:var(--on-dark)}
.splist .ssp-tog .chev{font-size:10px;transition:transform .2s}
.splist .ssp-tog.is-open .chev{transform:rotate(90deg)}
.splist .sci.js-ssp:focus-visible{outline:2px solid var(--ocre-deep);outline-offset:2px;border-radius:2px}
@media(max-width:720px){.splist .row-wrap>.row>.ssp-tog{grid-column:1;grid-row:3;justify-self:start;margin-left:0;margin-top:2px}}
.splist .ssp-list{display:none}
.splist .ssp-list.open{display:block}

/* Sous-espèces regroupées : pas de filet entre l'espèce et ses sous-espèces,
   ni entre sous-espèces ; légère teinte pour lire le bloc comme un enfant. */
.splist .row-wrap>.row{padding-bottom:3px}                    /* rapproche l'espèce de sa 1re sous-espèce */
.splist .ssp-list .row.is-ssp{border-top:none;padding-top:4px;padding-bottom:4px}  /* sous-espèces compactes */
.splist .ssp-list{padding-bottom:12px}                        /* respiration après la dernière sous-espèce */

/* === Checklist : le bouton reflète le statut d'espèce (2026-09-03) ===
   online = .more « Learn more » (lien, existant) ; documented = .more.st-prep (contour ocre) ;
   todo = .more.st-todo (gris). Non cliquables, sans flèche, alignés sur les badges de carte. */
.splist .row .more.st-prep,.splist .row .more.st-todo{border:1px solid;border-radius:2px;padding:6px 8px;pointer-events:none;cursor:default}
.splist .row .more.st-prep{color:var(--ocre-deep,#9E5220);border-color:var(--ocre,#C06A2C);background:#fff}
.splist .row .more.st-todo{color:var(--muted);border-color:#d8cdb8;background:#fff}
.splist .row .more.st-prep i,.splist .row .more.st-todo i{display:none}
.splist .row:hover .more.st-prep{background:#fff;color:var(--ocre-deep,#9E5220);border-color:var(--ocre,#C06A2C)}
.splist .row:hover .more.st-todo{background:#fff;color:var(--muted);border-color:#d8cdb8}

/* === Checklist : alignement boutons + tabulation familles (universel) 2026-09-03 === */
/* B. Boutons de statut = largeur fixe → colonnes alignées, aucun décalage du contenu */
.splist .row{grid-template-columns:1.55fr 1.25fr .8fr 112px}
.splist .row .more{justify-self:stretch;justify-content:center;text-align:center}
@media(max-width:720px){.splist .row{grid-template-columns:1fr 150px}}
/* C. Espèces tabulées SOUS leur famille (hiérarchie visible sur toutes les pages) */
.splist:not(.splist-hub) .row{padding-left:22px}
.splist-hub .row{padding-left:32px}
.splist:not(.splist-hub) .row.is-ssp{padding-left:38px}
.splist-hub .row.is-ssp{padding-left:48px}

/* === MOBILE — intro des pages d'ordre : slideshow d'abord + « Read more » (2026-09-03, universel) === */
body.enc-pillar .intro-more{display:none}
@media(max-width:720px){
  body.enc-pillar .intro-wrap{grid-template-columns:1fr;gap:16px}
  body.enc-pillar .intro-wrap .slideshow{order:-1}
  body.enc-pillar .intro-txt{display:flex;flex-direction:column}
  body.enc-pillar .intro-txt .page-eyebrow{order:1;margin:0 0 .5rem}
  body.enc-pillar .intro-txt .intro-stats{order:2;justify-content:center;gap:30px;margin:.2rem 0 .9rem}
  body.enc-pillar .intro-txt .lead{order:3;margin:0 0 .5rem}
  body.enc-pillar .clamp-wrap{order:3;position:relative}
  body.enc-pillar .intro-txt:not(.is-open) .lead{display:none}
  body.enc-pillar .intro-txt:not(.is-open) .intro-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.2rem}
  /* bouton = chip contour ocre, sur sa propre ligne, clairement tappable */
  /* font-family:inherit — un <button> n'herite PAS de la police du document : sans
     cette declaration le « … more » tombait sur Arial, dans les trois langues (verifie
     au rendu headless le 2026-09-19). Il reprend donc la police du texte qu'il prolonge. */
  body.enc-pillar .intro-more{display:inline-block;cursor:pointer;background:none;border:0;color:var(--ocre-deep,#9E5220);font-weight:800;font-family:inherit}
  /* replié : inline en bout de 2e ligne, fondu blanc court et propre */
  body.enc-pillar .intro-more.is-inline{position:absolute;right:2px;bottom:0;padding-left:1.9em;font-weight:700;font-size:1rem;line-height:1.6;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 1em)}
  /* déplié : « Show less » en bas */
  body.enc-pillar .intro-more.is-block{order:4;align-self:flex-start;margin:.4rem 0 .2rem;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
  /* barre d'enrichissement centrée + wrap (comme le hub) */
  body.enc-pillar .enc-pillar-toolbar{justify-content:center;flex-wrap:wrap;overflow-x:visible;gap:10px 22px}
}

/* ===== Checklist MOBILE (2026-09-04, Rayane) : nom empilé (latin + vernaculaire), bouton centré à droite ===== */
@media(max-width:720px){
  .splist .row{grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:12px;row-gap:3px;align-items:center}
  .splist:not(.splist-hub) .row{padding-left:14px}
  .splist-hub .row{padding-left:18px}
  .splist .row .en{grid-column:1;grid-row:2;display:block;font-size:.72rem;color:var(--muted-strong);font-style:normal;white-space:normal;line-height:1.25}
  .splist .row .ar{display:none}
  .splist .row .more{grid-column:2;grid-row:1 / span 2;align-self:center;justify-self:end;width:112px;min-width:0}
  .splist .row .sci{grid-column:1; grid-row:1; font-size:13px}
  .splist .fam{padding-left:8px}
  .splist:not(.splist-hub) .row.is-ssp{padding-left:12px;padding-right:6px}
  .splist .row.is-ssp .sci{font-size:12px}
  /* Pastilles endémisme abrégées sur mobile : Endemic->E, PC->PC */
  .splist .row .sci .st-badge{font-size:0;padding:3px 5px}
  .splist .row .sci .st-badge::before{font-size:9px;font-weight:700;letter-spacing:.03em}
  .splist .row .sci .st-badge.st-e::before{content:"E"}
  .splist .row .sci .st-badge.st-pc::before{content:"PC"}
}

/* === Scroll-lock pop-ups (2026-09-04) : le scroll reste DANS le pop-up, jamais la page derrière === */
html.modal-lock,html.modal-lock body{overflow:hidden!important;overscroll-behavior:none}

.modal-body{overscroll-behavior:contain}
.idg2 .idsel{overscroll-behavior-x:contain}

/* === Bande d'ID thumbs — densité tablette (2026-09-04, C2) === */
@media(max-width:960px) and (min-width:721px){.idg2 .idsel[data-mode=thumbs]{--tile-w:36%}}

/* pas de fondu de bord sur les bandes thumbs (Rayane 2026-09-04 : 4 images nettes, scrollbar = signal) */
.idg2 .idsel-wrap:has(.idsel[data-mode=thumbs])::before,.idg2 .idsel-wrap:has(.idsel[data-mode=thumbs])::after{content:none}

/* têtes : remplir la largeur */
.idg2 .idsel[data-mode=heads] .idtile,.idg2 .idsel[data-mode=heads45] .idtile{flex:0 0 auto;width:var(--tile-w)}
/* Têtes verticales sur mobile : largeur fixe + scroll (comme les vignettes), ~5 visibles — 2026-09-05 */
@media(max-width:720px){.idg2 .idsel[data-mode=heads]{--tile-w:20%}.idg2 .idsel[data-mode=heads45]{--tile-w:26.7%}} /* heads45 4:5 elargi pour egaler la hauteur du mode heads 3:5 sur mobile */

/* Scrollbar sur-mesure de la bande d'ID — grise, discrète, COLLÉE (0 espace), identique desktop/mobile */
.idg2 .idsel-sb{display:none;position:relative;height:6px;margin:0;background:#ececec;touch-action:none;cursor:pointer}
.idg2 .idsel-sb-thumb{position:absolute;top:0;left:0;height:100%;width:28px;background:#c3bdb2;cursor:grab;will-change:transform}
.idg2 .idsel-sb-thumb:hover{background:#a49d90}
.idg2 .idsel-sb-thumb:active{cursor:grabbing;background:#a49d90}

/* === Checklist FR : libellés de statut plus longs qu'en EN (« Bientôt disponible »…) ===
   La colonne bouton est fixe (112px) pour aligner et garder TOUS les boutons à la même
   largeur dans une langue. En FR le texte est plus long → on élargit la colonne (et la
   largeur mobile) uniquement pour html[lang=fr]. Largeur uniforme conservée. (2026-09-06) */
html[lang="fr"] .splist .row{grid-template-columns:1.55fr 1.25fr .8fr 128px}
@media(max-width:720px){
  html[lang="fr"] .splist .row{grid-template-columns:1fr 128px}
  html[lang="fr"] .splist .row .more{width:128px}
}

br.fr-mbr{display:none}
@media(max-width:720px){br.fr-mbr{display:inline}}

/* ============================================================
   Checklist — bloc intro + explicateur de statuts (droite, large)
   + note « À propos de cette checklist » en pied (style .ask)  (v10, 2026-09-09)
   Contenu = HTML statique (indexable) ; enrich.js = comportement.
   ============================================================ */
.cl-head{max-width:70ch;margin-bottom:22px}
.cl-head>.psub{margin:0;font-size:1.05rem;line-height:1.55;color:#3f3a33}
.cl-foot{margin-top:20px;text-align:end}
.cl-src{display:block}
.cl-src>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;border-bottom:2px solid var(--ocre,#C06A2C);padding:2px 0 4px;font:700 13px/1 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);white-space:nowrap;transition:border-color .16s}
.cl-src>summary::-webkit-details-marker{display:none}
.cl-src>summary:hover{border-bottom-color:var(--ocre-deep)}
.cl-src>summary .fa-chevron-right{color:var(--ocre,#C06A2C);font-size:11px;transition:transform .2s}
.cl-src[open]>summary .fa-chevron-right{transform:rotate(90deg)}
.cl-src .cl-src-body{margin:12px 0 2px;text-align:start;font:400 13px/1.6 'Lato',sans-serif;color:#4a453f;max-width:74ch;margin-inline-start:auto}
.cl-src .cl-src-body a{color:var(--ocre,#C06A2C)}
@media(max-width:680px){.cl-head{max-width:none}}

/* 2026-09-10 — collages ID-guide viperidae : cadrer l'img dans le placeholder .ph (16:10) */
.idg .fd-collage .ph{aspect-ratio:16/10; position:relative; overflow:hidden; border:1px solid #d8cbb2}
.idg--photo169 .fd-collage .ph{aspect-ratio:16/9}
.idg .fd-collage .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* 2026-09-11 — collages ID-guide du HUB en 16:9 (les pages d’ordre restent en 16:10) */
#idg-hub .fd-collage .ph{aspect-ratio:16/9}

.idg2 .idphoto .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ===== Transition guide d'ID : passage grille -> guide (2026-09-13, v3) =====
   Un indicateur ocre GLISSE de l'onglet grille vers Identification guide, puis
   l'onglet s'enfonce une seule fois avant l'ouverture reelle. */
.enc-pillar-toolbar button.idg-press{transform:scale(.94);transition:transform .12s ease}
@media(prefers-reduced-motion:reduce){
  .enc-pillar-toolbar button.idg-press{transform:none}
}

/* ===== Panneau « What to do if bitten » (pilier famille venimeuse) — scope .bite ===== */
.bite .bite-emg{padding:22px 26px 24px;text-align:center;background:#fff;border-bottom:1px solid var(--line)}
.bite .bite-lead{margin:0 0 18px;color:#3f3a33;font-size:1.05rem;line-height:1.55}
.bite .bite-lead b{color:var(--ink)}
.bite .bite-nums{display:flex;justify-content:center;align-items:center;flex-wrap:wrap}
.bite .bite-num{text-decoration:none;padding:0 36px}
.bite .bite-num+.bite-num{border-left:1px solid var(--line)}
.bite .bite-num-lab{display:block;font:700 .7rem/1.2 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0 0 6px}
.bite .bite-num-fig{display:block;font:600 2.1rem/1 'Oswald',sans-serif;letter-spacing:.01em;color:var(--ocre)}
.bite .bite-num:hover .bite-num-fig{color:var(--ocre-deep)}
.bite .bite-body{background:var(--paper);padding:20px 26px 22px}
.bite .bite-body .steps{margin:0}
.bite .steps li{border-bottom:1px solid #ece3d3;padding:10px 0;padding-inline-start:32px;color:var(--ink);line-height:1.5}
.bite .steps li:last-child{border-bottom:0}
.bite .steps li::before{font-size:15px;top:12px}
.bite .steps li b{color:var(--ink)}
.bite .bite-dont{display:flex;gap:11px;align-items:center;justify-content:center;text-align:center;background:#faf0e2;border:1px solid #ecd9bd;border-radius:2px;padding:15px 18px;margin:16px 0 0}
.bite .bite-dont>i{color:#b23b2e;font-size:1.25rem;flex:0 0 auto}
.bite .bite-dont p{margin:0;color:var(--ink);line-height:1.45;font-size:1.06rem}
.bite .bite-dont p b{color:var(--ink)}
.bite .fd-note{margin:16px 0 0}
@media(max-width:560px){.bite .bite-num{padding:14px 0}.bite .bite-num+.bite-num{border-left:0;border-top:1px solid var(--line)}}

/* ============================================================================
   GUIDE D'ID  —  2026-09-14
   Le nom (et le nom latin) passent SOUS chaque tete selectionnable. Le libelle
   existait deja dans le HTML mais il etait place dans .im, derriere l'image en
   position absolue, donc invisible. C'est une correction, pas un ajout.
   ========================================================================== */
.idg2 .idtile{overflow:visible}
.idg2 .idtile::after{display:none}
.idg2 .idtile .im{position:relative;overflow:hidden}
.idg2 .idtile .im::after{content:'';position:absolute;inset:0;background:var(--paper);mix-blend-mode:multiply;opacity:0;transition:opacity .15s;pointer-events:none}
.idg2 .idtile[aria-selected=true] .im::after{opacity:.45}
.idg2 .idtile .nm{display:flex;flex-direction:column;justify-content:center;min-height:46px;padding:8px 6px 10px;border-top:1px solid #f0ece3;background:#fff;font:700 10.5px/1.3 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#6a6459;text-align:center;transition:color .15s}
.idg2 .idtile .nm small{display:block;font:400 10px/1.25 'Lato',sans-serif;text-transform:none;letter-spacing:0;font-style:italic;color:#a39d92;margin-top:2px}
.idg2 .idtile:hover .nm,.idg2 .idtile[aria-selected=true] .nm{color:var(--ink)}
.idg2 .idtile[aria-selected=true] .nm small{color:var(--ocre-deep)}
.idg2 .idtile[aria-selected=true]::before{z-index:4}
@media(max-width:760px){.idg2 .idtile .nm{min-height:42px;font-size:9.5px;padding:6px 4px 8px}}

.idg2 .band>.bandhd .chev{margin-left:0}

/* ===== GUIDE D'ID — tête dont la photo n'existe pas encore (2026-09-14) =====
   Le site pose déjà onerror="this.remove()" sur ces images : quand le fichier manque,
   l'image s'efface d'elle même et .im se retrouve sans <img>. Sans habillage, il reste
   un cadre blanc vide au milieu des vraies têtes, ce qui ressemble à une panne.

   FOND BLANC et non crème : le crème #FAF6EE est déjà l'overlay de sélection, posé en
   mix-blend-mode multiply sur la tête choisie. Une case vide en crème aurait l'air déjà
   sélectionnée, et une case vide réellement sélectionnée serait crème sur crème, donc
   sans aucun retour visuel au clic. Une couleur, un sens.

   L'icône est posée en background à 38 % de la hauteur et le texte à 58 % : les deux
   suivent la case quel que soit son rapport (4/5, 1.8/3 ou 1200/700 selon les pages).

   body:not(.enc-hub) : sur le hub, les six tuiles de groupe n'ont volontairement pas
   d'image, ce sont des pastilles de texte. Elles ne doivent surtout pas être habillées.

   Le jour où le fichier est déposé, la règle s'éteint d'elle même. Si un navigateur
   ignore :has(), on retombe exactement sur le cadre blanc d'avant. */
body:not(.enc-hub) .idg2 .idtile .im:not(:has(img)){
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9BFAE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.6h3.1l1.3-2h9.2l1.3 2H21a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1Z'/%3E%3Ccircle cx='12' cy='13.6' r='3.3'/%3E%3C/svg%3E") no-repeat center 38%;
  background-size:clamp(17px,20%,26px);
}
body:not(.enc-hub) .idg2 .idtile .im:not(:has(img))::before{
  content:'Photo coming soon';
  position:absolute;left:0;right:0;top:58%;padding:0 6px;box-sizing:border-box;
  font:700 clamp(8px,1.3vw,9.5px)/1.3 'Lato',sans-serif;
  text-transform:uppercase;letter-spacing:.06em;color:#B5AB99;text-align:center;
}
html[lang="fr"] body:not(.enc-hub) .idg2 .idtile .im:not(:has(img))::before{content:'Photo à venir'}
html[lang="ar"] body:not(.enc-hub) .idg2 .idtile .im:not(:has(img))::before{content:'الصورة قريبًا';letter-spacing:0;word-spacing:.12em}

/* ===== GUIDE D'ID — collage pas encore produit (2026-09-14) =====
   Les blocs .ph (illustration du volet 1) et .fd-collage (planche de detail) portent un
   <span class="phtxt"> qui decrit le collage a produire : « COLLAGE: worm lizard on white »,
   « Detail collage: Cobras ». C'est un brief au photographe, masque tant que l'image est la,
   et qui s'AFFICHE des que l'image manque. Mesure du 14/09 : 13 notes par langue, 39 au total,
   visibles des l'ouverture du guide sur 8 pages sur 10, sans rien deplier.

   Deux cas menent au meme etat : soit le <img> existe et son fichier manque, et onerror le
   retire ; soit le collage n'a jamais ete fait et il n'y a pas de <img> du tout. Les deux
   donnent .ph sans <img>, c'est ce qu'on vise.

   Meme appareil photo et meme libelle que les tetes sans photo : un seul langage visuel.
   On garde en revanche le cadre beige pointille existant du bloc, qui est deja la convention
   du site pour « a produire » sur les grandes zones.

   Les specificites : .idg2 .idphoto .ph et .idg .fd-collage .ph valent (0,3,0) plus haut dans
   le fichier, d'ou les selecteurs a trois classes ici, sinon background:none l'emporterait. */
.idg2 .phtxt{display:none}
.idg2 .idphoto .ph:not(:has(img)),
.idg2 .fd-collage .ph:not(:has(img)),
.idg2 .ph:not(:has(img)){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9BFAE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.6h3.1l1.3-2h9.2l1.3 2H21a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1Z'/%3E%3Ccircle cx='12' cy='13.6' r='3.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center 36%;
  background-size:clamp(22px,8%,34px);
}
.idg2 .idphoto .ph:not(:has(img))::before,
.idg2 .fd-collage .ph:not(:has(img))::before,
.idg2 .ph:not(:has(img))::before{
  content:'Photo coming soon';
  position:absolute;left:0;right:0;top:56%;padding:0 10px;box-sizing:border-box;
  font:700 clamp(8.5px,1vw,10px)/1.35 'Lato',sans-serif;
  text-transform:uppercase;letter-spacing:.07em;color:#B5AB99;text-align:center;
}
html[lang="fr"] .idg2 .ph:not(:has(img))::before{content:'Photo à venir'}
html[lang="ar"] .idg2 .ph:not(:has(img))::before{content:'الصورة قريبًا';letter-spacing:0;word-spacing:.12em}

/* ===== BADGES : une taille par contexte, identique pour tous les badges du contexte (2026-09-14)
   Le defaut : un badge borde etait 2 px plus haut qu'un badge sans bordure, parce que la bordure
   s'ajoute a la hauteur. Checklist 15 contre 17, legende 19 contre 21, cartes 23 contre 25.
   La correction : TOUS les badges reservent 1 px de bordure, transparente quand ils n'en montrent
   pas. Aucun changement visuel, des hauteurs enfin egales.
   Trois tailles assumees, une par contexte : la checklist est dense, la legende est cliquable,
   les cartes sont grandes. Meme couleur et meme typo partout. ===== */

/* 1. la checklist, sa propre taille, tout aligne dessus */
.splist .row .sci .st-badge{border:1px solid transparent}
.fam-danger{display:inline-flex; align-items:center; gap:5px; font:700 9px/1 'Lato',sans-serif; text-transform:uppercase; letter-spacing:.05em; color:var(--fm-danger,#b23b2e); background:#fbeeeb; border:1px solid #e6c3ba; border-radius:2px; padding:3px 6px; white-space:nowrap}
.fam-danger i{font-size:9px}

/* 2. la legende, les memes pastilles en plus grand parce qu'on clique dessus */

/* 3. les fiches : inoffensif, dangereux et endemique a la meme taille */
.idg .badge{display:inline-flex; align-items:center; gap:5px; font:700 9.5px/1 'Lato',sans-serif; text-transform:uppercase; letter-spacing:.05em; padding:5px 9px; border-radius:2px; flex:0 0 auto; font-size:10px; border:1px solid transparent}
.fm-tag{border:1px solid transparent}

/* 4. l'etat de la page sur les cartes : plus grand, c'est un etat et non un trait */
.status-badge{border:1px solid transparent}

/* ===== L'ETAT DE LA PAGE, SOUS LE NOM (2026-09-14) =====
   Essai abandonne : l'etiquette avait ete posee en haut de la photo, en face de .venom-tag. Le haut
   de l'image est reserve aux etiquettes qui parlent de l'ANIMAL — dangereux, endemique. Une de
   chaque cote, l'une sur la bete et l'autre sur l'avancement du site, alourdit la carte sans rien
   clarifier. L'etat revient donc a sa place, sous le nom.
   Ce qui reste du passage : les deux etats sont deux encadres de meme fabrique. L'aplat gris #ccc
   de --todo se lisait comme un bouton desactive, sur un site ou les vrais boutons sont justement
   des aplats sombres (.btn-dark). Un encadre ne se confond avec aucun bouton. */
body.enc-pillar .species-item-wrapper .status-badge{
  font:700 10px/1 'Lato',sans-serif;letter-spacing:.05em;padding:5px 9px;background:#fff}
body.enc-pillar .species-item-wrapper .status-badge--prep{color:var(--ocre-deep);border:1px solid var(--ocre)}
body.enc-pillar .species-item-wrapper .status-badge--todo{color:var(--muted);border:1px solid #DDD2BD}

/* ===== COMBIEN DE FICHES SONT LISIBLES DERRIERE CETTE CARTE (2026-09-14) =====
   Regle : on ne signale que ce qui existe, jamais ce qui manque. Pas de fraction, pas de zero,
   pas de jauge. Une carte derriere laquelle rien n'est lisible ne dit rien de plus qu'avant, et
   le regard va tout seul aux portes qui menent quelque part.
   La ligne s'ajoute sous le « x especes » d'origine au lieu de le remplacer : les deux chiffres
   disent deux choses differentes, combien d'especes existent et combien sont redigees.
   Meme Lato, meme casse que le reste de la carte : une ligne en capitales de 9,5 px serait de la
   typographie de badge posee sous un titre de 24 px. */
.hub-ready{display:inline;margin:0;font:inherit;color:inherit;white-space:nowrap}
.species-count .sc-sep{color:#C9BEAE;padding:0 .35em}
.hub-ready .hr-l::before{content:'species accounts online'}
.hub-ready[data-n="1"] .hr-l::before{content:'species account online'}
html[lang="fr"] .hub-ready .hr-l::before{content:"fiches d'espèce en ligne"}
html[lang="fr"] .hub-ready[data-n="1"] .hr-l::before{content:"fiche d'espèce en ligne"}
html[lang="ar"] .hub-ready .hr-l::before{content:'بطاقات منشورة'}
html[lang="ar"] .hub-ready[data-n="1"] .hr-l::before{content:'بطاقة منشورة'}
html[lang="ar"] .hub-ready[data-n="2"] .hr-l::before{content:'بطاقتان منشورتان'}

/* ===== LE SOUS-TITRE DU HUB (2026-09-14) =====
   Essai ecarte : les deux chiffres en gros Oswald ocre, facon .stat .num. Ils passaient devant
   le reste dans la hierarchie alors qu'ils ne sont que du contexte, et ils empruntaient l'idiome
   des panneaux Context et Habitats, ou les statistiques SONT le contenu.
   Une ligne, une taille. Seuls les deux nombres prennent l'ocre : en gris plat, « 30 endemiques »
   se fait sauter a la lecture. */
.enc-hub .section-header p{font:400 22px/1.4 'Lato',sans-serif;color:var(--muted);margin:0}
.enc-hub .section-header p b{font-weight:600;color:var(--ocre-deep)}
@media(max-width:600px){.enc-hub .section-header p{font-size:18px}}
/* ===== TITRE DU HUB (2026-09-15) : une ligne en desktop, trois lignes sous 600px.
   L'esperluette ouvre la 2e ligne (elle annonce le second taxon ; en fin de ligne 1 elle
   laisse la ligne en suspens et deporte l'axe optique d'un titre centre).
   Le texte du H1 est inchange : seules les coupures sont forcees, par des spans. ===== */
.enc-hub .section-header h1 .l{display:inline}
@media(max-width:600px){
  .enc-hub .section-header h1{line-height:1.06}
  .enc-hub .section-header h1 .l{display:block}
}

/* ===== BLOC PROGRESSION DU HUB (2026-09-15) =====
   Une seule famille (Lato 400) : sous-titre 22, faits 12, cadence 10,5. Seuls les
   nombres prennent l'ocre. Pas d'Oswald ici : c'est du texte qui se lit.
   ⚠ SPECIFICITE : le bloc vit DANS .section-header, donc `.enc-hub .section-header p`
   (0,2,1) ecrasait `.enc-hub .fm-s2` (0,2,0) et les deux lignes restaient a 22 px.
   D'ou `.enc-hub .fmprog p.fm-s2` (0,3,1), et !important en mobile parce que
   encyclopedia-menu.css force `.enc-hub .section-header p{font-size:...!important}`. */
.enc-hub .fmprog{max-width:none;margin:10px auto 0}
.enc-hub .fmprog .fm-tr{height:4px;border-radius:2px;background:var(--line);overflow:hidden;max-width:380px;margin:0 auto 6px}
.enc-hub .fmprog .fm-fi{height:100%;background:linear-gradient(90deg,var(--ocre) 0%,#E0A24A 100%)}
.enc-hub .fmprog p.fm-s2{font:400 15px/1.4 'Lato',sans-serif;color:var(--muted);margin:0}
.enc-hub .fmprog p.fm-s2 b{font-weight:400;color:var(--ocre-deep)}
.enc-hub .fmprog p.fm-s3{font:700 15px/1.4 'Lato',sans-serif;color:var(--muted);margin:0}
/* Chaque moitie de la ligne est INSECABLE : soit la ligne tient entiere, soit elle casse
   au point median, jamais au milieu d'une expression. La cadence est un <p> a part,
   donc toujours seule sur sa ligne. */
.enc-hub .fmprog .fm-seg{white-space:nowrap}
.enc-hub .fmprog .fm-sep{color:#D6CCBC;padding:0 .55em}
/* 2026-09-20 — La ligne entiere (2 segments + point median) demande ~660 px en EN et
   ~693 px en FR. Le passage a deux lignes ne se declenchait qu'a 560 px : entre les deux,
   `white-space:nowrap` poussait la page en scroll horizontal. On decroche donc le
   RETOUR A LA LIGNE a 700 px, sans toucher aux tailles de texte, qui restent calees
   sur 560 px (c'est une question de largeur, pas de lisibilite). */
@media(max-width:700px){
  .enc-hub .fmprog .fm-seg{display:block}
  .enc-hub .fmprog .fm-sep{display:none}
}
@media(max-width:560px){
  /* trop etroit pour la ligne entiere : une moitie par ligne, et le point median disparait */
  .enc-hub .fmprog{margin-top:8px}
  .enc-hub .fmprog .fm-tr{max-width:340px}
  .enc-hub .fmprog .fm-seg{display:block}
  .enc-hub .fmprog .fm-sep{display:none}
  .enc-hub .fmprog p.fm-s2{font-size:14px !important}
  .enc-hub .fmprog p.fm-s3{font-size:14px !important}
}
/* Les libelles sont du VRAI TEXTE dans les 3 pages du hub (copiable, indexable,
   lisible par un lecteur d'ecran). Le JS ne fait que remettre les nombres a jour. */

/* ============================================================================
   CHECKLIST : POLICE ARABE, DANS LES TROIS LANGUES        (2026-09-15)
   ----------------------------------------------------------------------------
   La colonne des noms vernaculaires arabes existe sur les pages EN et FR aussi,
   et la barre de recherche accepte l'arabe partout. Or fonts-ar.css n'est
   charge que sur /ar/ : ailleurs l'arabe tombait sur Lato, qui n'a aucun
   glyphe arabe, donc sur une police systeme differente selon la machine.

   On declare donc la Noto Sans Arabic ici, dans le silo de la checklist. Le
   unicode-range la limite aux caracteres arabes : le latin de la meme ligne
   continue de tomber sur Lato tout seul, et aucune autre partie du site n'est
   touchee. Meme fichier que fonts-ar.css, donc un seul telechargement sur /ar/.
   ========================================================================== */
@font-face{
  font-family:"Noto Sans Arabic"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/noto-sans-arabic-400.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200D,U+2010-2011,U+2E41;
}
@font-face{
  font-family:"Noto Sans Arabic"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/noto-sans-arabic-700.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200D,U+2010-2011,U+2E41;
}
.splist .row .ar,
.listview .lv-search input,
.listview .lv-search input::placeholder,
.splist .row .sci .st-badge{font-family:"Noto Sans Arabic","Lato",Helvetica,Arial,sans-serif}

/* Le bouton de filtres et TOUT le contenu du tiroir (panneau de filtres comme
   legende) sont en arabe sur /ar/ seulement. Ces elements posent chacun leur
   propre raccourci `font:`, qui remet la famille a Lato : heriter ne suffit
   pas, il faut reposer font-family sur chaque descendant. Le unicode-range
   ci-dessus fait le reste : les codes latins des pastilles (CR, VU, LC)
   retombent sur Lato tout seuls. Les icones Font Awesome sont exclues : elles
   sont des glyphes d'une police dediee, leur imposer la Noto les casserait. */
html[lang="ar"] .listview .ftool,
html[lang="ar"] .listview .ftool *:not([class*="fa-"]),
html[lang="ar"] .listview .panel,
html[lang="ar"] .listview .panel *:not([class*="fa-"]){font-family:"Noto Sans Arabic","Lato",Helvetica,Arial,sans-serif}

/* ============================================================================
   CHECKLIST : STATUT UICN ET PANNEAU DE FILTRES          (2026-09-15)
   ----------------------------------------------------------------------------
   Les teintes viennent de reskin.css (--iucn-*). Modifier la = modifier partout.
   Le panneau est construit par enrich.js a partir des attributs data-* des
   lignes : il n'y a aucun balisage de filtre ecrit dans les pages.
   ========================================================================== */

/* --- 1. la boite commune a TOUTES les pastilles de ligne ------------------
   Endemisme et statut UICN partagent exactement la meme boite : meme hauteur,
   meme graisse, meme casse. Le border-box et le filet transparent font que les
   pastilles pleines et les pastilles a contour mesurent pareil. Le bouton de
   statut de fiche (.more) reste plus haut : c'est une cible de clic, pas une
   etiquette. */
/* La pastille elle-meme est definie une seule fois, dans reskin.css. Ici on ne
   regle que sa place dans la ligne. Le badge d'endemisme reprend exactement la
   meme boite pour que les deux familles ne puissent pas diverger. */
.splist .row .sci .st-badge{box-sizing:border-box;height:19px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 7px;border:1px solid transparent;border-radius:2px;
  font:700 9.5px/1 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.04em;
  white-space:nowrap;vertical-align:middle;margin-left:8px}
.splist .row .iucn-tag{justify-self:start}
/* couleurs : voir reskin.css, composant .iucn-tag. Rien a redire ici. */
/* La pastille Maroc est ajoutee par enrich.js sur les seules especes qui ont une
   evaluation regionale. En mode Maroc, elle remplace la pastille mondiale ; les
   especes sans evaluation regionale gardent la leur, d'ou le :has(). */
.splist .row .iucn-tag--m{display:none}
body.chk-scale-m .splist .row .iucn-tag--m{display:inline-flex}
body.chk-scale-m .splist .row:has(.iucn-tag--m) .iucn-tag:not(.iucn-tag--m){display:none}

/* --- 2. la colonne du statut, uniquement sur les lignes qui en portent ----
   La DERNIERE colonne garde la largeur fixe du site (112px, 128px en FR) : le
   bouton de statut est en justify-self:stretch, donc il la remplit et tous les
   encadres de la colonne ont la meme largeur, quel que soit leur libelle.
   Ne jamais remettre auto ici, ca rend le bord gauche de la colonne irregulier. */
.splist .row:has(.iucn-tag){grid-template-columns:1.45fr 1.15fr .9fr 46px 112px}
html[lang="fr"] .splist .row:has(.iucn-tag){grid-template-columns:1.45fr 1.15fr .9fr 46px 128px}

/* --- 3. le bouton qui ouvre le tiroir ------------------------------------ */
.listview .ftool{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap;margin:0}
.listview .fdrop-btn{cursor:pointer;background:#fff;border:1.5px solid #c9bca3;border-radius:2px;
  padding:0 24px;height:100%;color:var(--ink);display:inline-flex;align-items:center;gap:10px;
  font:700 13px/1 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.04em;
  transition:background .16s,color .16s,border-color .16s}
.listview .fdrop-btn:hover{border-color:var(--ocre,#C06A2C)}
.listview .fdrop-btn.is-on{background:#fff;border-color:var(--ocre,#C06A2C);color:var(--ink)}
.listview .fdrop-btn .ico{font-size:13px;color:var(--ocre-deep,#9E5220)}
.listview .fdrop-btn .chev{font-size:11px;color:var(--ocre-deep,#9E5220);transition:transform .2s}
.listview .fdrop-btn[aria-expanded=true] .chev{transform:rotate(180deg)}
.listview .fdrop-btn .cnt{background:var(--ocre,#C06A2C);color:#fff;border-radius:2px;
  padding:3px 6px;font-size:10px;letter-spacing:.04em}
.listview .fdrop-btn .cnt[hidden]{display:none}

/* --- 4. la zone d'entete : texte, recherche et bouton --------------------- */
/* .cl-head est bride a 70ch pour garder le paragraphe lisible. Des que le
   panneau est la, l'entete prend toute la largeur et c'est le seul paragraphe
   qui reste bride. */
.listview .cl-head:has(.head-zone){max-width:none}
.listview .head-zone{display:grid;gap:14px 18px;align-items:stretch;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"txt txt" "search filter" "panel panel"}
.listview .head-zone .psub{font-size:1.05rem; line-height:1.55; color:#3f3a33; grid-area:txt; margin:0 0 2px; max-width:74ch; align-self:center}
.listview .head-zone .lv-search{grid-area:search;margin:0}
.listview .head-zone .ftool{grid-area:filter}
.listview .head-zone .panel{grid-area:panel;align-self:start}

/* --- 5. le tiroir -------------------------------------------------------- */
.listview .panel{--fbg:#F4F2EF;--fbd:#e2ddd6;--fband:#ffffff;--ftile:#ffffff;--ftileb:#e2ddd6;
  background:var(--fbg);border:1px solid var(--fbd);border-radius:2px;padding:18px 22px 14px;margin-top:12px}
.listview .panel[hidden]{display:none}
.listview .panel-grid{display:grid;grid-template-columns:2.1fr .95fr .95fr;gap:22px 34px;align-items:start}
/* les colonnes du panneau s'empilent, sauf le bandeau d'echelle qui est une ligne */
.listview .panel-grid>div:not(.scale-head){display:flex;flex-direction:column;gap:6px;min-width:0}
.listview .cell-rl{min-width:0}
.listview .panel-grid .grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;align-items:start}
.listview .col-threat,.listview .col-rest{display:flex;flex-direction:column;gap:6px}
.listview .panel-foot{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--fbd)}
.listview .panel-foot .res{font:400 12px/1 'Lato',sans-serif;color:#8a8377}
.listview .panel-foot .res b{font-weight:700;color:var(--ocre-deep,#9E5220)}
.listview .cl-reset{background:none;border:0;padding:0;cursor:pointer;white-space:nowrap;
  font:700 9px/1 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ocre-deep,#9E5220);border-bottom:1px solid var(--ocre,#C06A2C)}
.listview .cl-reset[hidden]{display:none}

/* --- 6. le bandeau d'echelle mondiale / Maroc ---------------------------- */
.listview .scale-head{grid-column:1 / -1;display:flex;align-items:center;flex-wrap:nowrap;gap:10px 22px;
  background:var(--fband);border:1px solid var(--fbd);border-radius:2px;padding:14px 16px;margin:0 0 18px}
.listview .sh-text{flex:1 1 auto;min-width:0}
.listview .sh-ctrl{flex:0 0 auto;display:flex;align-items:center;gap:16px;
  background:var(--fbg);border:1px solid var(--fbd);border-radius:2px;padding:10px 12px}
.listview .scale-lab{color:#8a8377;margin-bottom:7px;letter-spacing:.1em}
.listview .scale-note{margin:0;font:400 11.5px/1.55 'Lato',sans-serif;color:var(--muted-strong);max-width:none}
.listview .scale-note b{font-weight:700;color:var(--ocre-deep,#9E5220)}
.listview .scale-note[hidden]{display:none}
.listview .nt-src,.listview .nt-cav{display:inline}
.listview .scale-sw{display:inline-flex;flex:0 0 auto;border:1px solid var(--fbd);border-radius:2px;overflow:hidden}
.listview .scale-sw button{cursor:pointer;background:#fff;border:0;border-left:1px solid var(--fbd);
  padding:11px 18px;font:700 10px/1 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-strong)}
.listview .scale-sw button:first-child{border-left:0}
.listview .scale-sw button[aria-pressed=true]{background:var(--ink);color:#fff}

/* --- 6 bis. la legende des pastilles, pages a moins de 12 especes ---------
   Meme bouton et meme tiroir que les filtres, contenu different et rien de
   cliquable. On garde donc tout le chassis .panel / .cl-eybs et on n'ajoute
   que la mise en page des lignes de definition. */
.listview .panel--leg{padding-bottom:18px}
.listview .panel-grid--leg{grid-template-columns:auto minmax(0,1fr);gap:22px 40px}
.listview .leg-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.listview .leg-intro{margin:0 0 6px;font:400 11.5px/1.5 'Lato',sans-serif;color:var(--muted-strong)}
/* Une seule grille pour toute la liste, pas une boite par ligne : la piste des
   pastilles est dimensionnee sur la plus large de la colonne, donc toutes les
   pastilles ont la meme largeur et toutes les definitions demarrent au meme x,
   quelle que soit la langue. .leg passe en display:contents pour que ses deux
   enfants tombent directement dans cette grille. */
.listview .leg-list{display:grid;grid-template-columns:max-content minmax(0,1fr);
  align-items:baseline;gap:7px 10px}
.listview .leg{display:contents}
/* L'echelle tient sur deux colonnes de definitions : sept echelons en pile
   font une colonne trop haute a cote des trois statuts de presence. */
.listview .leg-list--iucn{grid-template-columns:max-content minmax(0,1fr) max-content minmax(0,1fr);
  column-gap:10px}
/* Les deux textes sur la meme ligne de base. La pastille est un inline-flex :
   son texte est centre dans une boite de 19px, plus haute que la ligne de la
   definition. align-items:baseline aligne les lignes de base, le decalage de
   1px corrige ce qui reste. Mesure faite au navigateur : ecart 0.0px. */
.listview .leg .iucn-tag,.listview .leg .fbadge{position:relative;top:1px}
.listview .leg-t{font:400 12.5px/1.5 'Lato',sans-serif;color:#3f3a33;min-width:0}
.listview .leg--def .leg-t{color:var(--muted-strong)}
/* le bouton de legende n'a pas de compteur : pas de pastille de comptage */
.listview .panel--leg ~ .ftool .cnt{display:none}
@media(max-width:720px){
  /* selecteur plus specifique que la regle generique a deux colonnes du tiroir
     de filtres, qui est declaree plus bas dans la feuille. */
  .listview .panel--leg .panel-grid--leg{grid-template-columns:1fr;gap:18px}
  /* pas la place pour deux colonnes de definitions sur telephone */
  .listview .panel--leg .leg-list--iucn{grid-template-columns:max-content minmax(0,1fr)}
  .listview .panel--leg{margin-left:-16px;margin-right:-16px;border-left:0;border-right:0;
    border-radius:0;padding:16px 14px}
}

/* --- 7. les cases a cocher ---------------------------------------------- */
.listview .cl-eybs{display:block;margin:0 0 10px;padding:0;border:0;color:#3f3a33;
  font:700 11px/1.3 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.1em}
.listview .panel-grid>div>.cl-eybs{margin-bottom:2px}
.listview .chk{position:relative;display:flex;align-items:center;gap:9px;padding:9px 11px;cursor:pointer;
  background:var(--ftile);border:1px solid var(--ftileb);border-radius:2px;
  font:400 12px/1.2 'Lato',sans-serif;color:#3f3a33;transition:border-color .14s,background .14s}
.listview .chk:hover{border-color:#a89878}
.listview .chk.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.listview .chk input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.listview .chk input:focus-visible+.fbadge{outline:2px solid var(--ocre,#C06A2C);outline-offset:2px}
.listview .chk .ck-l{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* marge LOGIQUE, pas margin-left : en arabe le sens est inverse et le compteur
   se retrouvait colle a la pastille au lieu d'aller au bout de la case. */
.listview .chk .ck-n{margin-inline-start:auto;font:700 11px/1 'Lato',sans-serif;color:#9a9285}
.listview .chk.is-on .ck-n{color:var(--beige)}
.listview .chk-iucn .fbadge{min-width:34px}
.listview .fbadge{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; padding:5px 8px; border-radius:2px; border:1px solid transparent; white-space:nowrap; font:700 9.5px/1 'Lato',sans-serif; text-transform:uppercase; letter-spacing:.04em; color:var(--ink)}
.listview .fbadge.i-lc{background:var(--iucn-lc)}
.listview .fbadge.i-nt{background:var(--iucn-nt)}
.listview .fbadge.i-vu{background:var(--iucn-vu)}
.listview .fbadge.i-en{background:var(--iucn-en)}
.listview .fbadge.i-cr{background:var(--iucn-cr);color:#fff}
.listview .fbadge.i-dd{background:var(--iucn-dd);border-color:rgba(33,30,25,.28)}
.listview .fbadge.i-ne{background:var(--iucn-ne);border-color:rgba(33,30,25,.28)}
.listview .fbadge.e-e{background:var(--fm-endemic,#2E6B62);color:#fff}
.listview .fbadge.e-pc{background:#fff;color:#8a7a55;border-color:#d8c3a8}
.listview .fbadge.s-online{background:var(--ocre,#C06A2C);color:#fff;border-color:var(--ocre,#C06A2C)}
.listview .fbadge.s-prep{background:#fff;color:var(--ocre-deep,#9E5220);border-color:var(--ocre,#C06A2C)}
.listview .fbadge.s-todo{background:#fff;color:var(--muted);border-color:#d8cdb8}
/* --- 7 bis. toutes les pastilles d'un groupe a la largeur de la plus large ---
   Le groupe devient une grille et chaque case en reprend les pistes (subgrid),
   donc la piste des pastilles est dimensionnee sur la plus large du groupe et
   chaque pastille s'y etire. Rien n'est code en dur : ca suit les libelles de
   chaque langue. Reserve au desktop : sous 720px les cases passent deja en
   deux colonnes et gardent leur propre mise en page. */
@supports (grid-template-columns:subgrid){
  @media(min-width:721px){
    .listview .panel-grid .col-threat,.listview .panel-grid .col-rest{
      display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;
      gap:6px;align-content:start}
    .listview .panel-grid>div.col-st,.listview .panel-grid>div.col-end{
      display:grid;grid-template-columns:max-content minmax(0,1fr);
      gap:6px;align-content:start}
    .listview .panel-grid>div.col-st>.cl-eybs,
    .listview .panel-grid>div.col-end>.cl-eybs{grid-column:1 / -1}
    .listview .panel .chk{grid-column:1 / -1;display:grid;
      grid-template-columns:subgrid;align-items:center;column-gap:9px}
    .listview .panel .chk .fbadge{justify-self:stretch}
    .listview .panel .chk .ck-n{justify-self:end;margin-inline-start:0}
  }
}

/* les compteurs du panneau changent avec l'echelle */
.listview .ck-n .nm{display:none}
body.chk-scale-m .listview .ck-n .ng{display:none}
body.chk-scale-m .listview .ck-n .nm{display:inline}

/* --- 8. adaptations petites largeurs ------------------------------------ */
@media(max-width:900px){
  .listview .panel-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  /* ---- Le tiroir de filtres sur telephone -------------------------------
     Il faisait plus de trois ecrans de haut. Trois corrections :
     1. il suit la checklist et va bord a bord, au lieu d'empiler container +
        panneau + bandeau, qui repoussaient le contenu a 56px du bord ;
     2. les sept statuts passent sur deux colonnes au lieu d'une ;
     3. les groupes a trois cases deviennent des puces qui s'enroulent.
     Les cibles de clic gardent leur hauteur : on gagne sur le vide, pas sur
     l'accessibilite. */
  .listview .panel{margin-left:-16px;margin-right:-16px;border-left:0;border-right:0;
    border-radius:0;padding:16px 14px 12px}
  /* Deux colonnes pour le tiroir : les statuts UICN occupent toute la largeur,
     Species account et Presence in Morocco se partagent la rangee suivante.
     On economise une rangee de cases et un intitule de groupe. */
  .listview .panel-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 12px}
  .listview .cell-rl{grid-column:1 / -1}
  /* les 7 statuts coulent dans une seule grille a 2 colonnes */
  /* minmax(0,…) et pas 1fr : sinon la colonne se dimensionne sur le libelle
     le plus long (« Critically Endangered ») et la grille deborde. */
  .listview .panel-grid .grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
  .listview .col-threat,.listview .col-rest{display:contents}
  .listview .panel-grid .chk .ck-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 0}
  .listview .chk{padding:9px 9px;gap:7px}
  /* Species account et Presence in Morocco adoptent la meme grille a deux
     colonnes : un seul systeme visuel dans tout le tiroir, au lieu de trois
     lignes pleine largeur qui laissaient un grand vide a droite. */
  .listview .panel-grid>div:not(.scale-head):not(.cell-rl){display:grid;
    grid-template-columns:1fr;gap:6px;align-items:start}
  .listview .panel-grid>div:not(.scale-head):not(.cell-rl)>.cl-eybs{grid-column:1 / -1;margin:0}/* le texte du haut, plus compact sur telephone */
  /* la recherche et le bouton occupent toute la largeur, comme la liste */
  .listview .head-zone .ftool{width:100%}
  .listview .fdrop-btn{width:100%;justify-content:center}
  .listview .scale-head{padding:12px; margin-bottom:14px; flex-direction:column; align-items:stretch; gap:12px}
  .listview .sh-ctrl{flex-wrap:wrap;justify-content:flex-start;width:100%;box-sizing:border-box}
  .listview .scale-sw{width:100%}
  .listview .scale-sw button{flex:1 1 50%;text-align:center}
  .listview .head-zone .psub{font-size:.95rem; line-height:1.5; max-width:none}
  /* le compteur de resultats doit rester visible sur mobile */
  .listview .lv-search .lvs-count{display:inline}
  /* Pleine largeur : .container reserve 16px de chaque cote, la checklist les
     reprend et perd ses filets lateraux, qui tomberaient au ras de l'ecran.
     Ces 32px repris vont entierement au nom de l'espece. */
  .listview .splist{margin-left:-16px;margin-right:-16px;width:auto;
    border-left:0;border-right:0;border-radius:0}
  .listview .splist .row{padding-left:14px;padding-right:14px}
  .listview .splist-hub .row{padding-left:16px}
  .listview .splist .fam,.listview .splist .ord-lbl{padding-left:14px;padding-right:14px}
  /* Mobile : le nom sur 2 lignes a gauche, la pastille sous le nom vernaculaire,
     le bouton de statut dans SA colonne fixe. La regle mobile du site place .more
     en colonne 2 : avec la colonne de pastille en plus il faut la repousser en 3,
     sinon son bord droit suit la longueur du nom latin et la colonne ondule. */
  /* Trois colonnes : le bloc du nom, un rail fixe pour la pastille UICN, puis
     la colonne du bouton. Le rail fait exactement la largeur d'une pastille,
     donc elles s'alignent toutes verticalement au lieu de suivre la longueur
     du nom vernaculaire, qui change a chaque ligne. */
  .splist .row:has(.iucn-tag){grid-template-columns:minmax(0,1fr) 34px 112px}
  html[lang="fr"] .splist .row:has(.iucn-tag){grid-template-columns:minmax(0,1fr) 34px 128px}
  /* .sci reste dans la colonne 1 : la pastille occupe maintenant les deux
     rangees de la colonne 2, un nom latin long passerait dessous.
     En flex, le badge d'endemisme cesse d'etre un mot de plus dans le texte :
     c'est le NOM qui se coupe sur deux lignes et le badge reste colle a lui,
     au lieu de partir seul a la ligne suivante. */
  .splist .row:has(.iucn-tag) .sci{grid-column:1;grid-row:1;
    display:flex;align-items:baseline;gap:6px;min-width:0}
  /* Le badge reste colle au nom, comme sur bureau. Il ne peut plus partir seul
     a la ligne : en flex il est sur la meme ligne que le texte par construction,
     et l'ajustement automatique du nom reserve deja sa largeur. */
  .splist .row:has(.iucn-tag) .sci .st-badge{flex:0 0 auto;margin-left:0;
    position:relative;top:-1px}
  .splist .row:has(.iucn-tag) .sci .st-badge+.st-badge{margin-left:5px}
  .splist .row:has(.iucn-tag) .en{grid-column:1;grid-row:2}
  /* La pastille occupe les DEUX rangees comme le bouton et se centre dessus :
     leurs deux textes tombent ainsi sur la meme ligne optique. */
  .splist .row:has(.iucn-tag) .iucn-tag{grid-column:2;grid-row:1 / span 2;
    align-self:center;justify-self:stretch;min-width:0}
  /* l'abreviation des badges d'endemisme sur mobile doit survivre a la boite
     commune definie plus haut : on la redit ici, en dernier. */
  .splist .row .sci .st-badge{font-size:0;padding:0 5px;margin-left:6px}
  .splist .row .sci .st-badge::before{font-size:9px;letter-spacing:.03em}
  .splist .row:has(.iucn-tag) .more{grid-column:3;grid-row:1 / span 2;justify-self:stretch;width:auto}
}
/* Ecrans etroits : les deux colonnes du tiroir deviennent justes pour le badge
   « Not documented ». On resserre les badges du panneau, et sous 340px on
   repasse les groupes l'un sous l'autre : mieux vaut defiler que deborder. */
@media(max-width:400px){
  .listview .panel .fbadge{font-size:9px;padding:5px 6px}
  .listview .panel{padding-left:12px;padding-right:12px}
  .listview .panel-grid{gap:14px 10px}
  .listview .chk{padding:9px 8px;gap:6px}
}
@media(max-width:340px){
  .listview .panel-grid{grid-template-columns:1fr}
  .listview .panel-grid>div:not(.scale-head):not(.cell-rl){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* Ecrans etroits : on reprend de la place sur le bouton de statut pour la
   rendre au nom de l'espece, qui sinon descend sous le plancher de lisibilite.
   Le bouton garde une largeur fixe, donc la colonne reste alignee. */
@media(max-width:400px){
  .splist .row:has(.iucn-tag){grid-template-columns:minmax(0,1fr) 34px 96px}
  html[lang="fr"] .splist .row:has(.iucn-tag){grid-template-columns:minmax(0,1fr) 34px 108px}
  .listview .splist .row{padding-left:10px;padding-right:10px;column-gap:9px}
  .listview .splist-hub .row{padding-left:12px}
  .splist .row .more{font-size:.56rem;padding-left:4px;padding-right:4px}
}

@media(max-width:560px){
  .listview .head-zone{grid-template-columns:1fr;
    grid-template-areas:"txt" "search" "filter" "panel"}
  .listview .head-zone .ftool{justify-self:start}
  .listview .fdrop-btn{height:auto;padding-top:13px;padding-bottom:13px}
}

/* ============================================================================
   GUIDE D'ID — TUILES A HAUTEUR EGALE  (2026-09-15)
   Un nom commun sur 2 lignes rendait sa tuile plus haute. Les .idtile sont des
   <button> : ils ne s'etirent pas dans la rangee flex, Chromium CENTRE la tuile
   courte. Resultat : blanc au-dessus de l'image, filet de legende et latins a
   deux niveaux (constate a partir d'environ 950 px de large).
   Correctif : la tuile s'etire sur la hauteur de la rangee et devient une
   colonne ; l'image reste calee en haut (donc images et filets alignes) et le
   bloc .nm occupe le reste en se calant PAR LE BAS, donc les latins tombent
   tous sur la meme ligne et un nom sur 2 lignes deborde vers le haut.
   Scope :has(.nm) = on ne touche pas aux tuiles-texte du hub (sans image).
   ========================================================================== */
.idg2 .idsel .idtile:has(.nm){align-self:stretch;display:flex;flex-direction:column}
.idg2 .idsel .idtile:has(.nm)>.im{flex:0 0 auto}
.idg2 .idsel .idtile>.nm{flex:1 1 auto;justify-content:flex-end}


/* ===== GUIDE D'ID - COLLAGE PAS ENCORE PRODUIT : ON RETIRE LE BLOC (2026-09-20) =====
   Valide Rayane. Plutot qu'un grand cadre vide « Photo a venir » qui pese plus lourd que le
   contenu reel et qui lit « site en chantier », la carte d'espece passe en UNE colonne, le
   texte prend toute la largeur, et une ligne discrete ferme la carte sous les lignes d'ID.
   PAS D'ICONE (choix Rayane 2026-09-20) : le texte dit deja « planche », un glyphe a 9 px
   n'ajoute rien. Ne pas reintroduire d'appareil photo ici ; celui des gros cadres
   « Photo a venir » (bande 1, tuiles de tete) n'est pas concerne et reste en place.

   OPT-IN PAR PAGE : la classe idg--nocollage se pose sur le .modal-body du panneau m-id.
   Sans elle, rien ne change (l'ancien placeholder « Photo a venir » reste en place).

   RIEN A CHANGER DANS LE HTML DES CARTES. Le <img> du collage reste ou il est ; c'est
   onerror qui le retire quand le fichier manque. Le jour ou le JPG arrive dans le dossier,
   :has(img) redevient vrai, le bloc collage et la ligne reviennent tout seuls.
   Ne pas supprimer les <img> de collage des pages : ce sont eux le declencheur. */
.idg--nocollage .fd-grid:not(:has(.fd-collage img)){grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "body" "cta"}
.idg--nocollage .fd-grid:not(:has(.fd-collage img))>.fd-collage{display:none}
html[lang] .idg--nocollage .fd-grid:not(:has(.fd-collage img)) .fd-body::after{
  content:'Identification plate coming soon';
  display:block;margin:1rem 0 0;
  font:700 9px/1.5 'Lato',sans-serif;text-transform:uppercase;letter-spacing:.07em;color:#B08A5E;
}
html[lang="fr"] .idg--nocollage .fd-grid:not(:has(.fd-collage img)) .fd-body::after{content:"Planche d'identification à venir"}
html[lang="ar"] .idg--nocollage .fd-grid:not(:has(.fd-collage img)) .fd-body::after{content:'لوحة التعرّف قريبًا';letter-spacing:0}


/* ===== TUILE DE TETE SANS PHOTO : meme langage que la ligne (2026-09-20) =====
   Choix Rayane. On GARDE la mention « Photo a venir » dans la tuile, mais stylisee comme le
   reste : fond ocre tres clair, filet chaud, texte dans l'ocre du corps, centre, SANS appareil
   photo (l'icone a ete ecartee le meme jour pour la ligne des cartes, meme logique ici).
   Le NOM n'est PAS repris dans la tuile : il est deja ecrit juste en dessous, dans le titre de
   la carte, donc l'afficher ici le dirait deux fois. La tuile reste cliquable et selectionnable.
   Regle GLOBALE, pas d'opt-in : un seul cas sur le site au 20/09 (Sand boas, page serpentes),
   mais c'est le bon defaut pour toute tuile a venir.
   Rappel : c'est onerror qui retire l'<img> manquante, d'ou le declencheur lazy dans enrich.js. */
body:not(.enc-hub) .idg2 .idtile .im:not(:has(img)){background-image:none;background-color:#fff}
body:not(.enc-hub) .idg2 .idtile .im:not(:has(img)) .lbl{display:none}
body:not(.enc-hub) .idg2 .idtile .im:not(:has(img))::before{
  top:50%;transform:translateY(-50%);
  font:700 9px/1.7 'Lato',sans-serif;letter-spacing:.07em;color:#B08A5E;
  white-space:pre-line;content:'Photo\00000Acoming soon';
}
/* la mention tient sur DEUX lignes (choix Rayane 20/09) : le saut est ecrit dans le content,
   pas laisse au hasard de la largeur de tuile, sinon il change d'une page a l'autre.
   Les trois langues ont donc leur propre coupure.
   ⚠ Le saut s'ecrit \00000A, en SIX chiffres. Ecrit \A, le parseur CSS avale les caracteres
   hexadecimaux qui suivent : \Acoming a donne un glyphe parasite et « OMING SOON ». */
html[lang="fr"] body:not(.enc-hub) .idg2 .idtile .im:not(:has(img))::before{content:'Photo\00000Aà venir'}
html[lang="ar"] body:not(.enc-hub) .idg2 .idtile .im:not(:has(img))::before{content:'الصورة\00000Aقريبًا';letter-spacing:0}


/* ===== LES GROS CADRES VIDES REPRENNENT LE LANGAGE DE LA TUILE (2026-09-20) ================
   Concerne l'illustration de la bande 1 (.idphoto) et les planches de detail des pages qui
   n'ont pas la classe idg--nocollage. Meme traitement que la tuile de tete sans photo :
   fond blanc, AUCUN cadre (ni le pointille beige de .idphoto, ni le filet de .fd-collage),
   pas d'appareil photo, mention sur DEUX lignes dans l'ocre du corps de texte.
   Remplace l'ancien traitement du 14/09 (cadre beige + pictogramme + texte gris froid), qui
   faisait « case cassee » la ou on veut « pas encore fait ».
   ⚠ Saut de ligne en SIX chiffres (\00000A) : voir l'avertissement du bloc precedent. */
.idg2 .idphoto:not(:has(img)){border-color:transparent;background:#fff}
.idg2 .idphoto .ph:not(:has(img)),
.idg2 .fd-collage .ph:not(:has(img)),
.idg2 .ph:not(:has(img)){background-image:none;background-color:#fff;border-color:transparent}
.idg2 .idphoto .ph:not(:has(img))::before,
.idg2 .fd-collage .ph:not(:has(img))::before,
.idg2 .ph:not(:has(img))::before{
  top:50%;transform:translateY(-50%);white-space:pre-line;
  font:700 9px/1.7 'Lato',sans-serif;letter-spacing:.07em;color:#B08A5E;
  content:'Photo\00000Acoming soon';
}
html[lang="fr"] .idg2 .ph:not(:has(img))::before{content:'Photo\00000Aà venir'}
html[lang="ar"] .idg2 .ph:not(:has(img))::before{content:'الصورة\00000Aقريبًا';letter-spacing:0}

/* ===== GRILLE COLUBRIDAE : CARTES DE GENRE (2026-09-20) =====
   Tant qu'aucune fiche de couleuvre n'existe, 12 vignettes « Page bientot disponible »
   presque identiques ne disent rien et ressemblent a du contenu mince. La grille passe
   donc a 8 cartes de GENRE, et les 12 especes sont ecrites EN CLAIR dans la carte :
   visibles pour le lecteur, donc indexables (jamais de nom cache pour le referencement).
   Les titres reprennent mot pour mot les libelles des tuiles du guide d'ID : la grille et
   le guide ne doivent pas nommer differemment la meme bete.
   A REVOIR quand les fiches d'espece arriveront : on revient a une carte par espece.
   ⚠ Reglage provisoire, en attente du retour de l'equipe (Colin/Clement) sur l'affichage
   ou non des especes sous le genre. */
/* .gen-n n'a plus de typo propre : la ligne porte aussi .species-count et suit le style maison des cartes (2026-09-20) */
body.enc-pillar .gen-sp{list-style:none;margin:6px 0 10px;padding:0;font:400 14px/1.6 'Lato',sans-serif;color:#3f3a33}
body.enc-pillar .gen-sp i{color:var(--muted);font-size:13px}

/* ===== CARTES DE GENRE : LISTE D'ESPECES REPLIABLE (2026-09-20) =====
   La ligne « N species in Morocco » est le bouton d'un <details> natif : pas de JS, meme
   mecanique que la FAQ et les bandes du guide d'ID, donc ca marche aussi sans JS.
   BOITE IDENTIQUE A UN <p class="species-count"> DES AUTRES GRILLES : le reset global
   (*{margin:0}) + p{line-height:1.6} de general.css + .species-count{margin-bottom:.15rem}
   d'encyclopedia-menu.css. On ne redeclare NI la taille NI la couleur : .species-count s'en
   charge, y compris ses paliers responsive. Ici on ne pose que ce qu'un <summary> n'a pas.
   Le .6rem sous le bloc rend l'air qui precedait le badge « Page coming soon ». */
body.enc-pillar .gen-fold{margin:0 0 .6rem}
body.enc-pillar .gen-fold>.gen-n{display:block;line-height:1.6;margin:0 0 .15rem;padding:0;list-style:none;cursor:pointer;transition:color .15s}
body.enc-pillar .gen-fold>.gen-n::-webkit-details-marker{display:none}
body.enc-pillar .gen-fold>.gen-n:hover{color:var(--ocre-deep)}
/* chevron en flux inline, pas en flex : vertical-align:middle le cale sur le centre optique
   du texte (avec align-items:center il flottait trop haut). Taille relative = il suit les
   paliers responsive de .species-count sans avoir sa propre media query. */
body.enc-pillar .gen-chev{display:inline-block;font-size:.72em;vertical-align:middle;margin-inline-start:.4em;color:inherit;opacity:.7;transition:transform .2s,opacity .15s}
body.enc-pillar .gen-fold[open]>.gen-n .gen-chev{transform:rotate(90deg);opacity:1}
body.enc-pillar .gen-fold>.gen-sp{margin:0}
/* les cartes « page a venir » sont pointer-events:none (encyclopedia-menu.css) :
   on rend cliquable le seul bouton de pliage, sinon le chevron ne repond pas. */
body.enc-pillar .species-item-wrapper.coming-soon .gen-fold>.gen-n{pointer-events:auto}

/* ===== SLIDESHOW SUR PHOTO FOND BLANC (2026-09-20) =====
   Le slideshow d'intro est dessine pour une photo in situ : un degrade sombre en bas a
   gauche, et la legende en blanc par-dessus. Sur une photo de studio detouree sur blanc,
   ce degrade est une tache grise sans raison d'etre et la legende blanche devient
   illisible. La classe `slideshow--studio` (a poser sur la <figure>) retire le degrade
   et repasse la legende en encre + ocre profond.
   Elle passe aussi l'image en `contain` : une photo de studio est un sujet detoure, on ne
   recadre pas un animal entier pour remplir un cadre 16/9 — sur naja-haje.jpg le `cover`
   d'origine rognait par le haut, donc la tete.
   ⚠ Place en FIN de fichier a dessein : les regles mobiles des lignes ~276 redefinissent
   `.slideshow::after` a specificite egale, seul l'ordre source les depasse.
   ⚠ Pendant RTL obligatoire dans `ar-encyclopedia.css` (charge APRES celui-ci). */
.slideshow--studio::after{background:none}
.slideshow--studio img{object-fit:contain;object-position:center;background:#fff}
.slideshow--studio .ss-cap .ln{color:var(--ocre-deep)}
.slideshow--studio .ss-cap .cn{color:var(--ink)}
.slideshow--studio .ss-cap:hover .cn,
.slideshow--studio .ss-cap:hover .cn::after{color:var(--ocre-deep)}
/* Le chevron est code `color:#fff` en dur (ligne ~104) : sans cette ligne il devient
   blanc sur blanc des qu'on retire le degrade, et la porte vers la fiche disparait
   alors que le lien, lui, marche toujours. Ocre = couleur d'action de la charte. */
.slideshow--studio .ss-chev{color:var(--ocre)}
.slideshow--studio .ss-cap:hover .ss-chev{color:var(--ocre-deep)}

/* ===== UNITE DES PASTILLES CHIFFREES (2026-09-20) =====
   « 3 mm » ecrit en Oswald 52 px donne autant de poids a l'unite qu'au chiffre, alors que
   l'oeil ne doit attraper que le nombre. L'unite passe donc en petit, collee au chiffre,
   sans changer la couleur : c'est le meme mot, pas une information a part.
   `margin-inline-start` (et non `left`) pour que l'arabe la place du bon cote. */
body.enc-pillar .istat-u{font-size:.34em;font-weight:600;letter-spacing:.02em;margin-inline-start:.16em}

/* ------------------------------------------------------------------
   REPLI « image a venir » — TUILES DU GUIDE D'ID (2026-09-20)
   Meme principe que .species-image des grilles d'especes : les <img>
   portent onerror="this.remove()", donc une tuile sans photo (boidae)
   ne gardait que son libelle et ressemblait a un trou. On ajoute la
   meme ligne d'etat, sous le nom de la famille.
   Texte porte par le CSS : rien a editer dans les grilles, et le
   placeholder n'est pas indexe.
   ------------------------------------------------------------------ */
.idg2 .idtile .im:not(:has(img)){flex-direction:column;gap:5px}
.idg2 .idtile .im::after{
  content:'Image coming soon';
  font:600 8px/1.3 'Lato',sans-serif;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#b9a888;
  text-align:center;
  padding:0 6px;
  max-width:92%;
}
.idg2 .idtile .im:has(img)::after{display:none}
/* Hub : les tuiles data-mode=groups sont des tuiles de TEXTE, sans photo prevue.
   Pas de mention « Image a venir » dessus : il n'y a rien a attendre. (2026-09-20) */
.idg2 .idsel[data-mode=groups] .idtile .im::after{content:''}
html[lang="fr"] .idg2 .idtile .im::after{content:'Image à venir'}
html[lang="ar"] .idg2 .idtile .im::after{
  content:'الصورة قريبًا';
  font-family:'Noto Sans Arabic','Lato',sans-serif;
  font-size:10px;
  text-transform:none;
  letter-spacing:normal;
}