/* =====================================================================
   Fauna Morocco — FICHE D'ESPÈCE v2 : styles (encyclopedia/v2/fiche-v2.css)
   Chargé APRÈS les styles du site (general, species-account, reskin, enc-toc…) qu'il complète.
   Version de production issue du prototype de l'aperçu (apercu-k7q2/_assets/fiches.css, 31/10–07/11) :
   les choix arrêtés avec Rayane y sont gardés tels quels ; les variantes d'essai restent pilotées par
   les attributs posés par fiche-v2.js (data-fbv="4", data-fpc="u", data-fsub="all", data-tbm="a").

   Plan :  0. jetons (couleurs, libellés par langue)
           1. ouverture (.fy) — médias, bandeau, titre, statuts, boutons
           2. guide d'identification (.fid-*) — volet latéral
           3. sommaire / barre de la fiche (.fy-bb, .fy-toc, .etoc-*)
           4. carte (.fy-mapv, .fy-mini, .fy-mapdlg)
           5. lexique et bulles (.lx, .fy-tip)
           6. COMPOSANT RÉUTILISABLE : tableau comparatif « Espèces semblables » (.sim-cmp)
           7. arabe (RTL)
   ===================================================================== */

/* ---------- 0. jetons ---------- */
:root {
  --fy-ink: #211E19;        /* encre / aplat noir */
  --fy-text: #34312B;       /* texte courant */
  --fy-muted: #8a8275;      /* gris chaud (nom latin secondaire, légendes) */
  --fy-line: #ebe6dc;       /* filets */
  --fy-line-strong: #cfc7b8;
  --fy-ocre: var(--ocre, #C06A2C);
  --fy-cream: #F4EFE6;
  --fy-toc-label: "Contents";
}
html[lang="fr"] { --fy-toc-label: "Sommaire"; }
html[lang="ar"] { --fy-toc-label: "المحتويات"; }


/* ---------------------------------------------------------------------
   0. la fiche commence par l'ouverture (l'ancien haut de fiche n'est plus dans la page)
   --------------------------------------------------------------------- */
.etoc-tab, .etoc-fbar { display: none; }
.species-section { padding-top: 14px; margin-top: 0; }
.accordion-container { margin-top: 10px; }

/* ---------------------------------------------------------------------
   1. OUVERTURE
   Ordinateur : un bloc de la largeur menu latéral + texte (≈ 1050px). Photo de terrain 3:2 à gauche,
   collage 4:5 à droite, même hauteur. Dessous, le bandeau : identité | présentation + boutons.
   --------------------------------------------------------------------- */
.fy {
  --edge: max(20px, calc((var(--vw, 100vw) - 1050px) / 2));   /* --vw = largeur sans barre de défilement (fiches.js) */
  --W: calc(var(--vw, 100vw) - 2 * var(--edge));
  --h: calc((var(--W) - 6px) / 2.3);
  --tx: var(--on-dark, #F4EFE6); --tx2: var(--on-dark-muted, #c9bfae); --tx3: var(--muted, #8A8378);
  --ln: rgba(244, 239, 230, .14); --acc: var(--ocre-bright, #D3792F);
  position: relative; margin-top: calc(var(--navH, 70px) - 3px); padding-top: 3px;
  background: var(--bg-dark, #0a0a0a); color: var(--tx);
}
.fy * { box-sizing: border-box; }

/* images */
.fy-media { display: grid; grid-template-columns: calc(var(--h) * 1.5) calc(var(--h) * .8); gap: 6px; justify-content: start; padding: 40px var(--edge) 0; }
.fy-media.fy-solo { grid-template-columns: calc(var(--h) * 2.3 + 6px); }   /* une seule image : elle prend tout le bloc */
.fy-big, .fy-col { position: relative; height: var(--h); overflow: hidden; background: #fff; }
.fy-big img, .fy-col img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }

/* bandeau */
.fy-band { position: relative; }
.fy-in {
  padding: 40px var(--edge) 64px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "id lead" "id act";
  column-gap: 72px; row-gap: 24px; align-items: start;
}
.fy-id { grid-area: id; min-width: 0; }
.fy-lead { grid-area: lead; }
.fy-act { grid-area: act; }

/* comme le titre des fiches actuelles : Lato gras, casse normale ; même taille partout, un nom trop long passe sur deux lignes */
.fy-h1 { margin: 0; white-space: nowrap; font: 700 2.75rem/1.05 var(--font-body, Lato, sans-serif);   /* interligne 1.15 → 1.05 : nom latin plus près (06/11) */
    /* 44 px = titre des pages de menu (05/11) */
  letter-spacing: -.01em; color: var(--tx); }
.fy-names { margin: 4px 0 0;   /* 10px → 4px (0 trop serré, 06/11) + interlignes réduits : écart nom commun / nom latin resserré (Rayane, 06/11) */
   display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.fy-names em { font: italic 500 1.4rem/1.1 var(--font-body, Lato, sans-serif); color: var(--tx); }
/* pastille « Venimeuse » à côté du nom latin (réglage « venimeux » de l'espèce) ; mène à « Que faire en cas de morsure » */
.fy-venom { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 2px; background: #8f1d14; color: #fff; text-decoration: none;
  font: 700 11px/1 var(--font-body, Lato, sans-serif); letter-spacing: .08em; text-transform: uppercase; transition: background .16s; }
.fy-venom i { font-size: 10px; }
.fy-venom:hover { background: #a82318; color: #fff; }

.fy-bc { margin-top: 16px; font: 400 14.5px/1.5 var(--font-body, Lato, sans-serif); color: var(--tx3); }
.fy-bc a { color: var(--acc); text-decoration: none; }
.fy-bc a:hover { text-decoration: underline; }
.fy-bc .breadcrumb-separator { color: var(--tx3); margin: 0 .5em; }

/* statut de conservation + tendance (repris tels quels du bandeau de la fiche, deux statuts compris) */
.fy-cons { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--ln); }
.fy-cons div { min-width: 0; }
.fy-cons dt { margin: 0 0 7px; font: 400 13px/1.2 var(--font-body, Lato, sans-serif); color: var(--tx3); }
.fy-cons dd { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 400 15.5px/1.2 var(--font-body, Lato, sans-serif); color: var(--tx); }
.fy-cons dd span:not(.iucn-tag) { color: var(--tx); }
.fy-cons .status-pair { display: inline-flex; align-items: center; gap: 7px; }
.fy-cons .status-scope { color: var(--tx3) !important; }
.fy-cons .status-sep { color: var(--tx3); }
.fy-cons .trend-decreasing { color: var(--iucn-cr, #c52412); }

.fy-lead { margin: 0; text-wrap: pretty; font: 400 1rem/1.6 var(--font-body, Lato, sans-serif); color: var(--tx); }   /* blanc cassé comme le titre (avant : --tx2, plus terne) — Rayane, 07/11 */
.fy-lead em { color: var(--tx); }

.fy-act { display: flex; flex-wrap: wrap; gap: 10px; }
.fy-b {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--btn-radius, 2px); text-decoration: none !important;
  font: 700 12.5px/1 var(--font-body, Lato, sans-serif); letter-spacing: .06em;   /* = boutons des menus (.x2-b), 04/11 : un seul gabarit de bouton sur le bandeau noir */ text-transform: uppercase; transition: background .16s, border-color .16s, color .16s;
}
.fy-b--id { background: var(--on-dark, #F4EFE6); border: 1.5px solid var(--on-dark, #F4EFE6); color: var(--ink, #211E19) !important; }
.fy-b--id:hover { background: var(--ocre, #C06A2C); border-color: var(--ocre, #C06A2C); color: var(--on-dark, #F4EFE6) !important; }
.fy-b--more { border: 1.5px solid rgba(244, 239, 230, .4); color: var(--tx) !important; }
.fy-b--more:hover { border-color: var(--tx); }
.fy-b--more i { animation: fyNudge 2.4s ease-in-out infinite; }
@keyframes fyNudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(3px); } 90% { transform: none; } }

/* petite flèche en bas : il y a une suite (ordinateur seulement ; sur mobile le bouton suffit) */
.fy-down { position: absolute; left: 50%; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px; margin-left: -18px;
  color: var(--tx3); text-decoration: none; font-size: 15px; animation: fyBob 2.2s ease-in-out infinite; }
.fy-down:hover { color: var(--tx); }
@keyframes fyBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .fy-b--more i, .fy-down { animation: none; } }

/* fiche sans guide d'identification : pas de bouton du guide nulle part */
body.fy-noid .fy-b--id, body.fy-noid .etoc-id, body.fy-noid .etoc-tab-id, body.fy-noid .etoc-bar-id { display: none !important; }

/* ---------------------------------------------------------------------
   2. GUIDE D'IDENTIFICATION : volet qui glisse depuis la droite
   --------------------------------------------------------------------- */
.fid-ov { position: fixed; inset: 0; z-index: 1200; background: rgba(10, 10, 10, .55); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.fid-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1201; width: min(640px, 100vw); display: flex; flex-direction: column;
  background: #fff; color: var(--ink, #211E19); transform: translateX(100%); visibility: hidden;
  transition: transform .38s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .38s;
}
html.fid-open .fid-ov { opacity: 1; visibility: visible; }
html.fid-open .fid-drawer { transform: none; visibility: visible; box-shadow: -20px 0 60px rgba(0, 0, 0, .25); transition: transform .38s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
html.fid-open, html.fid-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .fid-drawer, .fid-ov { transition: none; } }
.fid-dh { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; background: var(--bg-dark, #0a0a0a); color: var(--on-dark, #F4EFE6); }
.fid-dn { display: block; font: 700 1.5rem/1.15 var(--font-body, Lato, sans-serif); }
.fid-dk { display: block; margin-top: 6px; font: 400 14px/1.3 var(--font-body, Lato, sans-serif); color: var(--on-dark-muted, #c9bfae); }
.fid-x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(244, 239, 230, .3); background: none; color: var(--on-dark, #F4EFE6); font-size: 17px; cursor: pointer; }
.fid-x:hover { background: var(--ocre, #C06A2C); border-color: var(--ocre, #C06A2C); }
.fid-db { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 24px 32px; }
.fid { padding-top: 18px; }
.fid-t { margin: 0 0 12px; font: 600 1.2rem/1.2 var(--font-body, Lato, sans-serif); color: var(--ink, #211E19); }
.fid-t2 { margin-top: 28px; }
.fid-t:first-child { margin-top: 0; }
.fid-img { position: relative; border: 1px solid var(--line, #E4DBCE); border-radius: var(--btn-radius, 2px); overflow: hidden; background: #fff; }
.fid-img img { display: block; width: 100%; height: auto; }
.fid-pin {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ocre, #C06A2C); color: #fff; font: 600 15px/1 var(--font-body, Lato, sans-serif); box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0, 0, 0, .25); transition: transform .2s, background .2s;
}
.fid-pin.on { transform: translate(-50%, -50%) scale(1.2); background: var(--ink, #211E19); }
.fid-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.fid-list li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 6px; border-radius: var(--btn-radius, 2px); font: 400 15px/1.45 var(--font-body, Lato, sans-serif); color: var(--ink, #211E19); transition: background .2s; }
.fid-list li.on { background: var(--band, #f1ebe0); }
.fid-list li b { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--ocre, #C06A2C); color: #fff; font: 600 12px/1 var(--font-body, Lato, sans-serif); }
.fid .fid-conf { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.fid .fid-conf .sa-more-item { flex: none; width: auto; max-width: none; }
.fid-diff { display: block; margin-top: -.2rem; font: 700 12px/1.3 var(--font-body, Lato, sans-serif); letter-spacing: .04em; text-transform: uppercase; color: var(--ink, #211E19); }
.fid-tag-ok { display: inline-block; margin-top: 6px; padding: 3px 7px; border-radius: var(--btn-radius, 2px); background: var(--teal, #2E6B62); color: #fff; font: 700 10px/1.2 var(--font-body, Lato, sans-serif); letter-spacing: .06em; text-transform: uppercase; }
/* « Espèces semblables » repris de la fiche */
.fid-sem p { margin: 0 0 12px; font: 400 15px/1.6 var(--font-body, Lato, sans-serif); color: var(--ink, #211E19); }
.fid-sem a { color: var(--ocre, #C06A2C); }
.fid-gal { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.fid-gal figure { margin: 0; }
.fid-gal img { display: block; width: 100%; height: auto; border-radius: var(--btn-radius, 2px); background: #fff; }
.fid-gal figcaption { margin-top: 6px; font: italic 400 13px/1.4 var(--font-body, Lato, sans-serif); color: var(--muted-strong, #6d675b); }

/* ---------------------------------------------------------------------
   3. MENU LATÉRAL (ordinateur)
   - calé sur le bord gauche de l'ouverture, caché tant que l'ouverture est à l'écran
   - bouton du guide en haut ; seules les sous-parties de la section en cours sont dépliées
   - « ‹‹ » le replie : il laisse une languette (Sommaire + Guide ID) au bord gauche
   - la languette ouvre le sommaire en petite fenêtre, sur place ; « Épingler » le remet à gauche
   --------------------------------------------------------------------- */
html.etoc-rail body.fy-align .etoc { left: var(--fy-railL) !important; }
.etoc { transition: opacity .3s; }
html.etoc-rail body.fy-on .etoc { top: var(--fy-railT, calc(var(--etoc-nav, 70px) + 32px)) !important; }
html.etoc-rail .etoc .etoc-lks .etoc-subs { display: none; }
html.etoc-rail .etoc .etoc-lks .etoc-grp.open .etoc-subs { display: block; }
html.etoc-rail .etoc .etoc-hd { position: relative; padding-right: 30px; }

.etoc-id {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 2px 0 18px; padding: 12px 14px; border: 0; border-radius: var(--btn-radius, 2px);
  background: var(--ocre, #C06A2C); color: #fff; font: 700 10.5px/1.2 var(--font-body, Lato, sans-serif); letter-spacing: .14em; text-transform: uppercase; text-align: left; cursor: pointer; transition: background .15s;
}
.etoc-id:hover { background: var(--ocre-deep, #9E5220); }
.etoc-x { position: absolute; top: 0; right: 0; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: var(--btn-radius, 2px);
  background: none; color: var(--muted, #8A8378); font-size: 12px; cursor: pointer; transition: color .15s, background .15s; }
.etoc-x { color: var(--ocre, #C06A2C) !important; }   /* punaise pleine ocre = épinglé ; même icône que « Épingler » */
.etoc-x:hover { color: var(--ocre-deep, #9E5220) !important; background: var(--band, #f1ebe0); }
.etoc-x i { transform: rotate(0); }
.etoc-pin i { transform: rotate(45deg); }   /* non épinglé : punaise penchée */

/* replié */
html.etoc-off .etoc { display: none !important; }
html.etoc-rail.etoc-off .etoc-tab { display: flex; flex-direction: column; gap: 6px; position: fixed; left: 0; top: calc(var(--etoc-nav, 70px) + 32px); z-index: 40; transition: opacity .3s; }
html.etoc-rail.etoc-off body.fy-on .etoc-tab { top: var(--fy-railT, calc(var(--etoc-nav, 70px) + 32px)); }
.etoc-tab button {
  display: flex; flex-direction: column; align-items: center; gap: 10px; width: 40px; padding: 12px 0; border: 0; border-radius: 0 var(--btn-radius, 2px) var(--btn-radius, 2px) 0; cursor: pointer;
  font: 700 10.5px/1 var(--font-body, Lato, sans-serif); letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); transition: background .15s, width .15s;
}
.etoc-tab span { writing-mode: vertical-rl; transform: rotate(180deg); }
.etoc-tab i { font-size: 13px; }
.etoc-tab-open { background: var(--ink, #211E19); color: var(--on-dark, #F4EFE6); }
.etoc-tab-open:hover, html.etoc-float .etoc-tab-open { background: var(--ocre, #C06A2C); width: 46px; }
.etoc-tab-id { background: var(--ocre, #C06A2C); color: #fff; }
.etoc-tab-id:hover { background: var(--ocre-deep, #9E5220); width: 46px; }

/* petite fenêtre */
html.etoc-rail.etoc-off.etoc-float .etoc {
  display: block !important; opacity: 1; visibility: visible; left: 52px !important; width: 262px !important; padding: 14px 18px 16px; z-index: 60;
  background: #fff; border: 1px solid var(--line, #E4DBCE); border-radius: var(--btn-radius, 2px); box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  max-height: calc(100vh - var(--etoc-nav, 70px) - 56px); animation: etocIn .22s cubic-bezier(.22, 1, .36, 1);
}
@keyframes etocIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.etoc-float .etoc { animation: none; } }
html.etoc-off.etoc-float .etoc .etoc-x { display: none; }
html.etoc-off.etoc-float .etoc .etoc-hd { padding-right: 0; }
html.etoc-off.etoc-float .etoc-fbar { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line, #E4DBCE); }
.etoc-pin, .etoc-fx { border: 0; background: none; cursor: pointer; color: var(--muted, #8A8378); border-radius: var(--btn-radius, 2px); transition: color .15s, background .15s; }
.etoc-pin { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px 4px 0; font: 700 10.5px/1 var(--font-body, Lato, sans-serif); letter-spacing: .14em; text-transform: uppercase; }
.etoc-fx { width: 24px; height: 24px; display: grid; place-items: center; font-size: 13px; }
.etoc-pin:hover, .etoc-fx:hover { color: var(--ocre, #C06A2C); }
.etoc-fx:hover { background: var(--band, #f1ebe0); }

/* barre « Sommaire » (écrans moins larges) : bouton du guide à droite */
.etoc-bar { position: relative; }
.etoc-bar-id {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px;
  border: 0; border-radius: var(--btn-radius, 2px); background: var(--ocre, #C06A2C); color: #fff; font: 700 10.5px/1 var(--font-body, Lato, sans-serif); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.etoc-bar-id:hover { background: var(--ocre-bright, #D3792F); }
.etoc-bar-id .s { display: none; }

/* ---------------------------------------------------------------------
   4. ÉCRANS MOYENS ET MOBILE
   --------------------------------------------------------------------- */
@media (max-width: 1060px) {
  .fy-in { grid-template-columns: 1fr; grid-template-areas: "id" "lead" "act"; row-gap: 22px; }
  .fy-lead { padding-top: 20px; border-top: 1px solid var(--ln); }
}
@media (max-width: 760px) {
  .etoc-bar-id .l { display: none; }
  .etoc-bar-id .s { display: inline; }
  html.etoc-barmode .etoc-tg { justify-content: flex-start; padding-left: 20px; padding-right: 130px; }
}
@media (max-width: 860px) {
  .fy { --edge: 20px; margin-top: calc(var(--navH, 74px) - 3px); }
  /* le collage 4:5 seul, centré sur le noir */
  .fy-media, .fy-media.fy-solo { display: block; padding: 0; }
  .fy-big { display: none; }
  .fy-col { height: auto; width: min(100%, calc(64svh * .8)); aspect-ratio: 4 / 5; margin: 0 auto; }
  .fy-in { padding: 20px 20px 28px; row-gap: 18px; }
  .fy-h1 { font-size: 1.5rem; line-height: 1.1; white-space: normal; }   /* 24px, comme le titre de la fiche actuelle sur mobile */
  .fy-names { gap: 4px 10px; }
  .fy-names em { font-size: 1.15rem; }
  .fy-bc { font-size: 13.5px; margin-top: 10px; }
  /* statut et tendance : deux colonnes, intitulé au-dessus de la valeur (comme sur ordinateur) ; les valeurs sur une même ligne (03/11) */
  .fy-cons { margin-top: 16px; padding-top: 14px; display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 10px 14px; }
  .fy-cons div { display: grid; grid-template-rows: auto 22px; }
  .fy-cons dt { margin: 0 0 6px; font-size: 11.5px; }
  .fy-cons dd { font-size: 13px; gap: 6px; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
  .fy-cons .status-pair { gap: 5px; }
  .fy-cons .status-sep { margin: 0 1px; }
  .fy-lead { font-size: 15px; line-height: 1.65; padding-top: 16px; }
  .fy-act { flex-direction: column; }
  .fy-b { justify-content: center; padding: 12px 14px; font-size: 11.5px; }
  .fy-down { display: none; }
  .fid-gal, .fid .fid-conf { grid-template-columns: 1fr 1fr; }
}

.fy-h1.fy-h1--wrap { white-space: normal; }

/* menu latéral : bouton du guide fin, à contour (version « allégée » retenue) */
body.fy-mb .etoc-id {
  background: none; color: var(--ocre, #C06A2C); border: 1.5px solid var(--ocre, #C06A2C); padding: 9px 12px; margin: 0 0 16px;
  font-size: 11px; letter-spacing: .1em;
}
body.fy-mb .etoc-id:hover { background: var(--ocre, #C06A2C); color: #fff; }

/* ---------------------------------------------------------------------
   Typographie de l'encyclopédie : Oswald réservé à la marque (logo, menu du site) et aux grands chiffres clés ;
   tout le contenu de la page en Lato. Le nom de l'espèce dans le menu latéral suit donc la règle.
   --------------------------------------------------------------------- */
.etoc .etoc-cn { font-family: var(--font-body, Lato, sans-serif); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 16px; }

/* le fil d'Ariane et le nom latin de l'ouverture portent les classes du site (.breadcrumb, .scientific-name)
   pour que le sommaire latéral les retrouve ; on neutralise ici le style d'origine de ces classes */
.fy .fy-bc.breadcrumb { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; font-size: 14.5px; color: var(--tx3); }
.fy .fy-bc.breadcrumb a { color: var(--acc); }
.fy .fy-bc.breadcrumb a:hover { color: var(--acc); }
.fy .fy-names .scientific-name { margin: 0; }
@media (max-width: 860px) { .fy .fy-bc.breadcrumb { font-size: 13.5px; margin-bottom: 0; } }

/* nombre de photos d'une section : affiché en CSS pour ne pas faire partie du titre (voir le build) */
.images-badge[data-n]::after { content: attr(data-n); }

/* compteur de photos dans le menu latéral et la barre « Sommaire » : petit, gris, à droite du nom */
.etoc-lks a[data-s], .etoc-pnl a[data-s] { display: flex; align-items: baseline; gap: 8px; }
.etoc-n { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex: none; padding-right: 2px;
  font: 400 11px/1 var(--font-body, Lato, sans-serif); letter-spacing: 0; text-transform: none; color: var(--muted, #8A8378); }
.etoc-n i { font-size: 10px; }
.etoc-pnl .etoc-n { color: #8a8070; }

/* ---------- carte de répartition sur le collage (03/11) ----------
   bouton « Carte / Photos » : contour fin comme les boutons du site, en bas à gauche, toujours au même endroit ;
   encre sur la photo (fond blanc), blanc sur la bande noire. La carte (carrée) est en haut du bloc 4:5 ;
   la bande noire du bas (20 % du bloc) porte la légende et le lien « Sources » */
.fy-col .fy-mapv { position: absolute; inset: 0; z-index: 2; background: var(--bg-dark, #0a0a0a); }
.fy-col .fy-mapv[hidden] { display: none !important; }
.fy-mapv-i { aspect-ratio: 1; width: 100%; }
.fy-col .fy-mapv-i img { position: static; width: 100%; height: 100%; object-fit: cover; display: block; }
.fy-mapv-f { position: absolute; margin: 0; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font: 400 12.5px/1.2 var(--font-body, Lato, sans-serif); color: var(--on-dark, #F4EFE6); }
.fy-mapv-k { width: 12px; height: 12px; border-radius: 2px; background: #c3814f; flex: none; }   /* = orange des cartes */
.fy-mapv-s { position: absolute; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none; color: var(--on-dark-muted, #c9bfae);
  font: 400 11.5px/1.2 var(--font-body, Lato, sans-serif); }
.fy-mapv-s i { display: none; font-size: 11px; }
.fy-mapv-s > span { text-decoration: underline; text-decoration-color: rgba(201,191,174,.45); text-underline-offset: 2px; }
.fy-mapv-s:hover { color: #fff; }
.fy-mapv-s:hover > span { text-decoration-color: #fff; }
.fy-mapbtn { position: absolute; z-index: 3; left: 12px; bottom: 12px; height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px;
  border: 1px solid var(--ink, #211E19); border-radius: 2px; background: rgba(255,255,255,.75); color: var(--ink, #211E19); cursor: pointer;
  font: 700 11.5px/1 var(--font-body, Lato, sans-serif); letter-spacing: .08em; text-transform: uppercase; transition: background .16s, color .16s, border-color .16s; }
.fy-mapbtn i { font-size: 12px; }
.fy-col--map .fy-mapbtn { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
@media (hover: hover) { .fy-mapbtn:hover, .fy-col--map .fy-mapbtn:hover { background: var(--ocre, #C06A2C); border-color: var(--ocre, #C06A2C); color: #fff; } }
.fy-mapbtn:focus { outline: none; }
.fy-mapbtn:focus-visible { outline: 2px solid var(--ocre, #C06A2C); outline-offset: 2px; }

/* disposition retenue (03/11) : en haut de la bande, la légende à gauche ; le bouton seul en dessous.
   Deux options laissées au choix de l'équipe (html[data-fyl], sélecteur « Légende ») :
   1 « Aire de répartition estimée » + lien « Sources de la carte » à droite · 2 « Aire de répartition de l'espèce au Maroc », sans lien */
.fy-mapv-f { left: 26.5px; top: calc(80% + 14px); }   /* le carré orange centré sur l'icône du bouton Photos (bouton à 12px + filet 1px + marge 12px, icône de 15px, carré de 12px) */
.fy-mapv-s { right: 14px; top: calc(80% + 14px); line-height: 15px; }
.fy-mapv-fm { display: none; }
html[data-fyl="2"] .fy-mapv-fm { display: inline; }
html[data-fyl="2"] .fy-mapv-fe, html[data-fyl="2"] .fy-mapv-s { display: none; }

/* mots techniques : pointillé + infobulle sombre au-dessus du pointeur, flèche vers le mot */
.lx { border-bottom: 1px dotted var(--ocre, #C06A2C); cursor: help; }
.lx:hover, .lx:focus { color: var(--ocre-deep, #9E5220); outline: none; }
.fy-tip { position: absolute; z-index: 60; width: max-content; max-width: 280px; padding: 12px 14px 13px; border-radius: 2px; pointer-events: none; text-align: left;
  background: var(--bg-dark, #0a0a0a); box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }
.fy-tip b { display: block; margin-bottom: 4px; font: 700 14px/1.3 var(--font-body, Lato, sans-serif); color: var(--on-dark, #F4EFE6); }
.fy-tip span { display: block; font: 400 13.5px/1.5 var(--font-body, Lato, sans-serif); color: var(--on-dark-muted, #c9bfae); }
.fy-tip-arrow { position: absolute; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); background: var(--bg-dark, #0a0a0a); }
.fy-tip.below .fy-tip-arrow { bottom: auto; top: -6px; }
/* aperçu d'un appel de référence : plus large, cliquable (lien vers la liste) */
.fy-tip--ref { max-width: 360px; pointer-events: auto; }
.fy-tip--ref b { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ocre-bright, #D3792F); margin-bottom: 6px; }
.fy-tip--ref span { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.fy-tip-go { display: inline-block; margin-top: 9px; font: 700 11px/1 var(--font-body, Lato, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark, #F4EFE6); text-decoration: none; border-bottom: 1px solid rgba(244,239,230,.4); padding-bottom: 3px; }
.fy-tip-go:hover { color: var(--ocre-bright, #D3792F); border-color: currentColor; }
@media (max-width: 860px) { .fy-tip--ref { max-width: calc(100vw - 16px); } }

/* sélecteur d'essai (à retirer une fois le choix fait) */
.fyc-sw { position: fixed; right: 16px; bottom: 112px; z-index: 999; display: flex; align-items: center; gap: 3px; padding: 5px 7px 5px 11px; border-radius: 999px;
  background: #111; color: #fff; font: 700 10.5px/1 var(--font-body, Lato, sans-serif); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.fyc-sw span { margin-right: 5px; opacity: .7; }
.fyc-sw button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; color: #fff; font: 700 12px/1 var(--font-body, Lato, sans-serif); cursor: pointer; }
.fyc-sw button.on { background: #C06A2C; }
@media (max-width: 860px) { .fyc-sw { right: 8px; bottom: 92px; } }

/* ---------------------------------------------------------------------
   ESSAI (04/11, à retirer une fois tranché) : barre mobile de la fiche alignée sur celle des menus
   (data-tbm sur <html> : a = en haut, c = en bas ; 0 = l'ancienne barre noire, via ?tb=0)
   --------------------------------------------------------------------- */
.fy-bb{ display: none; }
@media (max-width: 860px) {
  /* liste des sections : blanche dans les deux versions, comme le reste de la page */
  html[data-tbm="a"] .etoc-pnl{ background: #fff; border-bottom: 1px solid #e6e0d6; box-shadow: 0 18px 40px rgba(33,30,25,.16); }
  html[data-tbm="a"] .etoc-pnl a{ color: #4a453d; border-bottom-color: #efeae1; }
  html[data-tbm="a"] .etoc-pnl a.on{ color: var(--ocre, #C06A2C); }
  html[data-tbm="a"] .etoc-pnl .etoc-subs{ border-bottom-color: #efeae1; }
  html[data-tbm="a"] .etoc-pnl .etoc-subs a{ color: #6a6459; }
  html[data-tbm="a"] .etoc-pnl .etoc-subs a.on{ color: var(--ink, #211E19); }
  html[data-tbm="a"] .etoc-scrim{ background: rgba(33,30,25,.35); }

  /* EN HAUT : la barre de raccourcis prend la place de la barre « Sommaire » (même dessin que la barre des menus, trait sous l'onglet) */
  html[data-tbm="a"].etoc-barmode .etoc-bar { background: #fff; border-top: 0; border-bottom: 1px solid #ececec; }
  html[data-tbm="a"] .etoc-tg, html[data-tbm="a"] .etoc-bar-id { display: none !important; }
  html[data-tbm="a"].etoc-barmode .etoc-bar .fy-bb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 0 4px; }
  html[data-tbm="a"] .etoc-bar .fy-bb button { margin: 0 0 -1px; border-top: 0; border-bottom: 2px solid transparent; }
  html[data-tbm="a"] .etoc-bar .fy-bb button.on { border-bottom-color: var(--ocre, #C06A2C); }

  /* EN BAS : la barre du haut disparaît ; raccourcis collés en bas, même dessin que la barre des menus */
  
  
  
  
  .fy-bb button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 48px; margin-top: -1px; padding: 6px 2px 5px;   /* 58 → 48 px : barre plus fine sur téléphone (Rayane, 06/11) */
    border: 0; border-top: 2px solid transparent; background: none; cursor: pointer; font: 700 11px/1 var(--font-body, Lato, sans-serif); color: #6a6459; white-space: nowrap; }
  .fy-bb button i { font-size: 16px; color: var(--ocre, #C06A2C); }
  .fy-bb button.on { border-top-color: var(--ocre, #C06A2C); color: var(--ink, #211E19); }
  
  

  /* sélecteur d'essai (le même que sur les menus) */
  
  
  
  
  
  .fyc-sw { left: auto; }
}

/* mobile, avec la nouvelle barre : le bouton « Carte » posé sur l'image fait doublon avec celui de la barre (qui bascule aussi carte ↔ photos) */
@media (max-width: 860px) { html[data-tbm="a"] .fy-mapbtn{ display: none; } }

/* ---------- ORDINATEUR (essai 04/11) : data-fpc « u » = la barre en haut (Carte · Guide d'identification · Haut de page),
   sommaire de gauche réduit à la liste des sections ; data-fbc = petit fil d'Ariane dans la barre ; data-fsub = sous-sections ---------- */
.fy-bb--bar, .fy-pcsw { display: none; }
/* sous-sections du sommaire (ordinateur et mobile) : toutes visibles, ou seulement celles d'Histoire naturelle (+ la section où l'on est, comme avant) */
html[data-fsub="all"] .etoc .etoc-subs, html[data-fsub="all"] .etoc-pnl .etoc-subs { display: block !important; }

@media (min-width: 861px) {
  /* la barre, collée sous le menu du site ; même dessin que la barre des menus sur ordinateur (icône ocre + nom, trait ocre) */
  html[data-fpc="u"] .fy-bb--bar { display: block; position: sticky; top: var(--etoc-nav, 69px); bottom: 0; z-index: 30;   /* collée en BAS de l'écran tant qu'elle est sous l'ouverture (Carte visible dès l'arrivée), puis en haut */ background: #fff; border-bottom: 1px solid #ececec; }
  .fy-bb--bar .fy-bb-in { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; justify-content: center; gap: clamp(26px, 3.4vw, 48px); }
  .fy-bb--bar button { display: inline-flex; align-items: center; gap: 8px; padding: 18px 0 15px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
    font: 700 14.5px/1 var(--font-body, Lato, sans-serif); color: #6a6459; white-space: nowrap; transition: color .16s, border-color .16s; }
  .fy-bb--bar button i { font-size: 14px; color: var(--ocre, #C06A2C); }
  .fy-bb--bar button:hover { color: var(--ink, #211E19); }
  .fy-bb--bar button.on { color: var(--ink, #211E19); border-bottom-color: var(--ocre, #C06A2C); }
  .fy-bb-bc { display: none; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); align-items: center; gap: 7px; text-decoration: none;
    font: 700 11px/1 var(--font-body, Lato, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: #8A8378; }
  .fy-bb-bc i { font-size: 9px; }
  .fy-bb-bc:hover { color: var(--ocre, #C06A2C); }
  
  @media (min-width: 1241px) { .fy-bb-bc { left: 0; } }
  /* le bouton « Carte » de la barre remplace celui posé sur l'image */
  html[data-fpc="u"] .fy-mapbtn { display: none; }
  /* sommaire de gauche : la liste seule, sous la barre */
  html[data-fpc="u"] .etoc .etoc-hd, html[data-fpc="u"] .etoc .etoc-id, html[data-fpc="u"] .etoc .etoc-ft, html[data-fpc="u"] .etoc-tab, html[data-fpc="u"] .etoc .etoc-fbar { display: none !important; }
  html[data-fpc="u"].etoc-rail .etoc { margin-top: 54px; }
  /* sélecteur d'essai */
  .fy-pcsw { position: fixed; left: 16px; bottom: 76px; z-index: 999; display: flex; align-items: center; gap: 3px; padding: 5px 7px 5px 12px; border-radius: 999px;
    background: #111; color: #fff; font: 700 10.5px/1 var(--font-body, Lato, sans-serif); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
  .fy-pcsw span { margin-right: 6px; opacity: .7; }
  .fy-pcsw i { width: 1px; height: 16px; margin: 0 8px; background: rgba(255,255,255,.25); }
  .fy-pcsw button { height: 26px; padding: 0 10px; border-radius: 999px; border: 0; background: transparent; color: #fff; font: 700 11px/1 var(--font-body, Lato, sans-serif); cursor: pointer; }
  .fy-pcsw button.on { background: #C06A2C; }
}

/* ---------- 04/11 soir : barre unique (ordinateur « Nouvelle » et mobile) ---------- */
/* la carte s'ouvre en grand, par-dessus la page (fenêtre noire comme la visionneuse du site) */
.fy-mapdlg { display: none; }
html.fy-map-on .fy-mapdlg { display: flex; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; padding: 56px 20px 28px; background: var(--bg-dark, #0a0a0a); }   /* noir plein, comme la visionneuse */
html.fy-map-on { overflow: hidden; }
.fy-mapdlg .fy-mapv { position: static !important; inset: auto !important; display: flex !important; flex-direction: column; width: auto; max-width: min(100%, 760px); max-height: 100%; background: none !important; }
.fy-mapdlg .fy-mapv-i { position: static !important; width: auto; height: auto !important; }
.fy-mapdlg .fy-mapv-i img { display: block; width: auto; max-width: 100%; max-height: calc(100svh - 170px); object-fit: contain; }
.fy-mapdlg .fy-mapv-f, .fy-mapdlg .fy-mapv-s { position: static !important; transform: none !important; }
.fy-mapdlg .fy-mapv-f { margin: 14px 0 0; display: flex; align-items: center; gap: 10px; color: var(--on-dark, #F4EFE6); font: 400 14px/1.4 var(--font-body, Lato, sans-serif); }
.fy-mapdlg .fy-mapv-s { margin-top: 8px; align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; color: rgba(244,239,230,.8); font: 400 13.5px/1 var(--font-body, Lato, sans-serif); text-decoration: underline; text-underline-offset: 3px; }
.fy-mapdlg-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: none; color: #fff; font-size: 17px; cursor: pointer; }
.fy-mapdlg-x:hover { border-color: #fff; }
.fy-bb button.on[data-a="map"] { color: var(--ink, #211E19); }
/* mobile avec la barre : le guide quitte l'ouverture de la fiche (il est dans la barre) */
@media (max-width: 860px) { html[data-tbm="a"] .fy-b--id{ display: none !important; } }
@media (min-width: 861px) {
  html[data-fpc="u"] .fy-b--id { display: none !important; }
  /* « Sommaire » dans la barre : le nom de la section en cours, puis la liste qui s'ouvre dessous */
  .fy-bb--bar .fy-cur { font-style: normal; font-weight: 400; color: var(--ocre, #C06A2C); max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
  .fy-bb--bar .fy-cur:empty { display: none; }
  .fy-bb--bar .fy-chev { font-size: 11px; color: #8A8378; transition: transform .2s; }
  html.fy-toc-on .fy-bb--bar .fy-chev { transform: rotate(180deg); }
  .fy-toc { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: min(380px, 92vw); max-height: calc(100vh - var(--etoc-nav, 69px) - 80px); overflow-y: auto;
    background: #fff; border: 1px solid #e6e0d6; border-top: 0; box-shadow: 0 18px 40px rgba(33,30,25,.16); padding: 8px 0 10px; }
  html.fy-toc-on .fy-toc { display: block; }
  .fy-toc .etoc-grp > a { display: flex; justify-content: space-between; align-items: center; padding: 10px 22px; text-decoration: none; font: 700 11.5px/1.3 var(--font-body, Lato, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: #4a453d; }
  .fy-toc .etoc-subs { display: none; padding: 0 0 6px; }
  .fy-toc .etoc-subs a { display: flex; justify-content: space-between; padding: 6px 22px 6px 38px; text-decoration: none; font: 400 14px/1.35 var(--font-body, Lato, sans-serif); color: #6a6459; }
  .fy-toc a:hover { color: var(--ink, #211E19); background: #f8f5ef; }
  .fy-toc a.on { color: var(--ocre, #C06A2C); }
  .fy-toc .etoc-subs a.on { color: var(--ink, #211E19); font-weight: 700; }
  .fy-toc .etoc-n { display: inline-flex; gap: 5px; align-items: center; font-weight: 400; font-size: 11px; color: #9a8f7f; letter-spacing: 0; }
  .fy-toc .etoc-grp.open .etoc-subs { display: block; }
  html[data-fsub="all"] .fy-toc .etoc-subs{ display: block; }
}

/* ---------- sélecteur d'essai unique de la fiche (04/11 soir) : remplace « Légende », « Ordinateur », « Fil d'Ariane », « Sous-sections » ---------- */
.fyc-sw, .fy-pcsw{ display: none !important; }

/* section en cours / chevron : seulement là où le dessin les montre */
.fy-bb .fy-cur, .fy-bb .fy-chev { display: none; }
@media (min-width: 861px) { 
  html .fy-bb--bar .fy-chev { display: inline; } }

/* ---- 2 : texte seul, petites capitales (comme les onglets Contexte / Habitats / Menaces), trait ocre sous l'actif ---- */

/* ---- 3 : à gauche « Sommaire » et la section en cours ; à droite les actions, en boutons à contour (comme ceux du site) ---- */

/* la barre « ordinateur » n'existe pas sur mobile (sinon les règles mobiles de .fy-bb l'affichaient en mode « en bas ») */
@media (max-width: 860px) { .fy-bb--bar { display: none !important; } }

/* ---------- barre retenue (04/11, data-fbv="4") : Sommaire + section en cours à gauche ; Répartition, Guide d'identification, flèche à droite ---------- */
/* « Lire la fiche complète » et la flèche de l'ouverture disparaissent : la barre (et sa flèche centrale) fait ce travail */
@media (min-width: 861px) { html[data-fpc="u"] .fy-b--more, html[data-fpc="u"] .fy-down, html[data-fpc="u"] .fy-act { display: none !important; } }
@media (max-width: 860px) { html[data-tbm="a"] .fy-b--more, html[data-tbm="a"] .fy-down,
  html[data-tbm="a"] .fy-act{ display: none !important; } }
.fy-bb-down { display: none; }
@media (min-width: 861px) {
  /* même largeur que l'ouverture de la fiche (titre, intro) */
  html[data-fbv="4"] .fy-bb--bar .fy-bb-in { max-width: none; box-sizing: border-box; padding: 0 max(20px, calc((var(--vw, 100vw) - 1050px) / 2)); justify-content: flex-end; gap: clamp(24px, 2.6vw, 36px); }
  html[data-fbv="4"] .fy-bb--bar [data-a="toc"] { margin-right: auto; }
  html[data-fbv="4"] .fy-bb--bar [data-a="toc"] .fy-cur:not(:empty) { display: inline; font-weight: 700; color: var(--ink, #211E19); }
  html[data-fbv="4"] .fy-bb--bar [data-a="top"] > span { display: none; }
  html[data-fbv="4"] .fy-bb--bar [data-a="top"] i { font-size: 16px; }
  html[data-fbv="4"] .fy-bb-bc { display: none !important; }
  html[data-fbv="4"] .fy-toc { left: max(20px, calc((var(--vw, 100vw) - 1050px) / 2)); transform: none; }
  /* tout en haut (barre posée en bas de l'écran) : flèche centrale vers le bas, pas de flèche « haut de page » */
  .fy-bb-down { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border: 0; background: none; cursor: pointer; color: var(--ocre, #C06A2C); font-size: 17px; }
  .fy-bb-down i { animation: fyNudge 2.4s ease-in-out infinite; }
  html.fy-bb-low .fy-bb-down { display: grid; place-items: center; }
  html.fy-bb-low .fy-bb--bar [data-a="top"] { visibility: hidden; }
}
@media (max-width: 860px) {
  html[data-fbv="4"] .fy-bb:not(.fy-bb--bar) { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) 78px 70px 46px; }
  html[data-fbv="4"] .fy-bb:not(.fy-bb--bar) [data-a="toc"] { flex-direction: row; justify-content: flex-start; gap: 8px; padding-left: 14px; }
  html[data-fbv="4"] .fy-bb:not(.fy-bb--bar) [data-a="toc"] > span { display: none; }
  html[data-fbv="4"] .fy-bb:not(.fy-bb--bar) [data-a="toc"] .fy-cur { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 700 13.5px/1.2 var(--font-body, Lato, sans-serif); color: var(--ink, #211E19); }
  html[data-fbv="4"] .fy-bb:not(.fy-bb--bar) [data-a="toc"] .fy-cur:empty::before { content: var(--fy-toc-label); }
  html[data-fbv="4"] .fy-bb:not(.fy-bb--bar) [data-a="toc"] .fy-chev { display: inline; color: var(--ocre, #C06A2C); font-size: 12px; }
  html[data-fbv="4"] .fy-bb:not(.fy-bb--bar) [data-a="top"] > span { display: none; }
  /* Guide d'ID calé tout à droite (Rayane, 06/11) ; la flèche « Haut » (visible une fois descendu) vient juste avant lui,
     pour que rien ne bouge quand elle apparaît. Sans bouton Répartition (fiches à mini carte), une colonne de moins. */
  /* plus de flèche « Haut » sur téléphone (Rayane, 06/11) : « En bref » du sommaire ramène en haut */
  html[data-fbv="4"] .fy-bb:not(.fy-bb--bar) [data-a="top"] { display: none; }
  html[data-fbv="4"] .fy-bb:not(.fy-bb--bar) { grid-template-columns: minmax(0, 1fr) 78px 78px; }
  html[data-fbv="4"] .fy-bb:not(.fy-bb--bar):not(:has([data-a="map"])) { grid-template-columns: minmax(0, 1fr) 78px; }
  html[data-fbv="4"] .fy-bb:not(.fy-bb--bar) [data-a="map"] { order: 1; }
  html[data-fbv="4"] .fy-bb:not(.fy-bb--bar) [data-a="top"] { order: 2; }
  html[data-fbv="4"] .fy-bb:not(.fy-bb--bar) [data-a="id"] { order: 3; }
  html[data-fbv="4"] .fy-bb:not(.fy-bb--bar):not(:has([data-a="id"])) { grid-template-columns: minmax(0, 1fr) 78px; }
  html[data-fbv="4"] .fy-bb:not(.fy-bb--bar):not(:has([data-a="id"])) [data-a="map"] { order: 3; }   /* sans guide : le dernier bouton (Répartition) à droite */
}
   /* plus d'essai sur ordinateur */
html:not(.fy-bb-low) .fy-bb--bar .fy-bb-down { display: none; }   /* (les boutons de la barre sont en inline-flex : il faut être plus précis) */
/* écrans moyens (861–1240 px) : l'ancienne barre noire « Sommaire » du site ne doit plus apparaître, la nouvelle barre la remplace */
@media (min-width: 861px) { html[data-fpc="u"] .etoc-bar { display: none !important; } }

/* ---------- 04/11, retours : flèche de l'ouverture, sommaire ---------- */
/* la petite flèche ↓ de l'ouverture revient (pas de flèche orange dans la barre) ; tant que la barre est posée en bas de l'écran,
   la flèche se place juste au-dessus d'elle, sur le noir */
@media (min-width: 861px) {
  html[data-fpc="u"] .fy-down { display: grid !important; }
  html.fy-bb-low .fy-down { position: fixed; bottom: 62px; z-index: 29; }
  html.fy-bb-low .fy-bb--bar [data-a="top"] { visibility: hidden; }
  /* le sommaire s'ouvre vers le haut quand la barre est en bas de l'écran */
  html.fy-bb-low .fy-toc { top: auto; bottom: 100%; border-top: 1px solid #e6e0d6; border-bottom: 0; box-shadow: 0 -18px 40px rgba(33,30,25,.16); max-height: calc(100vh - var(--etoc-nav, 69px) - 90px); }
}
/* liste du sommaire : sans les traits beiges du menu latéral */
.fy-toc .etoc-lks a, .fy-toc .etoc-lks .etoc-subs a { border-left: 0 !important; border-right: 0 !important; }
.fy-toc .etoc-lks, .fy-toc .etoc-grp, .fy-toc .etoc-subs { border: 0 !important; box-shadow: none !important; margin: 0; }
.fy-toc .etoc-grp::before, .fy-toc .etoc-lks::before, .fy-toc a::before { display: none !important; }
.fy-toc .fy-pres { display: flex; padding: 10px 22px; text-decoration: none; font: 700 11.5px/1.3 var(--font-body, Lato, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: #4a453d; }
.fy-toc .fy-pres.on, .etoc-pnl .fy-pres.on { color: var(--ocre, #C06A2C); }
.fy-bb button:focus { outline: none; }
.fy-bb button:focus-visible { outline: 2px solid var(--ocre, #C06A2C); outline-offset: -2px; }

/* ---------- 04/11 : finitions mobile ----------
   flèche « haut de page » cachée tant qu'on est sur l'ouverture (classe posée par fiches.js) ;
   photos de l'ouverture : pas de surbrillance au toucher ni de menu « enregistrer l'image » (comme les autres photos du site) */
html.fy-attop .fy-bb [data-a="top"] { visibility: hidden; }
.fy-big, .fy-col, .fy-big img, .fy-col img { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* pastille « taille du texte » (zoom.js) : masquée tant que la barre de la fiche est posée en bas de l'écran (elle la chevauchait) */
.fmz { transition: opacity .2s, visibility .2s; }
html.fy-bb-low .fmz { opacity: 0; visibility: hidden; }
/* sommaire ouvert : l'icône « liste » du bouton Sommaire devient une croix (on referme au même endroit) ; le chevron s'efface (04/11) */
.fy-bb [data-a="toc"] > i { width: 1.15em; text-align: center; }
.fy-bb [data-a="toc"].on > i::before { content: ""; }
.fy-bb [data-a="toc"].on .fy-chev { visibility: hidden; }
/* mobile, barre en haut : la barre reste au-dessus du voile quand le sommaire est ouvert (la croix doit rester nette et cliquable) */
html[data-tbm="a"] .etoc-bar.open .fy-bb { position: relative; z-index: 950; background: #fff; }

/* ---------- diaporama de la photo de terrain (ordinateur, 05/11) : même fondu et mêmes traits que le diaporama des menus ---------- */
.fy-sl img { opacity: 0; transition: opacity .7s var(--ease, ease); pointer-events: none; }
.fy-sl img.on { opacity: 1; pointer-events: auto; }
.fy-dots { position: absolute; z-index: 3; right: 10px; bottom: 4px; display: flex; gap: 0; }
/* zone cliquable large (30 × 24 px) autour d'un trait fin : les traits de 3 px étaient trop durs à viser (Rayane, 05/11) */
.fy-dots button { position: relative; width: 30px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer !important; }
.fy-dots button::before, .fy-dots button::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; }
.fy-dots button::before { background: rgba(255,255,255,.45); box-shadow: 0 0 3px rgba(0,0,0,.35); }
.fy-dots button::after { background: #fff; transform: scaleX(0); transform-origin: left; }
.fy-dots button.done::after, .fy-dots button.on::after { transform: scaleX(1); }
.fy-sl.playing .fy-dots button.on::after { animation: fybar 7.5s linear forwards; }
@keyframes fybar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (hover: hover) { .fy-dots button:hover::before { background: rgba(255,255,255,.8); } }
@media (prefers-reduced-motion: reduce) { .fy-sl img { transition: none; } }
/* fil d'Ariane : la fiche où l'on est, en dernier, gris, sans lien (05/11) */
.fy .fy-bc .bc-cur { color: var(--tx3); }
.fy .fy-bc a, .fy .fy-bc .bc-cur { white-space: nowrap; }   /* un maillon ne se coupe pas ; retour à la ligne après un « / » (<wbr> posé par le build) */

/* références : le site (species-account.css) espace « .ref-wrapper + .ref-wrapper », mais ce sélecteur ignore le texte entre deux
   références : « serpents [20]. » prenait une espace alors que « peu[18] » non. Ici : 0 partout, et l'espace seulement entre deux
   références collées (« [5][8] »), classe posée par fiches.js (05/11) */
.ref-wrapper + .ref-wrapper { margin-left: 0; }
.ref-wrapper.rw-n { margin-left: .18em; }

/* téléphone : texte des fiches aligné à gauche (justifié, la colonne étroite creusait de gros trous entre les mots) (05/11) */
@media (max-width: 760px) { .accordion-container p, .accordion-container li { text-align: left !important; } }

/* ---------------------------------------------------------------------
   MINI CARTE DE RÉPARTITION SOUS LE TITRE (Rayane, 06/11)
   Carte détourée (fond transparent) ; un clic ouvre la grande carte (même fenêtre que le bouton « Répartition », qui disparaît).
   Ordinateur (≥ 1061 px) : l'intro prend exactement la largeur de la photo verticale et commence au même pixel ;
   la carte se range à droite du bloc titre, sans dépasser le filet du statut.
   En dessous : la carte flotte à droite du nom latin et du fil d'Ariane.
   --------------------------------------------------------------------- */
.fy-mini { display: block; position: relative; cursor: zoom-in; text-decoration: none; }
.fy-mini img { display: block; width: 100%; height: auto; }
/* pastille « agrandir » : petit carré cerné, dans le noir en bas à droite de la carte */
.fy-mini-z { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(244, 239, 230, .38); border-radius: 2px; color: var(--tx2); font-size: 10px; transition: background .15s, border-color .15s, color .15s; }
.fy-mini:hover .fy-mini-z, .fy-mini:focus-visible .fy-mini-z { background: var(--ocre, #C06A2C); border-color: var(--ocre, #C06A2C); color: #fff; }
.fy-mini:focus { outline: none; }
.fy-mini:focus-visible { outline: 2px solid var(--ocre, #C06A2C); outline-offset: 4px; }
.fy-bc .bc-s { display: none; }
@media (min-width: 1061px) {
  /* l'intro prend exactement la largeur de la photo verticale, sur TOUTES les fiches (avec ou sans mini carte, 07/11) */
  .fy:has(.fy-col) .fy-in { grid-template-columns: minmax(0, 1fr) calc(var(--h) * .8); column-gap: 0; }
  .fy:has(.fy-col) .fy-in:not(:has(.fy-mini)) .fy-id { padding-right: 44px; }
  /* bloc titre en 2 colonnes : texte | carte. La carte occupe la hauteur titre + nom latin + fil d'Ariane, jamais plus
     (contain: size = elle ne pousse pas les lignes ; elle s'y adapte), et s'arrête avant le filet du statut */
  .fy-in:has(.fy-mini) .fy-id { display: grid; grid-template-columns: minmax(0, 1fr) 118px; column-gap: 44px; padding-right: 28px; align-content: start; }
  .fy-in:has(.fy-mini) .fy-id > * { grid-column: 1; }
  .fy-in:has(.fy-mini) .fy-id > .fy-cons { grid-column: 1 / -1; }
  .fy-in:has(.fy-mini) .fy-id > .fy-mini { grid-column: 2; grid-row: 1 / 4; contain: size; align-self: stretch; margin: 6px 0 2px; }
  .fy-mini img { height: 100%; object-fit: contain; object-position: 50% 0; }
}
@media (max-width: 1060px) {
  /* la carte est calée en bas, sur la ligne du fil d'Ariane, et grandit vers le haut et la gauche (Rayane, 06/11) :
     104 px de large ; si elle toucherait le titre (titre long), fiches.js la réduit pour qu'elle reste sous le titre */
  .fy-in:has(.fy-mini) .fy-id { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto; column-gap: 14px; }
  /* la hauteur de la carte en plus va sous le nom latin, pas entre le nom et le nom latin ; le bloc nom / nom latin / fil d'Ariane reste groupé, la place en plus passe dessous */
  .fy-in:has(.fy-mini) .fy-id > .fy-bc { align-self: start; }
  .fy-in:has(.fy-mini) .fy-id > * { grid-column: 1; }
  .fy-in:has(.fy-mini) .fy-id > .fy-h1 { grid-column: 1 / -1; grid-row: 1; }
  .fy-in:has(.fy-mini) .fy-id > .fy-names { grid-row: 2; }
  .fy-in:has(.fy-mini) .fy-id > .fy-bc { grid-row: 3; }
  .fy-in:has(.fy-mini) .fy-id > .fy-cons { grid-column: 1 / -1; grid-row: 4; }
  .fy-in:has(.fy-mini) .fy-id > .fy-mini { grid-column: 2; grid-row: 1 / 4; align-self: end; width: 104px; margin: 0 0 2px; }
  .fy-in:has(.fy-mini) .fy-id > .fy-mini.fy-mini--bas { grid-row: 2 / 4; margin-top: 4px; }
}
@media (min-width: 600px) and (max-width: 1060px) {
  /* écran moyen : la carte occupe toute la hauteur du bloc nom → statut ; le titre et le statut restent dans la colonne de gauche (06/11) */
  .fy-in:has(.fy-mini) .fy-id > .fy-h1, .fy-in:has(.fy-mini) .fy-id > .fy-cons { grid-column: 1; }
  .fy-in:has(.fy-mini) .fy-id > .fy-mini { grid-row: 1 / 5; align-self: start; margin: 0; }
}
@media (max-width: 860px) {
  .fy-bc .bc-l { display: none; }
  .fy-bc .bc-s { display: inline; }
}

/* écran bas (fiches.js, fitScreen) : marges verticales de l'ouverture resserrées pour garder le statut à l'écran (06/11) */
.fy.fy-court .fy-media { padding-top: 20px; }
.fy.fy-court .fy-in { padding-top: 24px; }

/* bulle des pastilles UICN (fiches.js, 06/11) : fond crème sur le noir, petite flèche vers la pastille */
.fy-page .iucn-tag[tabindex] { cursor: help; }
.fy-page .iucn-tag[tabindex]:focus { outline: none; }
.fy-page .iucn-tag[tabindex]:focus-visible { outline: 2px solid var(--ocre, #C06A2C); outline-offset: 2px; }
.fy-tip { position: fixed; z-index: 3000; max-width: 260px; padding: 8px 11px 9px; border-radius: 4px; background: #F4EFE6; color: #1c1a17;
  font: 400 13px/1.35 var(--font-body, Lato, sans-serif); box-shadow: 0 6px 18px rgba(0,0,0,.35); pointer-events: none;
  opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s; }
.fy-tip.on { opacity: 1; transform: none; }
.fy-tip .fy-tip-l { display: block; color: #1c1a17; }
.fy-tip .fy-tip-c { display: inline; font-weight: 700; color: #1c1a17; }
.fy-tip .fy-tip-s { display: block; margin-top: 2px; font-size: 11.5px; color: #6f675c; }
.fy-tip::after { content: ""; position: absolute; left: calc(var(--ax, 50%) - 5px); top: 100%; border: 5px solid transparent; border-top-color: #F4EFE6; }
.fy-tip.dn::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #F4EFE6; }

/* ---------------------------------------------------------------------
   ORDINATEUR (≥ 1061 px), FICHES AVEC MINI CARTE — carte en colonne (Rayane, 08/11)
   À gauche, sous la grande photo : nom, nom latin, fil d'Ariane, statut + tendance (une ligne), puis l'intro.
   À droite, sous la photo verticale : la carte seule, à 80 % de la largeur de cette photo, centrée.
   .fy-id passe en display:contents pour que ses éléments et la carte se rangent dans la grille de .fy-in.
   Téléphone et tablette : inchangés.
   --------------------------------------------------------------------- */
@media (min-width: 1061px) {
  .fy .fy-in:has(.fy-mini) { grid-template-columns: minmax(0, 1fr) 52px calc(var(--h) * .8); grid-template-rows: auto auto auto auto 1fr auto;
    grid-template-areas: none; column-gap: 0; row-gap: 0; align-items: start; }
  .fy .fy-in:has(.fy-mini) .fy-id { display: contents; }
  .fy .fy-in:has(.fy-mini) .fy-h1 { grid-column: 1; grid-row: 1; }
  .fy .fy-in:has(.fy-mini) .fy-names { grid-column: 1; grid-row: 2; }
  .fy .fy-in:has(.fy-mini) .fy-bc { grid-column: 1; grid-row: 3; }
  .fy .fy-in:has(.fy-mini) .fy-cons { grid-column: 1; grid-row: 4; }
  .fy .fy-in:has(.fy-mini) .fy-lead { grid-column: 1; grid-row: 5; margin: 24px 0 0 !important; padding: 0; border: 0; }
  .fy .fy-in:has(.fy-mini) .fy-act { grid-column: 1; grid-row: 6; }
  .fy .fy-in:has(.fy-mini) .fy-mini { grid-column: 3; grid-row: 1 / -1; position: relative; width: 80%; justify-self: center; align-self: start; margin: 0; contain: none; }
  .fy .fy-in:has(.fy-mini) .fy-mini img { width: 100%; height: auto; }
  .fy .fy-in:has(.fy-mini) .fy-mini-z { width: 30px; height: 30px; font-size: 13px; }
}


/* =====================================================================
   6. COMPOSANT RÉUTILISABLE — tableau comparatif « Espèces semblables » (.sim-cmp)
   ---------------------------------------------------------------------
   Sert dans n'importe quelle fiche (v1 ou v2) et dans le guide d'identification (copié par fiche-v2.js).
   Grille CSS (pas de <table>) : 1 colonne d'intitulés + N colonnes d'espèces ; sur téléphone,
   l'intitulé passe au-dessus de sa ligne et les N colonnes tiennent sans défilement horizontal.
   Balisage :
     <div class="sim-cmp" role="table" aria-label="…">
       <div class="sim-cmp-row sim-cmp-head" role="row">
         <div class="sim-cmp-lab" role="columnheader"></div>
         <div class="sim-cmp-cell" role="columnheader"><span class="cap-dot cap-dot--a"></span>
           <span class="sim-cmp-n">Nom commun</span><span class="sim-cmp-s"><em>Nom latin</em></span></div>
         … une cellule par espèce (pastilles --a, --b, --c = celles du collage) …
       </div>
       <div class="sim-cmp-row" role="row"><div class="sim-cmp-lab" role="rowheader">Critère</div>
         <div class="sim-cmp-cell" role="cell">…</div> …</div>
     </div>
   Nombre d'espèces : 3 par défaut ; pour 2 ou 4, ajouter style="--sim-n:2" (ou 4) sur .sim-cmp.
   Dessin validé par Rayane le 09/11 : Lato partout, pastille à gauche du nom, pas de couleur de colonne,
   pas de ligne surlignée. (Copie identique dans species-account.css pour les fiches v1.)
   ===================================================================== */
.sim-cmp { --sim-n: 3; margin: 1.3rem 0; font-family: "Lato", Helvetica, Arial, sans-serif; font-size: .92rem; line-height: 1.45; }
.sim-cmp-row { display: grid; grid-template-columns: 7rem repeat(var(--sim-n), 1fr); border-bottom: 1px solid var(--fy-line); }
.sim-cmp-lab { padding-block: .6rem; padding-inline: 0 .4rem; font-weight: 700; color: var(--fy-text); }
.sim-cmp-cell { padding: .6rem .7rem; color: var(--fy-text); }
.sim-cmp-head { border-bottom: 1px solid var(--fy-line-strong); }
.sim-cmp-head .sim-cmp-cell { padding-top: .2rem; padding-bottom: .6rem; }
.sim-cmp-head .cap-dot { margin-inline-end: .45em; }
.sim-cmp-n { font-weight: 700; color: var(--fy-ink); }
.sim-cmp-s { display: block; font-size: .85rem; color: var(--fy-muted); font-style: italic; margin-inline-start: 1.25em; }
html[dir="rtl"] .sim-cmp { font-family: "Noto Sans Arabic", "Lato", sans-serif; }
@media (max-width: 640px) {
  .sim-cmp-row { grid-template-columns: repeat(var(--sim-n), 1fr); }
  .sim-cmp-lab { grid-column: 1 / -1; padding: .7rem 0 .1rem; }
  .sim-cmp-head .sim-cmp-lab { display: none; }
  .sim-cmp-cell { padding: .3rem .45rem .6rem; font-size: .85rem; }
  .sim-cmp-s { display: none; }
}
/* dans le volet du guide d'identification : un peu plus serré */
.fid .sim-cmp { font-size: .86rem; }
.fid .sim-cmp-row { grid-template-columns: 5.5rem repeat(var(--sim-n), 1fr); }

/* =====================================================================
   7. ARABE (RTL) — corrections de l'ouverture et de la barre
   ===================================================================== */
/* menu mobile du site (nav.css) : en arabe, le panneau replié sort par la gauche mais garde son ombre portée,
   qui déborde sur le collage blanc de l'ouverture. Ombre seulement quand le menu est ouvert. */
html[dir="rtl"] body.fy-page .mtog:not(:checked) ~ .nl { box-shadow: none; }

/* =====================================================================
   1bis. auteur du taxon dans l'ouverture (règle du site du 09/11 : discret, à côté du nom latin)
   Sur l'aplat noir, le gris du site (#8a8275 à .5em) est illisible : crème atténuée, un peu plus grand.
   ===================================================================== */
/* auteur du taxon : sur la ligne de base du nom latin, taille fixe (et non relative au <p>, trop petit), plus près du nom */
.fy-names em, .fy-names .sci-author { align-self: baseline; }
.fy-names .sci-author { font: 400 1rem/1.1 var(--font-body, Lato, sans-serif); color: rgba(244, 239, 230, .6); white-space: nowrap; margin-inline-start: -4px; }
@media (max-width: 640px) { .fy-names .sci-author { font-size: .85rem; } }

/* ---------- Guide d'identification v3 (09/11/2026) : texte d'intro, image à pastilles + critères, espèces semblables en une ligne chacune ---------- */
.fid-intro { margin: 0 0 12px; font: 400 15px/1.55 var(--font-body, Lato, sans-serif); color: var(--ink, #211E19); }
.fid-key { list-style: none; margin: 0 0 14px; padding: 0; }
.fid-key li { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line, #ebe6dc); font: 400 15px/1.45 var(--font-body, Lato, sans-serif); color: var(--ink, #211E19); }
.fid-key li:first-child { border-top: 1px solid var(--line, #ebe6dc); }
.fid-key .cap-dot { flex: none; margin: 0; transform: translateY(1px); }
.fid-key-s { font-weight: 700; }
html[dir="rtl"] .fid-key-c { unicode-bidi: plaintext; }
.fid-key-img { margin: 0; }
.fid-key-img img { display: block; width: 100%; height: auto; border-radius: var(--btn-radius, 2px); background: #fff; }
.fid-check { list-style: none; margin: 14px 0 0; padding: 0; }
.fid-check li { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; font: 400 15px/1.45 var(--font-body, Lato, sans-serif); color: var(--ink, #211E19); }
.fid-check i { flex: none; color: var(--teal, #2E6B62); font-size: 13px; }
.fid-key-t { display: flex; flex-direction: column; gap: 2px; }
.fid-key-n b { font-weight: 700; }
.fid-key-c { color: var(--muted-strong, #6d675b); font-size: 14.5px; }
.fid-key-sep { margin: 0 .3em; opacity: .6; }
.fid-key-lat { white-space: nowrap; }   /* nom latin + parenthèses d'un bloc, aussi en arabe */

/* ---------- Arabe : polices de la charte partout dans l'ouverture, la barre et le guide (09/11/2026) ----------
   Plusieurs règles de la fiche v2 fixent Lato en dur (fil d'Ariane, statuts, barre Sommaire / Guide, volet du guide) :
   en arabe le texte tombait sur la police système. Texte = Noto Sans Arabic, titres = Noto Kufi Arabic, latin = Lato. */
html[dir="rtl"] :is(.fy, .fy-bb, .etoc, .etoc-bar, .etoc-tab, .fid-drawer) :is(div, span, a, p, dt, dd, li, button, b, strong, label, figcaption, em.fy-cur) {
  font-family: "Noto Sans Arabic", "Lato", Helvetica, Arial, sans-serif;
}
html[dir="rtl"] :is(.fy-h1, .fid-dn, .fid-t) { font-family: "Noto Kufi Arabic", "Oswald", sans-serif; }
html[dir="rtl"] :is(.fy, .fid-drawer) :is(em:not(.fy-cur), .sci-author, .fid-key-lat) { font-family: "Lato", Helvetica, Arial, sans-serif; }