/* =============================================================================
   animal.css — la fiche publique d'une espece (`/{lang}/faune/{slug}`)
   =============================================================================
   CSS de PAGE et non de bloc : `.an-hero`, `.an-where` et `.an-dock` n'existent que
   sur cette fiche. Les trois sections qu'elle partage — le portrait, la grille de
   voyages, le bandeau de charte — reutilisent le CSS des blocs `pg_bloc`, `depforts`
   et `band_img`, charges par le controleur. Rien n'en est recopie ici.

   Repris de la maquette figee, en QUATRE endroits dispersés, bornes CALCULEES :
   · `style.css` l. 2648-2741  — la section « FICHE ANIMAL » en entier ;
   · `style.css` l. 1754-1769  — le bloc « contact specialiste », a 900 lignes de la,
     sous un titre qui parle de la fiche voyage ;
   · `mobile.css`              — ONZE regles dispersees en HUIT endroits, extraites une
     par une avec leur @media d'origine, jamais par plage.

   ⚠️⚠️ UNE PREMIERE BORNE MOBILE AVAIT ETE PRISE « AU JUGE » (l. 1716-1760) ET ELLE
   ETAIT FAUSSE : elle attrapait `.cfiche__back` et le panneau d'especes de la fiche
   pays, deux sujets voisins et sans rapport. Les regles d'une meme classe ne sont pas
   contigues dans `mobile.css` — ici elles vont de la l. 527 a la l. 1794. Extraire par
   plage est commode et faux ; extraire par REGLE, en remontant au `{` et en comptant
   les accolades jusqu'au `}`, est la seule methode sure.

   ⚠️ `#anVoyGrid` DE LA MAQUETTE EST DEVENU `#voyages .depforts__grid` : elle cible un
   identifiant que son JS pose, que notre balisage n'emet pas, et que nous n'avons
   aucune raison d'inventer. Notre section porte `id="voyages"` — la regle s'y accroche.

   ⚠️ `.an-where__grid` lit `--cols`, pose PAR LA VUE : le nombre de colonnes s'adapte au
   nombre de pays (4 si peu, jusqu'a 6 si beaucoup). La maquette le calcule en JS ; nous
   le connaissons au rendu, donc nous l'ecrivons.

   ⚠️ NE PAS ECRIRE LES SEQUENCES DE COMMENTAIRE EN TOUTES LETTRES DANS CE CARTOUCHE :
   un fermant ecrit dans un commentaire le clot sur place, et le comptage d'equilibre
   ne le voit pas. Paye le 2026-10-07 sur `blocs/stackv.css`.
   ============================================================================= */

/* ==========================================================================
   FICHE ANIMAL (Nicolas 07/15) — hero photo animalière + nom/latin/famille/mini-fiche.
   Réutilise .pg-bloc / .depforts__grid / .vf-contact / .py-nav pour les sections.
   ========================================================================== */
.an-hero{ position:relative; min-height:80vh; display:flex; align-items:center; overflow:hidden;
  padding:clamp(90px,12vh,140px) 0 clamp(40px,6vh,72px); }
.an-hero__bg{ position:absolute; inset:0; background:#241d12 center/cover no-repeat; z-index:0; }
.an-hero__veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,10,.88) 0%, rgba(10,10,10,.5) 45%, rgba(10,10,10,.15) 100%); }
.an-hero__inner{ position:relative; z-index:2; color:var(--blanc); width:100%;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:clamp(24px,4vw,64px); }
/* colonne gauche : TOUT aligné à gauche sur le même axe (eyebrow, titre, latin, famille) */
.an-hero__left{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.an-hero__eyebrow{ color:var(--jaune); }
.an-hero__title{ font-size:clamp(44px,7vw,92px); line-height:1.02; color:var(--blanc); margin:2px 0 6px; }
.an-hero__latin{ font-style:italic; font-size:clamp(18px,2.4vw,26px); color:rgba(255,255,255,.8); margin:0 0 16px; }
.an-hero__latin[hidden]{ display:none; }
.an-hero__fam{ margin-bottom:8px; }
/* icône + libellé SUR UNE LIGNE (nom à droite de l'icône), ferré à gauche.
   Picto STRICTEMENT identique au planisphère (.family__ico) : 46px cercle, svg 40px, même écriture. */
.an-hero__fam .cpanel__fam{ display:inline-flex; flex-direction:row !important; align-items:center; gap:14px; color:var(--blanc); }
.an-hero__fam .family__ico{ width:46px; height:46px; flex:0 0 auto; border-radius:50%; display:grid;
  place-items:center; background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.5); margin:0; }
.an-hero__fam .family__ico svg{ width:40px; height:40px; fill:currentColor; }
.an-hero__fam .family__label{ font-size:var(--fs-label); font-weight:600; line-height:1.2; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.95); white-space:nowrap; }
/* OÙ L'OBSERVER : panneau noir semi-transparent à droite du hero, GRAND et aéré, grille modulaire
   de pays (silhouette AU TRAIT BLANC + nom dessous, cliquable). Séparateurs = filets fins qui NE se
   rejoignent PAS au centre (petit espace), obtenus par des pseudo-éléments raccourcis. */
/* le panneau s'ADAPTE au nombre de pays : largeur = colonnes réelles (pas de vide), contenu centré.
   width:max-content -> la boîte prend juste la largeur de sa grille (1 pays = 1 carte de large). */
.an-where{ width:max-content; max-width:58vw; background:rgba(10,10,10,.5); backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.15); border-radius:20px; padding:24px 28px; }
.an-where[hidden]{ display:none; }
.an-where__lbl{ font-size:var(--fs-label); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin:0 0 16px; text-align:center; }
/* colonnes de LARGEUR FIXE (une carte) -> 1 pays = 1 colonne, 3 pays = 3 colonnes, etc. Centré. */
.an-where__grid{ display:grid; grid-template-columns:repeat(var(--cols,4), 116px); justify-content:center; }
.an-where__item{ position:relative; display:flex; flex-direction:column; align-items:center; gap:12px;
  text-decoration:none; color:var(--blanc); padding:16px 14px; transition:color .2s; }
.an-where__item:hover{ color:var(--jaune); }
/* filets séparateurs raccourcis (petit espace au centre) ; masqués sur les bords/dernière ligne via .is-edge (JS) */
.an-where__item::after{ content:""; position:absolute; top:14%; bottom:14%; right:0; width:1px;
  background:rgba(255,255,255,.14); }
.an-where__item::before{ content:""; position:absolute; left:14%; right:14%; bottom:0; height:1px;
  background:rgba(255,255,255,.14); }
.an-where__item.is-lastcol::after{ display:none; }   /* pas de filet vertical à droite de la dernière colonne */
.an-where__item.is-lastrow::before{ display:none; }  /* pas de filet horizontal sous la dernière ligne */
.an-where__map{ width:100%; aspect-ratio:1/1; max-width:76px; display:grid; place-items:center; color:var(--blanc); }
.an-where__map svg{ width:100%; height:100%; }
.an-where__map svg path{ fill:none; stroke:var(--blanc); stroke-width:1.4; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.an-where__item:hover .an-where__map svg path{ stroke:var(--jaune); }
.an-where__nom{ font-size:var(--fs-small); font-weight:600; text-align:center; line-height:1.25; }
.an-hero__back{ position:absolute; top:calc(112px + 16px); left:50%; transform:translateX(-50%); z-index:3; }
@media (max-width:860px){
  .an-hero__inner{ grid-template-columns:1fr; align-items:start; }
  .an-where{ max-width:100%; }
}

/* FRISE D'ESPÈCES « dock Mac » (Nicolas 07/15) : traits verticaux resserrés sur toute la largeur ;
   au survol l'effet dock agrandit + un LABEL UNIQUE glisse et se met à jour ; courante = trait jaune.
   Libellé « Parcourir les espèces » à gauche. */
.an-dockwrap{ position:relative; display:flex; align-items:flex-end; gap:20px; background:var(--noir);
  color:var(--blanc); padding:0 clamp(16px,3vw,44px); height:70px; }
/* la frise (rail) est clippée en X pour ne pas décaler la page ; la bulle, elle, peut monter au-dessus */
.an-dock{ overflow:visible; }
/* libellé aligné sur le BAS des barres (même ligne de base que le padding-bottom du rail) */
.an-dock__title{ flex:0 0 auto; font-size:var(--fs-label); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.55); white-space:nowrap; line-height:1;
  padding-bottom:16px; }
.an-dock{ position:relative; flex:1 1 auto; min-width:0; height:100%; }
.an-dock__rail{ display:flex; align-items:flex-end; justify-content:space-between; gap:2px; height:100%;
  padding-bottom:16px; }
.an-dock__item{ position:relative; flex:1 1 0; min-width:0; display:flex; justify-content:center;
  align-items:flex-end; height:44px; text-decoration:none; }
/* le TRAIT : hauteur croît avec --w (0..6) posé par le JS selon la distance au curseur */
.an-dock__bar{ width:2px; height:calc(16px + var(--w,0) * 5px); border-radius:2px;
  background:rgba(255,255,255,.4); transition:height .1s linear, background .15s; }
.an-dock__item:hover .an-dock__bar{ background:var(--blanc); }
.an-dock__item.is-current .an-dock__bar{ background:var(--jaune); width:3px; height:calc(30px + var(--w,0) * 5px); }
/* LABEL FLOTTANT unique : suit le curseur (left posé en JS), affiche le nom du trait le plus proche */
.an-dock__float{ position:absolute; bottom:58px; z-index:2; transform:translateX(-50%); white-space:nowrap;
  font-size:var(--fs-label); font-weight:700; color:var(--noir); background:var(--jaune);
  border-radius:8px; padding:5px 12px; opacity:0; pointer-events:none;
  box-shadow:0 6px 18px rgba(0,0,0,.35); transition:opacity .15s; }   /* PAS de transition sur left -> suit le curseur sans lag */
.an-dock__float.is-on{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .an-dock__bar, .an-dock__float{ transition:none; } }
@media (hover:none){ .an-dock__rail{ overflow-x:auto; } .an-dock__float{ display:none; } }
/* VOYAGES AU-DELÀ DES SIX PREMIERS (D170) : une seconde grille, née `hidden`, que le bouton
   dévoile (js/pages/animal.js). ⚠️ `.depforts__grid` est en `display:grid` d'auteur, qui
   l'emporterait sur l'attribut `hidden` : sans la règle `[hidden]`, tout serait visible. */
#voyages .an-voy__suite{ margin-top:clamp(20px,2.5vw,32px); }
#voyages .an-voy__suite[hidden],
#voyages .an-voy__plus[hidden]{ display:none; }
.an-voy__plus{ text-align:center; margin-top:clamp(28px,3vw,40px); }
/* grille de voyages de la fiche animal : CENTRÉE (1 ou 2 voyages ne sont plus ferrés à gauche).
   colonnes de largeur fixe -> le bloc se centre quel que soit le nombre de cartes. */
#voyages .depforts__grid{ grid-template-columns:repeat(auto-fit, minmax(280px, 340px)); justify-content:center; }
@media (max-width:900px){ .an-hero__id{ grid-template-columns:1fr 1fr; } }

/* ⚠️ `.vf-contact*` A QUITTE CE FICHIER LE 2026-10-07 pour `css/blocs/vf-contact.css`.
   Motif : il a DEUX consommateurs — cette page et la fiche destination —, et tant qu'il
   vivait ici la fiche destination l'emettait SANS AUCUN STYLE, `animal.css` n'y etant pas
   charge. C'est la regle d'or du guide de decoupe (« jamais de styles de bloc dans un
   fichier page-specific »), et aucun des deux scripts ne pouvait le voir : le geste 1
   demande si la classe a une regle, jamais si elle en a une SUR LA PAGE qui l'emploie.
   ⚠️ Ne pas la ramener ici « pour l'avoir sous la main » : la fiche voyage, d'ou le
   composant vient, en sera le troisieme consommateur. */

/* ---------------------------------------------------------------------------
   MOBILE — onze regles, huit endroits, regroupees par media d'origine.
   --------------------------------------------------------------------------- */

@media (max-width:1024px){
  /* ⚠️ la part `.vf-contact__grid > *` de cette regle mixte est partie avec le composant,
     dans `css/blocs/vf-contact.css`. Les trois autres grilles appartiennent a la fiche
     voyage, non decoupee : elles reviendront avec elle. */
  .an-hero__back{ display:none; }
  .an-where{ margin-inline:auto; padding:18px 20px; }
  /* ⚠️⚠️ `--cols-mob` ET NON `--cols` : la maquette PLAFONNE le nombre de colonnes a 3
     sur telephone (`mobile.js:863`, `Math.min(orig, 3)`). Sans ce plafond, une espece
     presente dans 14 pays demande 5 colonnes de 84 px, soit 420 px — le panneau deborde
     de l'ecran et se trouve rogne a droite. Defaut trouve par Alexandre sur son telephone.
     ⚠️ AUCUN DES TROIS CONTROLES NE POUVAIT LE VOIR : ce n'est pas une classe absente ni
     une regle manquante, c'est la VALEUR d'une variable. Les scripts comparent des
     selecteurs, jamais ce qu'on y met.
     ⚠️ Pose par la VUE et non par du JS : nous connaissons le nombre de pays au rendu. Un
     plafond calcule au chargement ferait sauter la grille a la premiere image. */
  .an-where__grid{ grid-template-columns:repeat(var(--cols-mob,3), 84px); gap:0 4px; }
  .an-where__map{ max-width:56px; }
  .an-where__nom{ font-size:12px; }
  .an-where__item{ padding:10px 6px; }
  /* ⚠️⚠️ LA FRISE DISPARAIT SOUS 1024 PX, ET LA MAQUETTE LA REMPLACE — nous PAS ENCORE.
     Elle masque le dock parce qu'il est « mort au doigt » (l'effet de loupe demande un
     survol), et lui substitue un bouton « Chercher un autre animal » qui ouvre un
     repertoire alphabetique en panneau coulissant (`mobile.js:869-900`).
     ⚠️ Ce panneau est `buildOffCanvasPanel()`, LE MEME composant que les filtres du
     catalogue. Le porter maintenant reviendrait a le dimensionner sur un seul de ses deux
     consommateurs puis a le confronter a l'autre — mot pour mot l'argument qui a fait
     differer le moteur d'apparition et la carte `.trip`. Il se portera AVEC `offres`.
     ⚠️ En attendant, la consequence est BORNEE et il faut la connaitre : sur telephone,
     cette fiche n'offre aucun moyen de passer a une autre espece. La page reste entiere,
     c'est une commodite qui manque. Ne pas « reparer » en retirant ce `display:none` :
     83 traits de 1 px sans libelle flottant sont illisibles au doigt — ce serait remplacer
     une absence franche par quelque chose qui a l'air de marcher.
     ⇒ Inscrit au registre du reste-a-faire. */
  .an-dockwrap{ display:none; }
}

@media (hover:none){
  .an-dock__item:hover .an-dock__bar{ background:inherit; }
  .an-where__item:hover{ color:inherit; }
  .an-where__item:hover .an-where__map svg path{ stroke:inherit; }
}