/* brax-restore.css — site-specific repairs for pharmacie-brax.com.
   Kept out of restore-extras.css because restore_04_polish.py regenerates that file. */

/* ---------------------------------------------------------------------------
   Body/heading typeface.
   The pages used to load Adobe Typekit kit pgh7wnw for "brandon-grotesque".
   That kit is domain-authorised to Valwin, so on the restored host it answers 403
   and the entire site falls back to a serif — and brandon-grotesque itself is a
   commercial family we may not redistribute. Montserrat is the closest open
   geometric sans; it is served from this site's own /fonts/ and declared under the
   family name the shipped CSS already asks for, so no stylesheet had to change.
   --------------------------------------------------------------------------- */
@font-face{font-family:'brandon-grotesque';font-style:italic;font-weight:100;font-display:swap;src:url(/fonts/montserrat-100-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'brandon-grotesque';font-style:italic;font-weight:100;font-display:swap;src:url(/fonts/montserrat-100-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'brandon-grotesque';font-style:italic;font-weight:300;font-display:swap;src:url(/fonts/montserrat-100-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'brandon-grotesque';font-style:italic;font-weight:300;font-display:swap;src:url(/fonts/montserrat-100-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'brandon-grotesque';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/montserrat-100-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'brandon-grotesque';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/montserrat-100-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'brandon-grotesque';font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/montserrat-100-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'brandon-grotesque';font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/montserrat-100-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'brandon-grotesque';font-style:italic;font-weight:700;font-display:swap;src:url(/fonts/montserrat-100-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'brandon-grotesque';font-style:italic;font-weight:700;font-display:swap;src:url(/fonts/montserrat-100-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'brandon-grotesque';font-style:italic;font-weight:900;font-display:swap;src:url(/fonts/montserrat-100-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'brandon-grotesque';font-style:italic;font-weight:900;font-display:swap;src:url(/fonts/montserrat-100-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'brandon-grotesque';font-style:normal;font-weight:100;font-display:swap;src:url(/fonts/montserrat-100-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'brandon-grotesque';font-style:normal;font-weight:100;font-display:swap;src:url(/fonts/montserrat-100-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'brandon-grotesque';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/montserrat-100-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'brandon-grotesque';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/montserrat-100-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'brandon-grotesque';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/montserrat-100-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'brandon-grotesque';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/montserrat-100-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'brandon-grotesque';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/montserrat-100-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'brandon-grotesque';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/montserrat-100-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'brandon-grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/montserrat-100-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'brandon-grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/montserrat-100-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'brandon-grotesque';font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/montserrat-100-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'brandon-grotesque';font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/montserrat-100-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ---------------------------------------------------------------------------
   /cookies/ — preference row.
   The original had an on/off switch driving a Google Analytics opt-out. This
   restore ships no analytics (the gaId/ga4Id in the hydration props are blanked),
   so the switch would have governed nothing. It is replaced by a plain status
   label; these rules make that label read as a deliberate part of the row.
   --------------------------------------------------------------------------- */
.cookies__container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 16px;
  margin: 18px 0 10px;
}
/* the description column takes the remaining width; the note drops to its own full-width row */
.cookies__container > div:nth-child(2) { flex: 1 1 260px; min-width: 0; }
.cookies__state {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid #c9c9c9;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.5;
  color: #6b6b6b;
  white-space: nowrap;
}
.cookies__title { font-weight: 600; margin: 0 0 4px; }
.cookies__description { margin: 0; }
.cookies__note {
  flex: 0 0 100%;
  margin: 4px 0 0;
  font-size: 15px;
  font-style: italic;
  color: #6b6b6b;
}

/* ---------------------------------------------------------------------------
   Footer map.
   Was a live Google Maps <iframe> (~40 third-party requests per page, chrome
   rendered in the VIEWER's locale). Now a PNG stitched from OpenStreetMap tiles
   at build time and served from this site, so the page contacts nobody. The
   #map container was sized for an iframe, so the image has to fill it.

   The theme sizes #map as a fixed 200x200 box, so the image is made to cover it and the
   ODbL attribution (which must stay visible) sits on a translucent strip over the picture
   instead of below it — under the box it wrapped onto three lines in grey-on-green and got
   clipped by the container.
   --------------------------------------------------------------------------- */
#map {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
#map .static-map {
  display: block;
  width: 100%;
  height: 100%;
}
#map .static-map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
#map .static-map__credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 4px 6px;
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, .55);
}
#map .static-map__credit a { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Page titles.
   The Valwin theme ships `.valwinFlowSectionsTitle{display:none}`, so the H1 of
   the homepage, /ma-pharmacie/ and /nos-conseils-sante/ existed in the markup but
   rendered at 0x0 — three of eight pages, including the site's most important
   commercial page, had no visible H1 at all.

   ONLY the container is unhidden. The <h1> itself is left entirely to the theme's own
   `.info h1` rules, which already present a page title correctly at both breakpoints: a
   full-bleed gradient banner with white text below 992px, action-colour on white above it
   (exactly how /cookies/ and the other pages with a visible H1 already look). An earlier
   attempt to restyle it here put dark grey text on top of that gradient.
   --------------------------------------------------------------------------- */
.valwinFlowSectionsTitle {
  display: block;
}
/* the patient-file section legitimately hides its own title — leave that alone */
#patient-file .valwinFlowSectionsTitle { display: none; }

/* ---------------------------------------------------------------------------
   News card description clamp.
   The clipper is the PARENT: the theme sets `.txt .news{height:68px;overflow:hidden}`
   while the <p> inside it is height:75px / line-height:18px / -webkit-line-clamp:4.
   The clamp keeps 4 lines, whose last line box ends at y=72 — but the 68px parent cuts
   the card at 68, straight through that line's baseline and descenders. Raising only the
   <p> (an earlier attempt) changes nothing, because the <p> is not what overflows.
   Both boxes are therefore set to 74px: 4 x 18px = 72px of text plus the 2px the font's
   descenders need below the last line box, which was measured in the browser (74 shows
   four whole lines with no sliver of a fifth; 76 leaks 1px of line five).
   The selector lists below are the theme's own, verbatim — see screen-*.css.
   --------------------------------------------------------------------------- */
#advices .actus .txt .news,
#advices-all-news .actus .txt .news,
#advices #news-listing #scoopIt .lists .txt .news,
#advices-all-news #news-listing #scoopIt .lists .txt .news,
#advices #advices-listing #healthCards .cardsListing .txt .news,
#advices-all-news #advices-listing #healthCards .cardsListing .txt .news,
#global-search #health-advices #healthCards .cardsListing .txt .news,
article .home #advices .actus .txt .news,
article .pharmacy #advices .actus .txt .news,
article .advices_new_design #advices .actus .txt .news {
  height: 74px;
}
article .home #advices .actus .txt .news p,
#advices .actus .txt .news p,
#advices-all-news .actus .txt .news p,
#advices #news-listing #scoopIt .lists .txt .news p,
#advices-all-news #news-listing #scoopIt .lists .txt .news p,
#advices #advices-listing #healthCards .cardsListing .txt .news p,
#advices-all-news #advices-listing #healthCards .cardsListing .txt .news p,
#global-search #health-advices #healthCards .cardsListing .txt .news p,
article .pharmacy #advices .actus .txt .news p,
article .advices_new_design #advices .actus .txt .news p {
  height: 74px;
}

/* ---------------------------------------------------------------------------
   Click-to-load YouTube facade (see _scripts/brax_fix_youtube.py).
   Looks like the player it replaces; loads nothing from Google until clicked.

   font-family is declared explicitly because the theme wraps this section in
   `.valwinFlowHealthVideos{all:initial}`, which resets inherited font to the UA default —
   the original <iframe> held no text of its own, so nothing showed it; the facade's caption
   does, and rendered in Times New Roman on an otherwise brandon-grotesque site.

   16/9 alone governs the box. An earlier `min-height:200px` fought the ratio: at 390px the
   column is ~220px wide, so the ratio asks for ~124px while the min-height forced 200px, and
   `object-fit:cover` then cropped the 16:9 poster hard on both sides.
   --------------------------------------------------------------------------- */
.yt-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  font-family: "brandon-grotesque", sans-serif;
  background: #10171a;
  cursor: pointer;
  border: 0;
}
.yt-facade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .85;
  transition: opacity .2s ease;
}
.yt-facade:hover img, .yt-facade:focus img { opacity: 1; }
.yt-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .62);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
}
.yt-facade__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent #fff;
}
.yt-facade:hover .yt-facade__play { background: rgba(0, 0, 0, .78); }
.yt-facade__note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 12px;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .65));
  text-align: center;
}
.yt-facade:focus-visible { outline: 3px solid #6f8451; outline-offset: 2px; }
/* the real player, inserted on click: it replaces the facade in the flow, so it has to take
   exactly the same box — otherwise the iframe falls back to its 300x150 UA default. */
.yt-facade__playing {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}