/* ⚠️⚠️ UNE REGLE DE LA SOURCE PORTAIT LE `}` DE SA @media SUR LA MEME LIGNE, et
   l'extraction l'a emporte avec elle : le bloc `@media (max-width:1024px)` se refermait
   donc UNE REGLE TROP TOT, et les suivantes passaient au niveau global — elles se
   seraient appliquees sur GRAND ECRAN. Le CSS restait valide, et aucune des 198 lignes ne
   le montrait a la lecture.
   ⇒ C'est le comptage d'accolades HORS COMMENTAIRES qui l'a sorti : 87 ouvrantes pour 88
     fermantes, puis un balayage de profondeur pour la localiser. Un desequilibre d'UNE
     accolade sur 175 ne se voit pas autrement.
   ⇒ Et le geste 3 revu du 07/10 ne l'aurait PAS attrape : il regarde les commentaires, pas
     les accolades de regles. Les deux controles sont complementaires, pas redondants. */
/* =============================================================================
   pays.css — la fiche publique d'une destination (`/{lang}/destinations/{slug}`)
   =============================================================================
   CSS de PAGE : `.cfiche`, `.cpanel`, `.py-id`, `.py-quand` et `.py-culture`.
   ⚠️ `.vf-info` EN EST SORTI le 2026-10-07 pour `css/blocs/vf-info.css` : la fiche voyage en
   est le deuxieme consommateur (regle d'or, D141). Les regles `#vfInfosGrid` et `.voy-conseil`
   qui vivaient ici etaient MORTES — ni l'un ni l'autre n'existe sur la fiche pays ; elles sont
   desormais dans `pages/voyage.css`, ou elles servent.
   n'existent que sur cette fiche. Les cinq sections qu'elle partage — descriptif, especes,
   voyages, jalons, bandeau — reutilisent le CSS des blocs `pg_bloc`, `pg_dest`, `depforts`,
   `pg_jalons` et `band_img`, charges par le controleur. Rien n'en est recopie ici.

   ⚠️⚠️ EXTRAIT REGLE PAR REGLE, JAMAIS PAR PLAGE, et c'est la lecon du 07/10 appliquee :
   ces classes occupent VINGT-QUATRE endroits dispersés dans les deux feuilles de la
   maquette — de la l. 734 a la l. 2760 dans `style.css`, de la 453 a la 1984 dans
   `mobile.css`. Une extraction par plages aurait attrape des voisins sans rapport ou
   perdu des regles isolees. Chaque regle a ete prise de son selecteur a son accolade
   fermante, avec le `@media` qui l'englobe reellement.
   ⚠️ Le suivi des `@media` par profondeur d'accolades a du etre repris : une premiere
   version attribuait 21 regles globales a un `prefers-reduced-motion`, ce qui etait
   manifestement faux — un resultat absurde se verifie, il ne se recopie pas.

   ⚠️ `.cpanel` EST LE PANNEAU DU PLANISPHERE, et la maquette le dit en toutes lettres
   (« COMPOSITION STRICTEMENT IDENTIQUE a l'ancienne vue pays du planisphere »). Son CSS
   vit donc ici tant que le planisphere n'est pas porte (D56) — le jour ou il le sera, ces
   regles devront MONTER dans `components.css`, pas etre dupliquees.

   ⚠️ 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 07/10 sur `blocs/stackv.css`.
   ============================================================================= */

.cpanel{
  position:fixed; inset:0; pointer-events:none; visibility:hidden;
  transition:visibility 0s linear .55s;   /* masqué après la fermeture du cercle */
}
.cpanel.show{ pointer-events:auto; visibility:visible; transition:visibility 0s; }
.cpanel__photo{
  position:fixed; inset:0; z-index:60;
  background:#241d12 center/cover no-repeat;
  /* RÉVÉLATION EN CERCLE : le cercle part du coin HAUT-GAUCHE (at 0% 0%) avec un rayon nul, puis
     s'étend en diagonale jusqu'à couvrir tout l'écran. clip-path animé = GPU, rapide, élégant. */
  opacity:1;
  clip-path:circle(0% at 0% 0%);
  will-change:clip-path;
  transition:clip-path .55s cubic-bezier(.4,0,.2,1);
}
.cpanel.show .cpanel__photo{ clip-path:circle(150% at 0% 0%); }   /* 150% = couvre le coin bas-droite */
.cpanel.is-settled .cpanel__photo{ will-change:auto; transition:none; }
.cpanel__photo::after{ content:""; position:absolute; inset:0;
  /* dégradé : assombrit la MOITIÉ GAUCHE + le bas, pour la lisibilité du bloc texte où qu'il soit */
  background:
    linear-gradient(to top, rgba(14,14,14,.78) 0%, rgba(14,14,14,.34) 40%, rgba(14,14,14,0) 70%),
    linear-gradient(to right, rgba(14,14,14,.62) 0%, rgba(14,14,14,.20) 40%, rgba(14,14,14,0) 66%); }
.cpanel__body{
  position:fixed; left:0; right:auto; top:0; bottom:auto; width:min(620px,52%); z-index:80; color:var(--blanc);
  display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:12px;
  /* titre calé sur la MÊME marge gauche que la forme du pays (COL_LEFT=96px dans pays.js) : dégage
     la flèche de navigation et donne un espace gauche équilibré. Padding droit conservé. */
  padding:0 clamp(30px,5vw,80px) 0 96px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .5s var(--ease), visibility 0s linear .5s;
}
.cpanel.show .cpanel__body{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .5s var(--ease), visibility 0s; }
.cpanel__body .eyebrow{ color:rgba(255,255,255,.7); }
.cpanel__title{ font-size:clamp(40px,4.6vw,68px); line-height:1; margin:0; }
.cpanel__fams{ display:flex; flex-wrap:nowrap; gap:10px 14px; }
.cpanel__fam{ display:inline-flex; flex-direction:column; align-items:center; gap:7px; width:72px; text-align:center; }
.cpanel__fam .family__ico{
  width:54px; height:54px; flex:0 0 auto; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.55); color:var(--blanc);
}
.cpanel__fam .family__ico svg{ width:46px; height:46px; }
.cpanel__fam .family__label{
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(255,255,255,.95); line-height:1.2; white-space:normal;
}
.cpanel__trips{
  position:fixed; left:38%; right:clamp(24px,3vw,56px); top:50%; transform:translateY(-50%); z-index:80;
  pointer-events:none;
  display:flex; flex-direction:column; align-items:stretch; gap:18px;
  visibility:hidden; transition:visibility 0s linear .8s;
}
.cpanel.show .cpanel__trips{ visibility:visible; pointer-events:auto; transition:visibility 0s; }
.cpanel__trips .trips__head{
  margin:0; text-align:center;
  font-size:var(--fs-label); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.9);
}
.trips__row{ display:flex; justify-content:center; gap:clamp(16px,1.8vw,30px); align-items:stretch; }
.cpanel__trips .trips__row .trip{ flex:1 1 0; max-width:360px; }
.cpanel__trips .trip{
  border:1.5px solid rgba(255,255,255,.55);
  box-shadow:0 22px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.12);
}
.cpanel__trips .trip:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,.85);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.2);
}
.cfiche{ position:relative; height:80vh; min-height:600px; overflow:hidden; background:#241d12; color:var(--blanc); }
.cfiche .cpanel,
.cfiche .cpanel__photo,
.cfiche .cpanel__body,
.cfiche .cpanel__trips,
.cfiche__shape{ position:absolute; }

/* ==== LA FORME DU PAYS ====
   Port de `#countryShape` (style.css:714-727) + `.cfiche #countryShape` (:1515). Deux ecarts
   assumes, tous deux dans le meme sens — remplacer un calcul JS par du CSS :
   (a) LE SELECTEUR EST UNE CLASSE. La maquette vise un `id`, que notre convention interdit
       (les vues emettent `id="section-N"`). Consequence a ne pas rater : les regles portees
       sous `#countryShape` ne mordent PAS tant qu'elles ne sont pas renommees, et rien ne le
       signale — c'est ce qui est arrive ici, la forme sortant sans taille ni filet.
   (b) LA BOITE EST DIMENSIONNEE EN CSS. `pays.js:place()` calcule `left/top/width/height` en
       pixels depuis une echelle approchee sur la largeur du planisphere, puis decale le bloc
       texte de `TXT_GAP` sous la forme. Ici `--forme-h` fait les deux : la hauteur de la
       forme ET le decalage du texte. Une seule valeur, donc pas de derive possible.
   ⚠️ `--forme-top` et `--forme-h` sont lues par DEUX regles. Les modifier en place, jamais
      recopier leur valeur ailleurs. */
/* ⚠️ `--forme-h` REPREND LA FORMULE DE `pays.js`, elle ne l'approxime pas. Son `place()`
   calcule `zoneH = 80vh - HEADER_H - TOP_MARGIN - BOT_MARGIN` (112 / 24 / 24), puis, pour une
   forme plus haute que large, `shapeMaxH = zoneH * 2/3 - TXT_GAP` (28). Tout cela s'exprime en
   CSS, et c'est ce qu'il fallait faire d'emblee : mon `clamp(170px, 30vh, 300px)` initial
   plafonnait a 300 px la ou la maquette donne ~400 px sur un ecran de 1000 px de haut — une
   silhouette visiblement plus petite, et un bloc titre remonte d'autant.
   ⚠️ La maquette a une SECONDE formule pour les formes plus LARGES que hautes (elle les cale
   au milieu de la zone). Elle n'est pas reprise : le `max-width` ci-dessous les borne de toute
   facon, et deux formules en CSS pour un ecart de quelques pixels se paieraient a la premiere
   relecture. Ecart assume, pas un oubli. */
.cfiche{
  --forme-top:calc(var(--nav-h) + 24px);
  --forme-h:calc((80vh - var(--nav-h) - 48px) * 0.6667 - 28px);
}
.cfiche__shape{
  display:block; z-index:70; pointer-events:none; overflow:visible;
  /* 96px = `COL_LEFT` de pays.js, la meme marge que le padding gauche de `.cpanel__body`. */
  left:96px; top:var(--forme-top);
  height:var(--forme-h); width:auto; aspect-ratio:var(--ratio, 1);
  /* plafond de largeur : la colonne s'arrete avant les vignettes (`.cpanel__trips{left:38%}`),
     avec la meme gouttiere de 40px que le `RIGHT_GUTTER` de la maquette. */
  max-width:calc(38% - 40px - 96px);
}
.cfiche__shape svg{ display:block; width:100%; height:100%; }
.cfiche__shape path{
  fill:rgba(255,255,255,.10);                 /* voile leger : la photo traverse la forme */
  stroke:var(--blanc); stroke-width:2px; vector-effect:non-scaling-stroke;
  stroke-linejoin:round; stroke-linecap:round;
}
/* LE BLOC TEXTE EST COLLE SOUS LA FORME — `TXT_GAP = 28` dans pays.js. C'est la seconde
   lectrice de `--forme-h` : la regle que `bodyEl.style.top` tenait en JS. */
.cfiche .cpanel__body{ top:calc(var(--forme-top) + var(--forme-h) + 28px); }
.cfiche__back{ position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(20px,3vh,36px); z-index:90; }
.cfiche__back:hover{ transform:translateX(-50%) translateY(-3px); }
/* LES ESPÈCES PHARES EN CRÈME SUR CETTE PAGE SEULE (fond blanc dans `pg-dest.css`) : les
   voyages remontés sous le bandeau (sprint 2026-11-12 n° 3) ont décalé l'alternance —
   voyages crème, descriptif blanc (`pg-bloc--blanc`), espèces crème, quand partir blanc.
   ⚠️ Ici et non dans `pg-dest.css` : le bloc sert d'autres pages, où il reste blanc. */
.cfiche ~ .pg-dest{ background:var(--creme); }
.py-quand{ background:var(--blanc); }
.py-mois{ display:grid; grid-template-columns:repeat(12, 1fr); gap:6px; }
.py-mois span{ text-align:center; font-size:var(--fs-label); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--noir-50); padding:14px 0; border-radius:3px;
  background:var(--creme); border:1px solid var(--creme-2); }   /* angles droits : informatif */
.py-mois span.is-on{ background:var(--jaune); border-color:var(--jaune); color:var(--noir); font-weight:700; }
.py-mois__note{ margin-top:14px; text-align:center; font-size:var(--fs-label); color:var(--noir-50); }
.cfiche .cpanel__photo{ position:absolute; inset:-30% 0 0 0; will-change:transform; }
.py-culture, .band-img{ position:relative; overflow:hidden; }   /* overflow = la « fenêtre découpée » */
.py-culture__bg, .band-img__bg{ position:absolute; left:0; right:0; top:0; height:100vh;
  transform:translateY(var(--fix-y, 0px)); will-change:transform;
  background:#241d12 center/cover no-repeat; }
.py-culture__veil, .band-img__veil{ position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(14,14,14,.74) 0%, rgba(14,14,14,.45) 48%, rgba(14,14,14,.12) 100%); }
.py-culture__inner, .band-img__inner{ position:relative; z-index:1; max-width:620px;
  padding:clamp(90px,12vw,170px) 0; }
.py-culture .eyebrow, .band-img .eyebrow{ color:var(--jaune); }
.py-culture__titre, .band-img__titre{ color:var(--blanc); text-align:left; margin:12px 0 20px; }
.py-culture__inner p:not(.eyebrow), .band-img__inner p:not(.eyebrow){ color:rgba(255,255,255,.86);
  font-size:var(--fs-body); line-height:1.7; margin-bottom:16px; }
.py-culture__inner strong, .band-img__inner strong{ color:var(--blanc); }
/* ⚠️ UNE REGLE `.an-hero__fam` A VECU ICI JUSQU'AU 2026-10-07, recopiee par erreur a
   l'extraction : `.an-hero__fam` est le bandeau de famille de la fiche ESPECE, il n'existe
   sur aucune page qui charge ce fichier. Elle etait donc morte ici et VIVANTE dans
   `animal.css`, ou elle est a sa place. Ne pas la remettre « au cas ou » : une regle
   dupliquee dans deux fichiers de page diverge au premier correctif.
 */
.py-id{ display:grid; grid-template-columns:repeat(5, 1fr); gap:2px; margin-top:clamp(28px,3.4vw,54px);
  background:var(--blanc); border:1px solid var(--creme-2); border-radius:18px; overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.06); }
.py-id > div{ padding:20px 22px; text-align:center; border-right:1px solid var(--creme-2); }
.py-id > div:last-child{ border-right:none; }
.py-id dt{ font-size:var(--fs-label); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--noir-50); margin-bottom:6px; }
.py-id dd{ font-size:var(--fs-small); font-weight:600; color:var(--noir); margin:0; }
#infos-pratiques .vf-info__ico svg{ fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }

/* ⚠️ 760 PX — LE QUATRIEME POINT DE RUPTURE DE CETTE PAGE (`style.css:2386`), et il
   manquait. Sans lui les douze mois gardent leurs douze colonnes : a 390 px chaque case
   fait 26 px, mais « JANV. » n'y tient pas, et une piste `1fr` ne descend jamais sous la
   largeur minimale de son contenu — la grille force donc la page a ~480 px de large et
   TOUT le contenu se trouve rogne a droite, pas seulement les mois.
   ⚠️ C'est le MEME defaut d'extraction que `.py-id` ci-dessous, a trois lignes d'ecart :
   la derniere ligne de la plage, celle qui porte le `@media`, perdue deux fois. Les
   bornes se CALCULENT. */
@media (max-width:760px){
  .py-mois{ grid-template-columns:repeat(6, 1fr); }
}

/* ⚠️ 900 PX, ET NON 1024 : c'est le point de rupture propre a la carte d'identite
   (`style.css:2751`), et cette page en compte donc TROIS — 900 ici, 980 pour `.vf-contact`,
   1024 pour le hero. Les harmoniser « pour faire pareil » est exactement l'erreur deja
   commise deux fois. Ces deux lignes sont arrivees sans leur `@media` a l'extraction : la
   seconde s'appliquait donc en desktop, ou elle retirait les separateurs verticaux des cinq
   cases, et la premiere manquait — le quadrillage restait a cinq colonnes sur telephone. */
@media (max-width:900px){
  .py-id{ grid-template-columns:1fr 1fr; }
  .py-id > div{ border-right:none; border-bottom:1px solid var(--creme-2); }
}

@media (max-width:1024px){
  .cfiche{ height:80dvh; }
  .py-culture__bg, .band-img__bg{ height:100dvh; }
  .cpanel__trips{ display:none; }
  .cfiche{ height:auto; min-height:0; display:flex; flex-direction:column; overflow:visible; }
  .cfiche .cpanel{ position:relative; inset:auto; visibility:visible; pointer-events:auto; }
  .cfiche .cpanel.show{ transition:none; }   /* l'apparition en cercle n'a de sens que plein écran (desktop) */
  .cfiche .cpanel__photo{ clip-path:none; opacity:1; }   /* révélation en cercle impossible dans une bande courte : photo visible d'emblée */
  .cfiche .cpanel__photo::after{
    /* dégradé pensé pour une photo PLEINE LARGEUR de texte (plus de "moitié gauche" à assombrir) */
    background:linear-gradient(to top, rgba(14,14,14,.86) 0%, rgba(14,14,14,.55) 55%, rgba(14,14,14,.15) 100%);
  }
  .cfiche .cpanel__body{
    position:relative; inset:auto; width:100%; opacity:1; visibility:visible; pointer-events:auto;
    padding:calc(var(--nav-h) + 28px) clamp(20px,5vw,32px) 28px;
    gap:10px;
  }
  .cpanel__title{ font-size:clamp(30px,8vw,44px); }
  .cpanel__fams{ flex-wrap:wrap; gap:8px 12px; }
  /* ---- Bande 2 : la forme SEULE, sur fond uni sombre (.cfiche garde son background) ----
     ⚠️ `aspect-ratio:auto` ANNULE le rapport du desktop : la boite redevient CARREE, et c'est
     `preserveAspectRatio="xMidYMid meet"` du `<svg>` qui centre la forme dedans sans la
     deformer. L'oublier donnerait une boite au rapport du pays dans une bande centree —
     correct pour la Namibie, trop large pour le Chili. */
  .cfiche__shape{
    position:relative; left:auto; top:auto; inset:auto;
    display:block; width:min(72vw,260px); height:min(72vw,260px); aspect-ratio:auto;
    max-width:none; margin:24px auto 40px;
  }
  /* le bloc texte reprend le flux : le decalage calcule sous la forme n'a plus d'objet */
  .cfiche .cpanel__body{ top:auto; }
  .cfiche__back{ display:none; }
}

@media (hover:none){
  .cfiche__back:hover{ transform:translateX(-50%); }
}


/* ---------------------------------------------------------------------------
   SURCHARGES DE CONTEXTE SUR DES CLASSES DE BLOC
   ---------------------------------------------------------------------------
   ⚠️ La maquette accroche ces regles a des IDENTIFIANTS que son JS pose et que notre
   balisage n'emet pas : `#pyEspGrid` pour la bande d'especes, `#pyVoyGrid` pour la grille
   de voyages. Nos sections portent `id="especes"` et `id="voyages"` — les regles s'y
   accrochent, meme patron que `#anVoyGrid` sur la fiche espece.
   ⚠️ Elles ne pouvaient PAS sortir de l'extraction automatique : leur classe appartient au
   bloc `pg_dest`, volontairement exclu du motif pour ne pas recopier le bloc entier. C'est
   le geste 1 qui les a reclamees, en signalant `pg-dest__item--link` sans regle.
   --------------------------------------------------------------------------- */
#especes .pg-dest__item--link{ cursor:pointer; }
#especes .pg-dest__item--link:hover span:last-child{ color:var(--jaune-d); }
#especes .pg-dest__item--link:hover .pg-dest__pic{ box-shadow:0 0 0 3px var(--jaune); }

/* ==========================================================================
   ÉCRAN LARGE — LES CARTES DE VOYAGES NE PASSENT PLUS SOUS LE BOUTON NI SOUS L'EN-TÊTE
   (sprint 2026-11-09 n° 6, point 1 — même famille que le bouton de la fiche
   accompagnateur, signalé par la cliente sur celle-ci).

   Mesuré avant correctif, en 1440×700 : « ← Retour à la carte » recouvrait le bouton
   « Voir le voyage » de la première carte, et le haut des cartes (« NOS VOYAGES »)
   passait sous l'en-tête fixe. Défaut de la maquette, repris tel quel.
   Cause : le bloc des voyages (~575 px) était CENTRÉ en absolu (`top:50%` +
   `translateY(-50%)`) dans un bandeau de 80vh, et le bouton collé en bas AU MILIEU —
   donc dans la colonne des cartes. Le bandeau ne voyait pas les cartes et ne grandissait
   pas pour elles : sous ~950 px de haut d'écran, elles débordaient en haut et en bas.

   ⇒ Le bloc des voyages revient DANS LE FLUX de `.cpanel`, centré verticalement dans
     la zone comprise entre l'en-tête et la zone du bouton. Le bandeau garde son 80vh
     (et son plancher de 600 px) mais GRANDIT quand les cartes ne tiennent pas.
     Le reste ne bouge pas : la photo, la silhouette et le bloc titre restent en absolu,
     calés sur le haut de `.cfiche` comme avant.
   ⚠️ La zone basse réserve : le décalage du bouton (`bottom` de `.cfiche__back`), sa
     hauteur (~52 px, arrondie à 56) et 24 px d'écart. Si le bouton change de taille,
     la reprendre : elle recopie ses valeurs, elle ne les lit pas.
   ⚠️ Limité à l'écran large : sous 1024 px les cartes sont masquées et le bouton aussi
     (règles plus haut), le bandeau y est déjà dans le flux.
   ========================================================================== */
@media (min-width:1025px){
  .cfiche{ height:auto; min-height:max(80vh, 600px); display:flex; }
  .cfiche .cpanel{
    position:relative; inset:auto; flex:1 1 auto;
    display:flex; align-items:center;
    padding:calc(var(--nav-h) + 24px) clamp(24px,3vw,56px)
            calc(clamp(20px,3vh,36px) + 56px + 24px) 38%;
  }
  .cfiche .cpanel__trips{ position:relative; left:auto; right:auto; top:auto; transform:none; width:100%; }
}

/* « Aucun voyage » de la fiche destination. ⚠️ Cette règle vivait dans `pages/animal.css`, que
   la fiche destination ne charge pas : le message y sortait sans style. Déplacée ici le
   2026-11-09, quand la fiche animal a cessé de l'employer (D170 : sans voyage, sa section
   n'est plus rendue). */
.an-voy__empty{ text-align:center; color:var(--noir-50); font-size:var(--fs-body); margin-top:20px; }
.an-voy__empty a{ color:var(--jaune-d); text-decoration:underline; }