/* ============================================================
   HolaNinos · refonte du 23 aout 2026
   Chargee EN DERNIER. Elle corrige ce que styles-v2.css avait
   dimensionne pour des emojis, et pose la navigation de bureau.
   Aucune regle metier n'est touchee.
   ============================================================ */

/* ---------- Le jeu d'icones, une taille par contexte ---------- */
.meta .ico,.card .src .ico{width:14px;height:14px}
.m-row .ic .ico{width:18px;height:18px}
.qbtn .qi .ico{width:20px;height:20px}
.qbtn .qi{font-size:0;line-height:0;display:block;color:var(--br-500)}
.verified .vi .ico{width:15px;height:15px}
.mk-card .mk-em{font-size:0;line-height:0;flex:none;color:var(--br-500)}
.mk-card .mk-em .ico{width:34px;height:34px}
.gu .em{font-size:0;line-height:0;color:var(--br-500)}
.gu .em .ico{width:20px;height:20px}
.stamp .se{font-size:0;line-height:0;opacity:.35;filter:none;color:var(--encre)}
.stamp .se .ico{width:22px;height:22px}
.stamp.got .se{opacity:1;color:var(--br-500)}
.pass-row .em{font-size:0;line-height:0;color:var(--br-500)}
.pass-row .em .ico{width:18px;height:18px}
.maplegend .lg .ico{display:none}
.pl-em{display:none}
.bottomnav button .ni{font-size:0;line-height:0;display:block}

/* La vignette d'un lieu : la meme matiere que celle d'une sortie. */
.card.place .thumb,.sheet .m-thumb{background:var(--br-wash)}
.card .thumb .ico-cat,.sheet .m-thumb .ico-cat{
  position:relative;z-index:1;opacity:.6;color:inherit;
  display:grid;place-items:center;
}
.card .thumb .ico-cat .ico{width:40px;height:40px}
.sheet .m-thumb .ico-cat .ico{width:52px;height:52px}

/* Etiquette de categorie : icone plus mot, alignes. */
.catbadge{display:inline-flex;align-items:center;gap:5px}
.catbadge .ico{width:13px;height:13px;color:var(--br-ink)}

/* Le bloc "pour vous" : une tuile d'icone, plus un carre de couleur. */
.fy-em{
  flex:none;width:38px;height:38px;border-radius:var(--r-sm);
  display:grid;place-items:center;font-size:0;
  background:var(--br-wash);color:var(--br-500);
}
.fy-em .ico{width:19px;height:19px}

/* Le favori : un coeur dessine, plein quand il est pris. */
.fav{font-size:0;line-height:0;box-shadow:var(--el-1)}
.fav .ico{width:18px;height:18px;color:var(--encre-2)}
.fav.on{background:var(--br-500)}
.fav.on .ico{color:var(--br-sur-fond)}

/* ---------- Navigation ----------
   Sur ordinateur, les sections vivent dans l'en-tete : une barre
   flottante en pilule au milieu de l'ecran n'a rien a y faire.
   Sur telephone, la barre du bas reprend la main. */
.topnav{display:none}
.topnav .navlink{
  position:relative;
  font-size:14.5px;font-weight:var(--w-medium);color:var(--doux);
  padding:9px 13px;border-radius:var(--r-sm);
  transition:color var(--d-court) var(--ease-doux),background var(--d-court) var(--ease-doux);
}
.topnav .navlink:hover{color:var(--encre);background:var(--surface-2)}
.topnav .navlink.on{color:var(--encre);font-weight:var(--w-semi)}
.topnav .navlink.on::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;
  border-radius:2px;background:var(--br-500);
}

@media(min-width:900px){
  .topnav{display:flex;align-items:center;gap:2px;margin-left:var(--sp-16)}
  .bottomnav{display:none}
  body{padding-bottom:0}
}
@media(max-width:899px){
  .bottomnav{display:flex}
  .bottomnav button.on{color:var(--br-500)}
  .bottomnav button .badge{background:var(--br-500)}
}

/* ---------- Rythme des ecrans secondaires ---------- */
.pagehead{padding:var(--sp-48) 0 var(--sp-8)}
.pagehead h1{font-size:var(--t-h1);font-weight:var(--w-semi);letter-spacing:var(--ls-title)}
.pagehead p{color:var(--doux);font-size:var(--t-lead);line-height:var(--lh-body);margin:var(--gap-titre-texte) 0 0;max-width:62ch}

/* ---------- Boutons de la refonte ---------- */
.qbtn{
  border:1px solid var(--trait);background:var(--surface);border-radius:var(--r-md);
  transition:border-color var(--d-court) var(--ease-doux),background var(--d-court) var(--ease-doux);
}
.qbtn:hover{border-color:var(--trait-fort);background:var(--surface-2)}
.seg{background:var(--surface-2);border-radius:var(--r-pill);padding:3px;display:inline-flex;gap:2px}
.seg button{
  padding:7px 16px;border-radius:var(--r-pill);font-size:13.5px;font-weight:var(--w-medium);color:var(--doux);
  transition:color var(--d-court) var(--ease-doux),background var(--d-court) var(--ease-doux);
}
.seg button.on{background:var(--surface);color:var(--encre);font-weight:var(--w-semi);box-shadow:var(--el-1)}

/* Le bandeau de preuve : un encart teinte, plus une carte a ombre. */
.proof{
  background:var(--br-wash);border:1px solid var(--br-100);box-shadow:none;
  border-radius:var(--r-card);margin:var(--sp-24) 0 0;
}
.proof .p-item b{font-family:var(--f-display);font-weight:var(--w-semi);color:var(--encre)}

/* ---------- Le tampon du passeport ---------- */
.stampbtn{border-radius:var(--r-md)}

/* ---------- Impression : on ne sort pas de la charte ---------- */
@media print{
  .header,.bottomnav,.topnav,.hero,.footer{display:none !important}
}

/* ---------- Corrections d'alignement des titres a icone ---------- */
.fy-head b,.mk-head b,.sec-head h2{display:inline-flex;align-items:center;gap:8px}
.fy-head b .ico{width:17px;height:17px;color:var(--br-500)}
.tb-all .ico,.mk-go .ico,.go .ico,.lienclair .ico{width:14px;height:14px;vertical-align:-2px}
.gu-head b{display:inline-flex;align-items:center;gap:8px}
.gu-head b .ico{width:17px;height:17px;color:var(--br-500)}

/* Le titre d'une carte tient sur trois lignes : au dela, la grille
   perd son rythme et deux cartes voisines n'ont plus la meme hauteur. */
.card h3{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* Poppins ne descend plus qu'a 600 : le 700 n'est plus charge, et un
   navigateur qui le simule epaissit le trait sans finesse. */
h1,h2,h3,h4,h5,.brand,
.proof .p-item b,.srccard h4,.pass-stats b,.fy-head b,.gu-head b,
.pcard h3,.stats b,.ob-head h2,.card .datebadge .d{font-weight:var(--w-semi)}

/* =====================================================================
   LA SCENE DU HERO
   Deux colonnes sur ordinateur : le titre a gauche, trois sorties du jour
   posees en eventail a droite. La barre de recherche reste sous les deux,
   sur toute la largeur : c'est elle qu'on vient chercher, elle ne doit pas
   retrecir pour faire de la place a une image.
   Aucun fichier distant : les deux decors sont des photographies servies
   par nous depuis /img/hero/ (29/08/2026 ; elles etaient dessinees avant).
   ===================================================================== */
.hero-haut{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(24px,4vw,64px);align-items:center;
}
.hero-texte{min-width:0}

.hero-scene{position:relative;min-height:392px;display:flex;align-items:center;justify-content:center}
.hero-scene .halo{
  position:absolute;inset:-6% -10%;border-radius:50%;
  background:radial-gradient(closest-side,var(--br-100),transparent 74%);
}

/* Les scenes. Le rayon suit l'echelle du systeme, la grande porte une arche
   en haut : c'est la meme forme que sur Hola Blanca, donc la meme famille.
   Le contenu est, depuis le 29/08/2026, une PHOTOGRAPHIE servie par nous
   (/img/hero/) : rien de distant, donc rien qui manque hors ligne et aucune
   requete vers un tiers — la regle est inchangee, c'est la source qui l'est.
   `object-fit:cover` fait le reste : le cadre est haut, la photo est
   recadree en portrait a la construction, le navigateur absorbe l'ecart. */
.hero-scene .photo{position:absolute;overflow:hidden;background:var(--surface-2)}
.hero-scene .photo svg{width:100%;height:100%;display:block}
.hero-scene .photo img{width:100%;height:100%;display:block;object-fit:cover}
.hero-scene .grande{
  width:266px;height:344px;right:16%;top:14px;
  border-radius:150px 150px var(--r-card) var(--r-card);
  box-shadow:0 26px 56px -26px rgba(90,47,176,.5);
}
.hero-scene .petite{
  width:158px;height:200px;right:2%;top:150px;z-index:2;
  border-radius:96px 96px var(--r-lg) var(--r-lg);
  border:5px solid var(--fond);
  box-shadow:0 18px 40px -20px rgba(20,23,31,.35);
}

.hero-scene .fiche{
  position:absolute;z-index:3;left:0;bottom:22px;
  width:min(286px,84%);
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--trait);
  border-radius:var(--r-card);padding:12px 14px;
  box-shadow:var(--el-3);
}
.hero-scene .vig{
  width:44px;height:44px;flex:none;border-radius:var(--r-md);
  display:grid;place-items:center;background:var(--br-wash);
}
.hero-scene .vig svg{width:22px;height:22px}
.hero-scene .txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.hero-scene .txt b{font-size:14px;font-weight:var(--w-semi);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-scene .txt i{font-style:normal;font-size:12.5px;color:var(--doux)}
.hero-scene .jour{
  flex:none;text-align:center;background:var(--surface-2);
  border-radius:var(--r-sm);padding:6px 9px;min-width:44px;
}
.hero-scene .jour b{display:block;font-family:var(--f-display);font-size:16px;
  font-weight:var(--w-semi);line-height:1;font-variant-numeric:tabular-nums}
.hero-scene .jour i{display:block;font-style:normal;font-size:9.5px;font-weight:var(--w-semi);
  letter-spacing:.08em;color:var(--doux);margin-top:2px}

.hero-scene .bulle{
  position:absolute;z-index:4;left:4%;top:8px;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--br-500);color:var(--br-sur-fond);
  border-radius:var(--r-pill);padding:9px 16px 9px 12px;
  font-size:13.5px;box-shadow:0 12px 28px -12px var(--br-ombre);
}
.hero-scene .bulle svg{width:19px;height:19px;flex:none}
.hero-scene .bulle b{font-weight:var(--w-semi);font-variant-numeric:tabular-nums}

/* La fiche et la bulle disent des chiffres reels. Tant qu'app.js ne les a pas
   remplies (et si le fichier de sorties manque, pour toujours), elles restent
   effacees : un cadre vide vaut mieux qu'un exemple invente. */
.hero-scene .fiche,.hero-scene .bulle{transition:opacity .25s ease}
.hero-scene[data-pret="0"] .fiche,.hero-scene[data-pret="0"] .bulle{opacity:0}

@media(max-width:900px){
  .hero-haut{grid-template-columns:1fr;gap:var(--sp-32)}
  .hero-scene{min-height:330px;order:2}
  .hero-scene .grande{right:22%}
  .hero-scene .petite{right:6%}
}
@media(max-width:520px){
  .hero-scene{display:none}   /* sur telephone, la recherche passe avant l'image */
}