/* =====================================================================
   HolaNinos · cartes.css, LES FICHES DE L'ANNUAIRE, ET LE RYTHME DES
   PAGES QUI LES PORTENT.  18/09/2026
   ---------------------------------------------------------------------
   NE DE DEUX PHRASES DU RESPONSABLE, LE MEME SOIR, CAPTURES A L'APPUI :

     « Y a des problemes d'espacement aussi dans les pages »
     « Et aussi les cards la, une regle, toujours mettre des images,
       le site doit etre interactif »

   CE QUI N'ALLAIT PAS, ET CE QUI LE CAUSAIT

   1. AUCUNE IMAGE. Les 450 fiches sortaient en texte nu. L'agenda, lui,
      a une vignette sur chaque sortie depuis le 29/08. L'annuaire est
      passe a cote parce qu'il a ete ecrit le 09/09 en reutilisant les
      cartes d'offres (`.ofcard`), qui n'en ont jamais eu.
      -> `.emvis`, une bande dessinee en haut de chaque fiche.

   2. DES COLONNES DE BLANC. Les cartes d'une meme rangee ont la meme
      hauteur (la grille les etire), mais leur contenu restait colle en
      haut : une fiche a nom court laissait quatre-vingts pixels de vide
      sous ses boutons, a cote d'une fiche a nom long qui n'en laissait
      aucun. Sur la capture de « Activites », la rangee 1 montrait
      quatre bas de carte a quatre hauteurs differentes.
      -> `.ofp-acciones{margin-top:auto}` : les boutons se collent au
         bas, le vide passe AU-DESSUS d'eux, et les quatre bas de carte
         s'alignent.

   3. LA COMMUNE SE CASSAIT EN DEUX. « pres de Guardamar del Segura »,
      aligne a droite sur une colonne de 100 px, tombait sur deux lignes
      et poussait le titre vers le bas d'une carte sur deux. C'est ce
      qui donnait l'impression de desordre avant meme de lire.
      -> la commune passe SOUS la pastille, sur toute la largeur, et
         s'aligne a gauche comme tout le reste.

   4. LE RYTHME DES PAGES. Entre le chapeau, le bandeau d'honnetete, les
      onglets, le filtre de commune et le compteur, cinq blocs se
      suivaient avec cinq ecarts differents, tires de cinq feuilles
      ecrites a cinq dates. Le dernier bloc de ce fichier leur donne UNE
      echelle, et seulement sur les ecrans de l'annuaire : une regle
      globale aurait deplace des ecrans que personne n'a demande a
      toucher.

   OU CE FICHIER SE CHARGE : en DERNIER, apres opciones.css et panel.css.
   Il ne redefinit aucun jeton du socle ; il n'habille que l'annuaire.
   ===================================================================== */

/* =====================================================================
   1. LA GRILLE
   250 px et non 260 : sur un ecran de 1180 px, 260 donnait quatre
   colonnes et 44 px de marge perdue. Le `gap` monte de 16 a 20 px ,
   avec une image en haut, deux cartes a 16 px se touchaient presque.
   ===================================================================== */
.ofgrid{
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:var(--sp-20, 20px);
  align-items:stretch;
}

/* =====================================================================
   2. LA FICHE
   ===================================================================== */
.emcard{
  padding:0;                 /* le padding descend dans `.emcard-in` */
  gap:0;
  height:100%;
  overflow:hidden;           /* l'image epouse le rayon de la carte */
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* L'INTERACTIF DEMANDE, ET IL S'ARRETE LA.
   Une carte qui se souleve au survol et qui repond au clavier, c'est
   tout. Pas d'animation a l'ouverture de la page : 450 cartes qui
   apparaissent en cascade, c'est une seconde perdue a chaque visite et
   un mal de tete sur un telephone qui rame. */
.emcard:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(31,18,66,.10);
  border-color:#D6C9F7;
}
@media (prefers-reduced-motion:reduce){
  .emcard, .emcard:hover{transition:none;transform:none}
}

/* LA BANDE DESSINEE. Hauteur FIXE et non `aspect-ratio` : la propriete
   manque sur les WebView Android les plus anciennes que l'application
   embarquee peut rencontrer, et une carte sans hauteur d'image y
   s'effondrerait a zero. 118 px tient la scene entiere sans manger la
   moitie de la carte sur un telephone. */
.emvis{
  position:relative;
  height:118px;
  background:var(--surface-2);
  border-bottom:1px solid var(--trait);
  overflow:hidden;
}
.emvis svg{display:block;width:100%;height:100%}
/* LA PHOTOGRAPHIE (19/09/2026). Elle remplit la bande sans se deformer :
   `object-fit:cover` recadre, il n'etire pas. Les fichiers sont deja en
   720x300, donc le recadrage ne joue qu'aux largeurs extremes. */
.emvis .emfoto{display:block;width:100%;height:100%;object-fit:cover}
/* LA MENTION « image d'illustration ». Elle n'est pas une politesse :
   sans elle, une salle de restaurant inconnue posee sur la fiche d'un
   restaurant affirme quelque chose de faux, 450 fois. Discrete, en bas a
   droite, sur un voile sombre pour rester lisible quelle que soit la
   photo. Le blanc sur noir translucide passe le contraste sur les
   234 photos de la phototheque, ce qu'un gris sur gris ne ferait pas. */
.emilu{
  position:absolute;right:8px;bottom:8px;
  background:rgba(17,12,34,.62);color:#fff;
  border-radius:999px;padding:2px 8px;
  font-size:.66rem;font-weight:600;letter-spacing:.01em;
  pointer-events:none;
}
.emvis-repli{
  width:100%;height:100%;
  background:linear-gradient(135deg,#EDE7FE,#DCD2FA);
}

/* LE CORPS. `flex:1` + `min-height:0` : sans le second, un nom tres
   long empeche la carte de se comprimer et casse l'alignement de toute
   la rangee. */
.emcard-in{
  display:flex;flex-direction:column;
  gap:var(--sp-8);
  padding:var(--sp-16);
  flex:1 1 auto;min-height:0;
}

/* LA PASTILLE ET LA COMMUNE, L'UNE SOUS L'AUTRE.
   Voir le point 3 de l'en-tete : c'est le correctif qui se voit le
   plus. `.ofcard-h` reste en `flex` pour les autres ecrans qui s'en
   servent ; ici seulement, il passe en colonne. */
.emcard .ofcard-h{
  flex-direction:column;align-items:flex-start;gap:6px;
}
.emcard .ofciudad{text-align:left;line-height:1.3}
.emcard .ofcard-t{
  margin:2px 0 0;
  font-size:1.04rem;font-weight:700;
  overflow-wrap:anywhere;      /* « Escola de Musica Vicente Martinez » */
}
.emcard .ofcard-c{line-height:1.45}

/* LES BOUTONS, COLLES EN BAS. Le correctif du point 2. */
.emcard .ofp-acciones{margin-top:auto;padding-top:var(--sp-12)}
/* `.ofp-acciones .qbtn` est en `cursor:default` depuis le 26/08 : la
   regle vise l'APERCU de fiche du commercant, ou les boutons sont
   dessines et ne font rien. Ici ce sont de vrais liens. */
.emcard .ofp-acciones .qbtn{cursor:pointer}
.emcard .qbtn-fort{
  background:#7C4DE0;border-color:#7C4DE0;color:#fff;font-weight:700;
}
.emcard .qbtn-fort:hover{background:#6A3ECC;border-color:#6A3ECC}
.emcard .emcorr{margin-top:var(--sp-8)}
/* « ¿Es tu negocio? » et « Señalar un contenido » (22/09/2026) : une ligne
   discrete sous le lien de correction, sur chaque fiche. */
.emcard .emtuyo{margin:4px 0 0;font-size:11.5px;line-height:1.45;color:var(--muted,#6b6b83)}
.emcard .emtuyo a{color:inherit;text-decoration:underline}

/* =====================================================================
   3. L'EMPLACEMENT PAYE (forfait Ads, 29 EUR/mois)
   LSSI art. 20.1 : une communication commerciale doit etre identifiable
   comme telle. Ces trois regles ne sont donc pas de la decoration, la
   pastille doit rester LISIBLE, et c'est pour ca qu'elle est en ambre
   fonce sur creme et pas en blanc sur ambre (voir le contraste 1,09
   paye le 26/08 sur ce meme projet).
   ===================================================================== */
.empubli-bloc{margin:var(--sp-24) 0}
.empubli-h{
  display:flex;align-items:center;gap:var(--sp-12);
  flex-wrap:wrap;margin-bottom:var(--sp-12);
}
.empubli-h .onota{margin:0}
.oftipo.em-publi{background:#FFF1DC;color:#7A4A05;border-color:#F0D9B5}
.emcard.empubli{border-color:#F0D9B5}
.empubli-e{
  position:absolute;left:10px;top:10px;
  background:#FFF6E8;color:#7A4A05;border:1px solid #F0D9B5;
  border-radius:999px;padding:3px 10px;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;
}

/* =====================================================================
   4. LE FORMULAIRE DE CONTACT (Plan Contacto, 9,99 EUR/mois)
   `[hidden]` ne suffit pas quand l'element est en `display:flex` : la
   regle d'affichage gagne sur l'attribut, et le formulaire resterait
   ouvert sur les 450 fiches. C'est le genre de defaut qui ne se voit
   qu'une fois un client abonne.
   ===================================================================== */
.emform{
  display:flex;flex-direction:column;gap:var(--sp-8);
  margin-top:var(--sp-12);padding-top:var(--sp-12);
  border-top:1px dashed var(--trait);
}
.emform[hidden]{display:none}
.emform-i{margin:0;font-size:.78rem;line-height:1.4;color:var(--doux)}
.emform-c{
  width:100%;box-sizing:border-box;
  font:inherit;font-size:.9rem;
  padding:9px 11px;border-radius:12px;
  border:1px solid var(--trait);background:var(--surface);color:var(--encre);
}
.emform-c:focus{outline:2px solid #5B32B8;outline-offset:1px}
.emform textarea.emform-c{resize:vertical;min-height:64px}
.emform-b{display:flex;gap:var(--sp-8);flex-wrap:wrap}
.emform-b .btn-primary,.emform-b .btn-ghost{flex:1 1 110px;font-size:.88rem;padding:9px 12px}
.emform-e{margin:0;font-size:.78rem;line-height:1.4;color:var(--doux)}
.emform-e.ok{color:#14603A;font-weight:600}
.emform-e.ko{color:#8A1F4A;font-weight:600}

/* =====================================================================
   5. LE RYTHME DES PAGES DE L'ANNUAIRE
   Une seule echelle : 24 px entre deux blocs, 12 px a l'interieur d'un
   bloc. Rien ici n'est global, chaque regle est enfermee dans les cinq
   ecrans concernes, parce que `.pagehead`, `.segrow` et `.ofiltros`
   servent aussi a huit autres ecrans que personne n'a demande a
   deplacer ce soir.
   ===================================================================== */
#v-actividades .pagehead,
#v-descubrir   .pagehead,
#v-empresas    .pagehead,
#v-comercios   .pagehead,
#v-comer       .pagehead{padding-bottom:var(--sp-16)}

#v-actividades .ocard.emgratis,
#v-descubrir   .ocard.emgratis,
#v-empresas    .ocard.emgratis,
#v-comercios   .ocard.emgratis,
#v-comer       .ocard.emgratis{margin:var(--sp-16) 0 var(--sp-24)}

#v-actividades .segrow,
#v-descubrir   .segrow,
#v-empresas    .segrow,
#v-comercios   .segrow,
#v-comer       .segrow{margin:0 0 var(--sp-16)}

#v-actividades .ofiltros,
#v-descubrir   .ofiltros,
#v-empresas    .ofiltros,
#v-comercios   .ofiltros,
#v-comer       .ofiltros{margin:0 0 var(--sp-8)}

#v-actividades .ofcount,
#v-descubrir   .ofcount,
#v-empresas    .ofcount,
#v-comercios   .ofcount,
#v-comer       .ofcount{margin:var(--sp-16) 0 var(--sp-12)}

#v-actividades .ofpuente,
#v-descubrir   .ofpuente,
#v-empresas    .ofpuente,
#v-comercios   .ofpuente,
#v-comer       .ofpuente{margin:0 0 var(--sp-24)}

/* Le pied de l'ecran : les deux notes se collaient a la derniere
   rangee de fiches. */
#v-actividades .em-osm,
#v-descubrir   .em-osm,
#v-empresas    .em-osm,
#v-comercios   .em-osm,
#v-comer       .em-osm{margin-top:var(--sp-16)}

/* =====================================================================
   6. LE TELEPHONE
   Une seule colonne, une image un peu plus basse (elle occupe sinon un
   tiers de l'ecran), et le meme rythme.
   ===================================================================== */
@media (max-width:640px){
  .ofgrid{grid-template-columns:1fr;gap:var(--sp-16)}
  .emvis{height:132px}
  .emcard-in{padding:var(--sp-16) var(--sp-16) var(--sp-16)}
}

/* Le titre du formulaire : il porte le NOM du commerce, et c'est lui qui
   satisfait l'article 13.1.e du RGPD, la personne sait a qui elle
   ecrit au moment ou elle ecrit, pas apres. Il est donc en gras et en
   premier, jamais releguee sous les champs. */
.emform-t{margin:0;font-size:.92rem;font-weight:700;color:var(--encre)}
.emform-i a{color:#5B32B8}

/* =====================================================================
   AUDIT UX DU 25/09/2026 · BLOC TERMINAL
   Il ne modifie aucune regle d'origine : il les couvre, et se retire
   d'un bloc. Tout ce qui suit a ete vu a l'ecran a 375 px.
   ===================================================================== */

/* Le texte cache pour les lecteurs d'ecran (libelle du menu de langue). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Les libelles courts des trois portes et le menu de langue n'existent que
   sur telephone. */
.cuenta-btn .cuenta-c{display:none}
.lang-sel{display:none}

@media (max-width:600px){
  /* 1. L'EN-TETE SUR DEUX RANGS. Trois ronds sans texte (famille, pro,
     connexion) : une personne agee ne savait pas a quoi ils servaient.
     Ils portent maintenant un mot, sur un second rang, en trois boutons
     de 44 px de haut, la taille d'un doigt. */
  .header .wrap{flex-wrap:wrap;row-gap:8px;height:auto;min-height:var(--header-h);padding-top:8px;padding-bottom:8px}
  .header .wrap>.cuentas{order:9;flex:1 1 100%;display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .header .cuenta-btn{justify-content:center;min-width:0;min-height:44px;padding:6px 5px;font-size:13.5px;gap:5px}
  .header .cuenta-btn span:not(.cuenta-c){display:none}
  .header .cuenta-btn .cuenta-c{display:inline;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* 2. LA LANGUE. Quatre boutons de 11 px (ES EN FR VA), trop serres pour
     un doigt : un seul menu de 44 px, qui ouvre la liste du telephone. */
  .header .wrap>.lang{display:none}
  .lang-sel{display:block;margin-left:auto;flex:none}
  .lang-sel select{min-height:44px;min-width:64px;padding:8px 28px 8px 12px;
    font:600 15px/1.2 inherit;color:var(--encre,#14171F);
    border:1px solid #D9D2EC;border-radius:12px;background:#fff;
    -webkit-appearance:none;appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,#5B32B8 50%),linear-gradient(135deg,#5B32B8 50%,transparent 50%);
    background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat}

  /* 3. LA BARRE DU BAS ET LA MENTION « IMAGE D'ILLUSTRATION » : 9,5 et
     10 px, illisibles. */
  .bottomnav button{font-size:12px}
  .ch-fab-t{font-size:12px}
  .badge-ilu{font-size:12px}

  /* 4. LE ROND VIOLET DEPASSE DE 20 PX AU-DESSUS DE LA BARRE : il cachait
     « Ajouter mon entreprise » et un lien du pied de page en bas de page.
     La fin de page laisse maintenant la place de la barre ET du rond. */
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px))}
}

@media (max-width:1023px){
  /* 5. L'ACCUEIL DIT CE QU'EST LE SITE. Sur telephone on arrivait
     directement sur « Que fait-on ? » : un touriste ne comprenait pas ce
     qu'est HolaNinos. Le titre et la phrase du heros d'ordinateur
     reviennent, en petit, au-dessus des etapes ; les chiffres et le
     bouton restent sur ordinateur. */
  .ini-hero{display:block;text-align:center;padding:14px 18px 0}
  #inicioBody:not([data-paso="que"]) .ini-hero{display:none}
  .ini-hero-tag,.ini-hero-cifras,.ini-hero-frais,.ini-hero-agenda{display:none}
  .ini-hero-t{font-family:var(--f-display,Poppins,sans-serif);font-weight:600;
    font-size:20px;line-height:1.2;margin:0 auto;max-width:26ch;color:var(--mg-fuerte,#1B1033)}
  .ini-hero-s{font-size:14.5px;line-height:1.5;margin:6px auto 0;max-width:40ch;color:var(--mg-doux,#56446F)}
}

/* 6. LE PIED DE PAGE (audit UX du 25/09/2026) : les liens des pros dans
   leur propre colonne, titree, et les liens legaux a part. Le titre
   occupe toute la largeur de sa colonne, quelle que soit la grille. */
.footer .foot-t{grid-column:1 / -1;flex-basis:100%;margin:0;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--encre,#14171F)}
@media (max-width:1023px){
  .footer .cols{row-gap:10px}
}

/* 7. LA RECHERCHE (audit UX du 25/09/2026). Pendant une recherche, les
   bandeaux au-dessus de la liste se taisent : sur telephone les resultats
   arrivaient deux ecrans plus bas. Et une recherche sans sortie propose
   les lieux et commerces qui correspondent (app.js, renderAilleurs). */
body.hn-busca #modoBand,body.hn-busca #proof,body.hn-busca #seccionesRail,
body.hn-busca #ahoraBand,body.hn-busca #edadStrip,body.hn-busca #todayBand,
body.hn-busca #ofertasPuente,body.hn-busca #deportePuente,body.hn-busca #empresasPuente{display:none !important}
.ailleurs{display:grid;gap:8px;max-width:560px;margin:14px auto 0;text-align:left}
.ailleurs:empty{display:none}
.ailleurs .ail-t{margin:0 0 2px;font-weight:600;color:var(--encre,#14171F)}
.ailleurs .ail-i{display:flex;justify-content:space-between;align-items:center;gap:12px;
  min-height:48px;padding:10px 14px;border:1px solid #E4DDF3;border-radius:14px;background:#fff;
  font:inherit;text-align:left;cursor:pointer;color:var(--encre,#14171F)}
.ailleurs .ail-i span{color:#5F5A72;font-size:14px;white-space:nowrap}
.ailleurs .ail-i:hover{border-color:#7C4DE0}
.ailleurs .ail-tout{justify-self:start;margin-top:4px}

/* 8. FICHE EN ANGLAIS OU EN FRANCAIS (audit UX du 25/09/2026) : le titre
   et le texte restent ceux de la source, en espagnol, et la fiche le dit. */
.sheet .m-orig{margin:-4px 0 12px;font-size:13.5px;line-height:1.45;color:#5F5A72;font-style:italic}
.empty:has(.ailleurs:not(:empty))>p{display:none}

/* 9. ENTRE 601 ET 899 PX (tablette), les portes « famille » et « pro »
   etaient aussi deux ronds sans texte : elles portent leur mot court, comme
   sur telephone. Au-dela, le menu du haut prend la place (mesure le
   27/09 : 1 348 px reclames pour 1 180 a 1 279 px de fenetre). */
@media (min-width:601px) and (max-width:899px){
  .header .cuenta-btn.fam .cuenta-c,.header .cuenta-btn.pro .cuenta-c{display:inline;white-space:nowrap}
  .header .cuenta-btn.fam,.header .cuenta-btn.pro{width:auto;min-width:0;padding-left:12px;padding-right:12px;gap:6px}
}


/* =====================================================================
   « DESCARGAR LA APP » DANS L'EN-TETE, TELEPHONE ET TABLETTE (11/10/2026)
   Demande du responsable : un bouton avec ce texte, toujours visible sous
   900 px, le seuil du site entre tablette et ordinateur (refonte.css) : des
   900 px les rubriques montent dans l'en-tete et le nom de la marque se
   faisait couper. Avant, il n'apparaissait que si Chrome envoyait son invitation,
   donc jamais sur iPhone. Sans invitation, le clic mene a instalar.html
   (app.js). Cache dans l'application elle-meme (.cache-app, standalone).
   Mesure a 375 px : il tient sur la premiere ligne, a cote du logo entier,
   parce que le menu de langue ne montre plus que son code.
   ===================================================================== */
@media (max-width:899px){
  .header .wrap>.install-btn{display:inline-flex}
  .header .install-btn span{display:inline;position:static;width:auto;height:auto;overflow:visible}
}
.header .wrap>.install-btn.cache-app{display:none}
@media (display-mode:standalone){.header .wrap>.install-btn{display:none}}
.lang-code{display:none}
@media (max-width:600px){
  .lang-sel{position:relative}
  .lang-sel .lang-code{display:flex;align-items:center;min-height:44px;padding:0 26px 0 12px;
    font:600 15px/1.2 inherit;color:var(--encre,#14171F);
    border:1px solid #D9D2EC;border-radius:12px;background:#fff;pointer-events:none;
    background-image:linear-gradient(45deg,transparent 50%,#5B32B8 50%),linear-gradient(135deg,#5B32B8 50%,transparent 50%);
    background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  .lang-sel select{position:absolute;inset:0;width:100%;min-width:0;opacity:0;cursor:pointer}
  .header .install-btn{min-height:44px;padding:6px 12px;gap:6px;font-size:13px;line-height:1.15;white-space:nowrap}
  .header .wrap:has(.install-btn.show) .logo .brand{display:block}
}
/* Sous 420 px : deux lignes, sans l'icone. Sur une ligne, « Download the
   app » passait sous le logo a 375 px. */
@media (max-width:420px){
  .header .install-btn{padding:5px 11px;font-size:12.5px;white-space:normal;text-align:left}
  .header .install-btn svg{display:none}
  .header .install-btn span{width:min-content}
}
@media (max-width:339px){
  .header .logo .brand{display:none}
}

/* TABLETTE (601 a 1024 px), meme jour. Le bouton seul ne tenait pas : a
   620 px les quatre boutons de langue le chevauchaient et le mot de la
   marque disparaissait. Deux mesures :
   1. le menu de langue compact du telephone (le code seul) jusqu'a 1024 px ;
   2. de 601 a 760 px, les trois portes passent au second rang, comme sur
      telephone, avec leurs mots. */
@media (min-width:601px) and (max-width:899px){
  .header .wrap>.lang{display:none}
  .lang-sel{display:block;position:relative;flex:none}
  .lang-sel .lang-code{display:flex;align-items:center;min-height:40px;padding:0 26px 0 12px;
    font:600 14px/1.2 inherit;color:var(--encre,#14171F);
    border:1px solid #D9D2EC;border-radius:12px;background:#fff;pointer-events:none;
    background-image:linear-gradient(45deg,transparent 50%,#5B32B8 50%),linear-gradient(135deg,#5B32B8 50%,transparent 50%);
    background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  .lang-sel select{position:absolute;inset:0;width:100%;min-width:0;opacity:0;cursor:pointer}
}
@media (min-width:601px) and (max-width:760px){
  .header .wrap{flex-wrap:wrap;row-gap:8px;height:auto;min-height:var(--header-h);padding-top:8px;padding-bottom:8px}
  .header .wrap>.cuentas{order:9;flex:1 1 100%;display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .header .cuenta-btn{justify-content:center;min-width:0;min-height:44px;padding:6px 5px;font-size:13.5px;gap:5px}
  .header .cuenta-btn span:not(.cuenta-c){display:none}
  .header .cuenta-btn .cuenta-c{display:inline;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .header .wrap>.lang-sel{margin-left:auto}
}

/* =====================================================================
   6. LA GRILLE UNIQUE ET L'AGENDA (13/10/2026)
   Le logo et les photos d'un professionnel verifie, le calendrier public
   sous une carte, et la ligne du prix de lancement. Rien ici ne change le
   rang d'une fiche : ce sont des ajouts DANS la carte.
   ===================================================================== */
.emlogo{
  width:32px;height:32px;object-fit:contain;border-radius:8px;
  vertical-align:middle;margin-right:6px;background:var(--surface);
  border:1px solid var(--trait);
}
.emfoto-pro{object-fit:cover}
.emgal{display:flex;gap:6px;flex-wrap:wrap;margin:var(--sp-8) 0 0}
.emgal a{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--trait);line-height:0}
.emgal img{width:64px;height:64px;object-fit:cover;display:block}

.emreserva{
  margin-top:var(--sp-12);padding-top:var(--sp-12);border-top:1px dashed var(--trait);
}
.emreserva[hidden]{display:none}
.rv{display:flex;flex-direction:column;gap:var(--sp-8)}
.rv-t{margin:0;font-weight:700;font-size:.95rem;color:var(--encre)}
.rv-i,.rv-nota{margin:0;font-size:.82rem;line-height:1.45;color:var(--doux)}
.rv-l{margin:var(--sp-8) 0 0;font-size:.82rem;font-weight:600;color:var(--encre)}
.rv-zona{font-weight:400;color:var(--doux)}
.rv-horas{display:flex;gap:6px;flex-wrap:wrap}
.rv-h{
  font:inherit;font-size:.88rem;min-width:56px;min-height:40px;padding:6px 10px;
  border-radius:10px;border:1px solid var(--trait);background:var(--surface);color:var(--encre);
  cursor:pointer;
}
.rv-h.on{background:#5B32B8;border-color:#5B32B8;color:#fff;font-weight:700}
.rv-h:focus-visible{outline:2px solid #5B32B8;outline-offset:2px}
#rvForm{display:flex;flex-direction:column;gap:var(--sp-8);margin-top:var(--sp-8)}
#rvForm[hidden]{display:none}
.rv-ok{display:flex;gap:8px;align-items:flex-start;font-size:.8rem;line-height:1.4;color:var(--doux)}
.rv-ok input{flex:none;margin-top:3px}

.pb-lanz{
  margin:6px 0 0;padding:6px 10px;border-radius:10px;
  background:#EFE9FB;color:#2B2740;font-size:.84rem;line-height:1.4;
}
.pb-lanz b{color:#3F1F8F}

/* LES TROIS CARTES de « Mon commerce » (13/10/2026) : fiche verifiee, Local, Pro.
   Une colonne sur telephone, trois au-dela ; l'option Agenda en une ligne ; le
   detail complet des quatre fiches replie dessous. */
.pb-tres{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-12)}
@media(max-width:700px){ .pb-tres{grid-template-columns:1fr} }
.pb-c3{display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-16)}
.pb-c3 h3{margin:0}
.pb-c3 .olista{flex:1;margin:0}
.pb-c3 .pb-btn{display:block;text-align:center;margin-top:var(--sp-8)}
.pb-opcion{margin:var(--sp-12) 0 0;padding:8px 12px;border-radius:12px;background:#EFE9FB;color:#2B2740}
.pb-detalle{margin:var(--sp-12) 0 var(--sp-16)}
.pb-detalle summary{cursor:pointer;font-weight:600;color:#5B32B8;min-height:44px;display:flex;align-items:center}
.pb-detalle[open] summary{margin-bottom:var(--sp-8)}