/* ============================================================
   franco-media.com, TASK-N46 (Brain ruling LJ, 30-10-2026).
   Loaded last (priority 40, after n45.css). Tokens only: no hex, no important
   flags. What this file adds, by brief item:
   A. 1.1  the rates gate block and the locked price lines.
   B. 1.4  the global theme buttons .btn-primary and .btn-secondary, and the
           WPBakery buttons mapped to them.
   C. 1.5 / 2.8 / 2.9  the profile card grid outside the hubs (promotion grid)
           and the hub "Sections" row.
   D. 2.2  headings inside content: H2 in the deep page accent, H3 and body ink.
   E. 2.3  the Dentcare price list (.fm-pricelist, .fm-hot and the rest) from the
           old Customizer CSS post 9615, at 14 px or more; the 14 px floor of the
           template text (share label, chips, eyebrows, tile labels).
   F. 2.5  the Popup Maker container held to the screen width on a phone.
   G. 2.7  card titles clamped at three lines.
   H. 2.10 tooltips.
   I. 2.11 the footer line (weather, visitors, readers online).
   J. 2.12 the currency converter of the rail.
   K. 2.13 the mobile Directory overlay, variant A of the brief (the LG sheet does
           not exist yet): the whole overlay on the chrome near-black, three
           columns edge to edge.
   L. 2.15 / 2.9  the old WPBakery post grids (vc_basic_grid) as the card family.
   M. 2.6  the search results page.
   ============================================================ */

/* ===== A. The rates gate ===== */
.ratesgate .gatecard{
  display:flex;
  gap:var(--space-10);
  align-items:flex-start;
  padding:var(--space-14);
  border-radius:var(--radius-card);
  background:var(--os-card);
  box-shadow:var(--shadow-floating);
}
.ratesgate .gatebody{ flex:1 1 auto; min-width:0; }
.ratesgate .gatebody .lead{ margin:var(--space-4) 0 var(--space-10); }
.ratesgate .gateform{ max-width:640px; }
.ratesgate .gatego{ margin:0; }
.price.price--locked a,
.pr.pr--locked a{
  display:inline-flex;
  align-items:center;
  min-height:var(--tap-min);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-body);
  color:var(--os-link);
  text-decoration:underline;
  text-underline-offset:3px;
}
.pkghead .pr.pr--locked a{ color:inherit; }
@media (max-width:768px){
  .ratesgate .gatecard{ flex-direction:column; padding:var(--space-10) var(--space-7); }
}

/* ===== B. Global theme buttons (Part C flag 2) =====
   .btn-primary: the golden conversion button, ink text, one per page. .btn-secondary: the deep page accent
   with white text (dark teal where the page has no rubrique). Usable in page content on a link or a button.
   A WPBakery button is the secondary button already (n45.css F); a WPBakery button whose Extra class is
   btn-primary (it lands on .vc_btn3-container) becomes the primary one. */
.btn-primary,
.btn-secondary,
:is(.entry-content,.abody,.desc) .vc_btn3-container.btn-primary .vc_general.vc_btn3{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
  box-sizing:border-box;
  min-height:var(--tap-comfortable);
  padding:var(--space-3) var(--space-12);
  border:0;
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-body);
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--duration-base) var(--ease);
}
.btn-primary,
:is(.entry-content,.abody,.desc) .vc_btn3-container.btn-primary .vc_general.vc_btn3{
  background-color:var(--os-cta);
  background-image:none;
  color:var(--os-cta-ink);
}
.btn-primary:hover,
.btn-primary:focus,
:is(.entry-content,.abody,.desc) .vc_btn3-container.btn-primary .vc_general.vc_btn3:hover,
:is(.entry-content,.abody,.desc) .vc_btn3-container.btn-primary .vc_general.vc_btn3:focus{
  background-color:var(--os-cta-hover);
  color:var(--os-cta-ink);
  text-decoration:none;
}
.btn-secondary{
  background-color:var(--acc-deep,var(--os-link));
  color:var(--on-dark);
}
.btn-secondary:hover,
.btn-secondary:focus{
  background-color:var(--os-heading);
  color:var(--on-dark);
  text-decoration:none;
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible{ outline:3px solid var(--acc-deep,var(--os-link)); outline-offset:3px; }
:is(.entry-content,.abody,.desc) a.btn-primary,
:is(.entry-content,.abody,.desc) a.btn-primary:visited{ color:var(--os-cta-ink); }
:is(.entry-content,.abody,.desc) a.btn-secondary,
:is(.entry-content,.abody,.desc) a.btn-secondary:visited{ color:var(--on-dark); }

/* ===== C. Profile cards outside the hubs, and the hub "Sections" row =====
   hub.css (the .pcard rules) loads on the hubs only, so the promotion grid of a page or a post
   carries the same card rules here, scoped to .promo-clients. */
.promo-clients{ margin-top:var(--space-13); }
.promo-clients h2{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-section-h2);
  line-height:var(--lh-h2);
  color:var(--os-heading);
}
.promo-clients .pcards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--card-gap);
  margin-top:var(--space-10);
}
.abody .promo-clients .pcards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.promo-clients .pcard{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  background:var(--os-card);
  color:inherit;
  text-decoration:none;
  transition:box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.promo-clients .pcard:hover{ box-shadow:var(--shadow-floating); transform:translateY(-2px); }
.promo-clients .pcard .ph{ aspect-ratio:16 / 10; overflow:hidden; background:var(--os-sunken); }
.promo-clients .pcard .ph img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:0; box-shadow:none; padding:0; background:none; }
.promo-clients .pcard .body{ display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-6) var(--space-7) var(--space-7); }
.promo-clients .pcard h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-card-title);
  line-height:var(--lh-card-title);
  color:var(--os-heading);
}
.promo-clients .pcard p{
  margin:0;
  font-size:var(--size-small);
  line-height:var(--lh-body);
  color:var(--os-muted);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}
.hub-sections .pcards{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.hub-sections .hsec .ph:not(.ph-photo){ background:var(--acc-wash,var(--os-tint)); }
.hub-sections .hsec h3{ color:var(--acc-deep,var(--os-heading)); }
@media (max-width:1024px){
  .hub-sections .pcards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px){
  .promo-clients .pcards,
  .abody .promo-clients .pcards{ grid-template-columns:1fr; gap:var(--space-6); }
  .hub-sections .pcards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5); }
  .promo-clients h2{ font-size:var(--m-size-h2); }
}

/* ===== D. Headings inside content (Fabrice 29 and 30-10) =====
   H2 in the deep accent of the page's rubrique (the dark teal chrome where there is none), H3 and body text in
   ink. Pages and posts; the components printed inside a body (cards, the advertiser card, call to action
   boxes, the FAQ, tabs, WPBakery rows and columns with their own background, the agent page blocks) keep
   their own colours. Chic Furniture keeps its own branding colours: its pages carry
   the body class gpcf-own-brand (GPCF_DF_KEEP_STYLE_IDS).
   N46a (ruling LL item 4, C2): the profile body (section.desc) too; its "Overview" eyebrow keeps its own colour. */
body:not(.gpcf-own-brand) :is(.entry-content,.abody,.desc) h2:not(:where(.card *,.pcard *,.fiche *,.vc_cta3 *,.faq *,.gpcf-faq *,.vc_tta *,.promo-clients *,.findus *,.vc_row-has-fill *,.vc_col-has-fill *,[class*="siam-"] *)){
  color:var(--acc-deep,var(--os-link));
}
body:not(.gpcf-own-brand) :is(.entry-content,.abody,.desc) :is(h3,h4):not(:where(.card *,.pcard *,.fiche *,.vc_cta3 *,.faq *,.gpcf-faq *,.vc_tta *,.promo-clients *,.findus *,.vc_row-has-fill *,.vc_col-has-fill *,[class*="siam-"] *)){
  color:var(--os-heading);
}
body:not(.gpcf-own-brand) :is(.entry-content,.abody,.desc) :is(p,li):not(.eyebrow):not(:where(.card *,.pcard *,.fiche *,.vc_cta3 *,.promo-clients *,.findus *,.vc_row-has-fill *,.vc_col-has-fill *,[class*="siam-"] *,.fm-pricelist *)){
  color:var(--os-text);
}

/* ===== E. The Dentcare price list (from Customizer post 9615) and the 14 px floor =====
   The markup is in the page content of 208713, 209415 and 210934 (table.fm-pricelist, spans fm-old, fm-new,
   fm-web, fm-note, fm-hot). The badge pulses unless the reader asks for reduced motion. */
.fm-pricelist{
  border:1px solid var(--os-line);
  border-radius:var(--radius-sm);
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
}
.fm-pricelist td{ padding:var(--space-4) var(--space-6); border-bottom:1px solid var(--os-line); }
.fm-pricelist tr:nth-child(even) td{ background:var(--acc-wash,var(--os-bg)); }
.fm-pricelist tr:last-child td{ border-bottom:0; }
.fm-old{ color:var(--os-muted); text-decoration:line-through; font-weight:var(--weight-regular); }
.fm-new{ color:var(--os-oxidized-iron); font-weight:var(--weight-bold); font-size:1.05em; }
.fm-web{
  display:inline-block;
  margin-top:var(--space-1);
  font-size:var(--size-floor);
  font-weight:var(--weight-bold);
  color:var(--accent-sante);
}
.fm-note{ font-size:var(--size-floor); font-weight:var(--weight-regular); color:var(--os-muted); }
.fm-hot{
  display:inline-block;
  margin-left:var(--space-2);
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-pill);
  background:var(--os-oxidized-iron);
  color:var(--on-dark);
  font-size:var(--size-floor);
  font-weight:var(--weight-bold);
  line-height:1.2;
  letter-spacing:.03em;
  animation:fm-hot-pulse 1.6s ease-in-out infinite;
}
@keyframes fm-hot-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.55; }
}
@media (prefers-reduced-motion:reduce){
  .fm-hot{ animation:none; }
}

/* The floor: template text below 14 px is raised to it (the tokens --size-eyebrow, --size-label and
   --size-stamp are 14 px since N46; these selectors carried their own smaller size). */
.gpcf-share-h,
.chip,
.eyebrow,
.rates .eyebrow,
.svcpage .sp-get p.sp-get-label,
.spot p,
.sect .cat > span:not(.badge),
.gpcf-launcher-panel .cat b,
.gpcf-mobile-nav .cat b,
.pquote cite,
.siam-band-bar .label,
.siam-tabfix .vc_tta-title-text,
.entry-content .siam-res-card .siam-res-specs,
.entry-content .siam-res-card .siam-res-place,
.siam-res-chip,
.siam-copy-label{ font-size:var(--size-floor); }

/* ===== F. Popup Maker on a phone (280307, 281352) =====
   The hidden popup container (pum-container, 1076 px) made the page 440 px wide at 390. max-width holds even
   against a width the plugin writes inline. If the page still scrolls sideways on staging, the fix is the
   popup's own size setting (responsive size), not the theme. */
@media (max-width:768px){
  .pum-overlay{ max-width:100vw; overflow-x:hidden; }
  .pum-container{ box-sizing:border-box; max-width:calc(100vw - 2 * var(--page-gutter-mobile)); }
  .pum-container img{ max-width:100%; height:auto; }
}

/* ===== G. Card titles: three lines at most ===== */
.card h3,
.pcard h3{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
}

/* ===== H. Tooltips =====
   In content: <span class="tip">Short note</span> prints a small "i" mark; tip-q prints "?", tip-warn "!".
   The note opens on hover, on keyboard focus and on a tap (gpcf-n46.js makes the mark focusable and toggles
   it). No plugin. */
.tip{
  position:relative;
  display:inline-flex;
  vertical-align:middle;
  width:1.25em;
  height:1.25em;
  margin:0 var(--space-1);
  font-size:inherit;
  line-height:1;
  color:transparent;
  cursor:help;
}
.tip::before{
  content:"i";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  border-radius:50%;
  background:var(--acc-deep,var(--os-link));
  color:var(--on-dark);
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:.75em;
}
.tip.tip-q::before{ content:"?"; }
.tip.tip-warn::before{ content:"!"; background:var(--os-cta); color:var(--os-cta-ink); }
.tip > .tip-note{
  position:absolute;
  z-index:30;
  bottom:calc(100% + var(--space-3));
  left:50%;
  width:max-content;
  max-width:min(280px,80vw);
  padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-sm);
  background:var(--os-heading);
  color:var(--on-dark);
  font-family:var(--font-body);
  font-weight:var(--weight-regular);
  font-size:var(--size-floor);
  line-height:1.45;
  text-align:left;
  white-space:normal;
  box-shadow:var(--shadow-floating);
  transform:translateX(-50%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--duration-fast) var(--ease);
}
.tip:hover > .tip-note,
.tip:focus > .tip-note,
.tip:focus-within > .tip-note,
.tip.is-open > .tip-note{ opacity:1; visibility:visible; }
.tip:focus-visible{ outline:3px solid var(--acc-deep,var(--os-link)); outline-offset:2px; border-radius:50%; }

/* ===== I. The footer line: weather, visitors, readers online ===== */
.gpcf-fwidgets{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2) var(--space-9);
  font-size:var(--size-chrome);
  color:var(--on-dark-muted);
}
.gpcf-fw{ display:inline-flex; align-items:center; gap:var(--space-3); }
.gpcf-fw[hidden]{ display:none; }
.gpcf-fw b{ font-weight:var(--weight-bold); color:var(--on-dark); }
.gpcf-fw .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--on-dark-muted);
}
.gpcf-fw .dot-live{ background:var(--os-pearl-aqua); }

/* ===== J. The currency converter ===== */
.gpcf-fx[hidden]{ display:none; }
.gpcf-fx .fxrow{ display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-5); }
.gpcf-fx label{ font-size:var(--size-chrome); font-weight:var(--weight-bold); color:var(--os-heading); }
.gpcf-fx .fxpair{ display:flex; gap:var(--space-3); }
.gpcf-fx .fxin,
.gpcf-fx .fxsel{
  box-sizing:border-box;
  min-height:var(--tap-min);
  padding:var(--space-3) var(--space-5);
  border:1px solid var(--os-line);
  border-radius:var(--radius-sm);
  background:var(--os-card);
  color:var(--os-text);
  font-family:var(--font-body);
  font-size:var(--m-size-input);
}
.gpcf-fx .fxin{ width:100%; min-width:0; }
.gpcf-fx .fxsel{ flex:0 0 auto; }
.gpcf-fx .fxin:focus,
.gpcf-fx .fxsel:focus{ outline:3px solid var(--acc-deep,var(--os-link)); outline-offset:1px; border-color:transparent; }
.gpcf-fx .fxsrc{ margin:var(--space-5) 0 0; font-size:var(--size-chrome); }
.gpcf-fx .fxsrc a{ color:var(--os-muted); }

/* ===== K. The mobile Directory overlay, variant A =====
   The whole overlay stands in the chrome near-black, the tiles run in three columns edge to edge, the
   links, the close button and the language switch are white on it. */
.gpcf-mobile-nav.dir-dark:not([hidden]){
  background:var(--dir-bg,var(--os-chrome-dark,var(--os-ink-black)));
  padding-left:0;
  padding-right:0;
  color:var(--on-dark);
}
.gpcf-mobile-nav.dir-dark .cats{
  padding:0;
  border-radius:0;
  gap:2px;
}
.gpcf-mobile-nav.dir-dark .cat{ border-radius:0; }
.gpcf-mobile-nav.dir-dark > :not(.cats){ margin-left:var(--page-gutter-mobile); margin-right:var(--page-gutter-mobile); }
.gpcf-mobile-nav.dir-dark a.nav{ color:var(--on-dark); }
.gpcf-mobile-nav.dir-dark .cats-more__rub,
.gpcf-mobile-nav.dir-dark .cats-more a{ color:var(--on-dark); }
.gpcf-mobile-nav.dir-dark .gpcf-mobile-nav__close{ border-color:var(--on-dark-border); color:var(--on-dark); margin:0; }
.gpcf-mobile-nav.dir-dark .lang{ background:var(--on-dark-fill); align-self:flex-start; }
.gpcf-mobile-nav.dir-dark .lang a{ color:var(--on-dark); }
.gpcf-mobile-nav.dir-dark .lang a[aria-current]{ background:var(--on-dark); color:var(--os-heading); }

/* ===== L. The old WPBakery post grids (vc_basic_grid) as the card family ===== */
:is(.entry-content,.abody,.desc) .vc_grid-container .vc_grid-item-mini{
  overflow:hidden;
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  background:var(--os-card);
  transition:box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
:is(.entry-content,.abody,.desc) .vc_grid-container .vc_grid-item-mini:hover{ box-shadow:var(--shadow-floating); transform:translateY(-2px); }
:is(.entry-content,.abody,.desc) .vc_grid-container .vc_gitem-zone-a,
:is(.entry-content,.abody,.desc) .vc_grid-container .vc_gitem-zone-b{ border-radius:0; }
:is(.entry-content,.abody,.desc) .vc_grid-container .vc_gitem-zone img{ border-radius:0; box-shadow:none; padding:0; background:none; }
:is(.entry-content,.abody,.desc) .vc_grid-container .vc_gitem-zone-c,
:is(.entry-content,.abody,.desc) .vc_grid-container .vc_gitem-col{ background:var(--os-card); padding:var(--space-6) var(--space-7) var(--space-7); }
:is(.entry-content,.abody,.desc) .vc_grid-container .vc_gitem-post-data-source-post_title :is(h2,h3,h4,div){
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-card-title);
  line-height:var(--lh-card-title);
  color:var(--os-heading);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
}
:is(.entry-content,.abody,.desc) .vc_grid-container .vc_gitem-post-data-source-post_excerpt,
:is(.entry-content,.abody,.desc) .vc_grid-container .vc_gitem-post-data-source-post_excerpt p{
  margin:var(--space-3) 0 0;
  font-size:var(--size-small);
  line-height:var(--lh-body);
  color:var(--os-muted);
}
:is(.entry-content,.abody,.desc) .vc_grid-container .vc_gitem-post-data-source-post_date{ font-size:var(--size-caption); color:var(--os-muted); }

/* ===== M. Search results ===== */
.searchres .cards{ margin-top:0; }
.searchres .pager{ margin-top:var(--space-12); }