.appdrag-palette-background-color-dark-primary-color{background-color:#3b063b;}.appdrag-palette-color-primary-color{color:#673266;}.appdrag-palette-background-color-primary-color{background-color:#673266;}.appdrag-palette-border-left-color-primary-color{border-left-color:#673266;}.appdrag-palette-border-right-color-primary-color{border-right-color:#673266;}.appdrag-palette-border-top-color-primary-color{border-top-color:#673266;}.appdrag-palette-border-bottom-color-primary-color{border-bottom-color:#673266;}.appdrag-palette-color-light-primary-color{color:#965e94;}.appdrag-palette-background-color-light-primary-color{background-color:#965e94;}.appdrag-palette-background-color-hover-light-primary-color:hover{background-color:#965e94!important;}.appdrag-palette-border-bottom-color-light-primary-color{border-bottom-color:#965e94;}.appdrag-palette-color-text-color{color:#212121;}.appdrag-palette-color-secondary-text-color{color:#727272;}html body .section-container h1{font-family: 'Pathway Gothic One';font-size: 42px ;color: rgba(255,255,255,1);text-transform: uppercase; }html body .section-container h2{font-family: 'Pathway Gothic One';font-size: 35px ;font-weight: normal;color: #3b063b;font-weight: normal;text-transform: uppercase; }html body .section-container h3{font-family: 'Pathway Gothic One';font-size: 30px ;font-weight: 300;color: rgba(0,0,0,1);font-weight: 300;text-transform: none; }html body .section-container h4,html body .section-container h5{font-family: 'Pathway Gothic One';font-size: 25px ;font-weight: 300;color: #673266;font-weight: 300;text-transform: none; }html body .section-container p,html body .section-container .appallin-text-editable,html body .section-container .appdrag-text-edit{font-family: 'Raleway';font-size: 18px ; }/* ---------------------------------------------------------------------------
   Migration fix 2026-08-07 — hide the stray "Container" menu artifact.

   appdrag.js lifts the placeholder <a class="appallin-menu-container-item-link">
   out of its <li class="appallin-menu-container-item"> and appends it directly
   to the navbar, so the bundled rule .appallin-menu-container-item{display:none}
   no longer applies to it. Real menu entries stay inside <li>, so scoping to a
   DIRECT child of the navbar hits only the orphaned placeholder.

   Do not delete the placeholder <li> from the HTML instead — appdrag.js maps
   config/menu.json onto those elements positionally, and removing one flattens
   the Services dropdown into 20 top-level items.
   --------------------------------------------------------------------------- */.appallin-generated-navbar > a.appallin-menu-container-item-link{ display: none !important; }/* Mobile drawer typography — match the desktop navbar.
   The drawer shipped at font-weight:100 with 6.65px letter-spacing and no
   uppercase, against the desktop navbar's 400 / 2px / uppercase. Pathway
   Gothic One has only a 400 weight, so 100 renders as a synthesized thin -
   spindly, and stretched by the tracking. Reported as hard to read on a phone,
   which is where 22 of these links live. */.drawer-menu-item{
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}/* Sub-items are .drawer-child, NOT .drawer-dropdown-menu-item - that class
   does not exist in the drawer and the first attempt silently did nothing.
   Sized up from the shipped 19px, which was small against the desktop
   navbar's 25px and hard to read on a phone. Top-level items lead, the
   Services sub-items sit a step below so the hierarchy still reads. */.drawer-menu-item{ font-size: 23px !important; }.drawer-menu-item.drawer-child{ font-size: 20px !important; }/* Mobile drawer: collapse the 16 Services links behind a caret.
   They are flat <li> siblings of the Services item - not nested - so there is
   no container to toggle; js/lang.js tags them .pmc-drawer-sub at runtime.
   Collapsed by default, which takes the drawer from 23 items to 7.
   The caret is a separate <button> rather than hijacking the Services link,
   so tapping "SERVICES" still navigates to /Services. Everything is scoped to
   the drawer breakpoint - now 1200px, not 992: the French and Arabic
   navbars need 659px and 628px of items but only get 562px between 1024
   and 1199, so they wrapped to two rows and spilled out of the reserved
   80px onto the hero. Above it the drawer is hidden and the desktop
   dropdown is pure CSS :hover, which must not be disturbed. */@media (max-width: 1199px){.drawer-menu li.pmc-drawer-sub{ display: none; }.drawer-menu li.pmc-drawer-sub.pmc-open{ display: block; }.pmc-drawer-caret{
    float: right; background: none; border: 0; color: inherit;
    font-size: 20px; line-height: 1; padding: 10px 18px; cursor: pointer;
  }.pmc-drawer-caret span{ display: inline-block; transition: transform .15s; }.pmc-drawer-caret[aria-expanded="true"] span{ transform: rotate(180deg); }}/* Embeds have a hardcoded 700px width and are absolutely positioned, so at
   iPad-landscape widths they run past the viewport: left 355 + 700 = 1055
   against a 1024 viewport, giving the whole page a 31px horizontal scroll.
   Only bites between roughly 1000 and 1055px, which is why 375/768/1280 - the
   three widths visual-check captures - never caught it. */@media (max-width: 1100px){.appdrag-embed > div,.appdrag-embed iframe{ max-width: 100% !important; }}/* ===========================================================================
   appdrag.js retirement — see js/pmc.js and js/layout.js
   =========================================================================== *//* The 136 social / logo tiles were bare <div link-url="…"> made clickable by
   an appdrag.js jQuery handler. They are real <a> now, which means they also
   inherit the UA anchor styling a <div> never had, and they need their block
   layout back — several carry col-sm-* and are floated grid cells. */a.pmc-linkbox{
  display: block;
  color: inherit;
  text-decoration: none;
}/* They are keyboard-reachable for the first time, so they need a focus ring.
   :focus-visible keeps it off mouse clicks. */a.pmc-linkbox:focus-visible{
  outline: 3px solid #fff;
  outline-offset: 2px;
}/* The hamburger was <div type="button">; it is a real <button> now. Strip the
   UA chrome ONLY.
   Do NOT add `padding: 0` here. The drawer stylesheet positions the hamburger
   bars entirely with padding — a <div> with these classes computes
   18px 18px 30px 7.5px — and zeroing it collapses the icon into the top-left
   corner of the header, clipped. Only padding-right carries !important, so a
   plain `padding: 0` silently wins on the other three sides.
   Background is untouched too: the element carries
   .appdrag-palette-background-color-primary-color. */button.drawer-hamburger{
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  margin: 0;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}button.drawer-hamburger:focus-visible{
  outline: 3px solid #fff;
  outline-offset: -3px;
}/* WOW.js scroll reveals are gone with appdrag.js. It used to hold each .wow
   element at visibility:hidden and start its animation when scrolled into
   view; nothing hides them now, so they are simply visible — no flash, no
   CLS, nothing that needs JS to become readable.
   The inline animation-name declarations baked into the export are KEPT:
   `tada` is the attention wiggle on 17 "BOOK ONLINE NOW" / "CALL" buttons and
   is a deliberate design element, not an artifact. js/pmc.js re-adds the
   scroll trigger WOW.js used to provide.

   This rule used to be `animation-name: none !important` for all of .wow.
   That was wrong twice over: it silently deleted the CTA wiggle sitewide, and
   the fragility it was meant to fix had already been measured and shown NOT
   to be a live bug (the opacity:0 reading came from a throttled background
   tab, where the timeline is paused; focus the tab and it animates in).

   HOW THE DURATION GETS THERE. The markup only ever carried
   `animation-name:tada` inline — never a duration. The duration came from
   animate.css's `.animated{animation-duration:1s;animation-fill-mode:both}`,
   and WOW.js added `class="animated"` when the element scrolled into view.
   Deleting appdrag.js took WOW.js with it, so the name stayed and the
   duration became 0s: the wiggle silently stopped. js/pmc.js re-adds the
   trigger under its own class; this supplies what `.animated` used to.
   The one bounceIn element carries an inline animation-duration:2s, which
   still wins over this.

   WHAT appdrag.js ACTUALLY DID, which is what these rules reproduce:

     $(".wow").not(".wow-animation-hover").each(function () {
       css("animation-name",            attr("wow-animation"));
       css("animation-duration",        attr("data-wow-duration"));
       css("animation-iteration-count", attr("wow-repeat"));
     })

   Three consequences that a first reading misses:
     * `animation-name` came from the wow-animation ATTRIBUTE and overrode the
       inline `animation-name:none` that 12 of these carry — so they animated
       too, despite the inline style saying otherwise.
     * `wow-repeat="infinite"` is on all 29 tada elements. The wiggle is meant
       to LOOP; restoring only the duration made it play once and stop.
     * no element carries .wow-animation-hover, so none of this was
       hover-scoped. */.wow.pmc-revealed[wow-animation]{
  animation-duration: 1s;
  animation-fill-mode: both;
}/* !important: beats the inline animation-name:none, exactly as the JS did. */.wow.pmc-revealed[wow-animation="tada"]{
  animation-name: tada !important;
}.wow.pmc-revealed[wow-animation="bounceIn"]{
  animation-name: bounceIn !important;
}.wow.pmc-revealed[wow-repeat="infinite"]{
  animation-iteration-count: infinite;
}@media (prefers-reduced-motion: reduce){/* Killing the NAME, not the duration: bounceIn's 0% frame is opacity:0, so
     removing only the duration would leave that element stuck hidden. */.wow,.wow.pmc-revealed{
    animation-name: none !important;
  }}/* Hero typewriter.
   appdrag.css ships .appdrag-component{display:none} and reveals it with
   .loaded, which front.js added once the component had been fetched and
   eval'd. Nothing adds .loaded now, so the whole hero word would stay
   display:none. Revealing it in CSS rather than re-creating the .loaded
   handshake in JS means it is visible even if pmc.js never runs.
   (0,2,0) beats .appdrag-component's (0,1,0). */.appdrag-component.tte_wrapper{
  display: block;
}/* The four words ship as .tte_mid_label spans carrying
   .hidden{display:none !important} from appdrag.css, which SURVIVES the
   retirement — so with no JS the hero would render nothing at all. This shows
   the first word as the static fallback. (0,3,0) beats .hidden's (0,1,0), so
   the !important duel resolves on specificity. */.tte_wrapper .tte_mid_label:first-child{
  display: inline !important;
}/* Once pmc.js is running the labels are the data source, not the display.
   Same specificity as the rule above, so this MUST stay after it. */.tte_wrapper.pmc-tte-on .tte_mid_label{
  display: none !important;
}/* The typed word must never re-wrap. js/pmc.js reserves the widest label's
   WIDTH, which is not enough on its own: at 412px an Arabic label can still
   break to a second line mid-word, changing the hero's HEIGHT and moving the
   whole .section-container. That produced a recurring shift every 1-4s and an
   unbounded CLS on /ar/ (0.137 at 25s and still climbing) while English sat
   flat at 0.0666 - RTL made it visible, but the cause is the wrap, not the
   direction. */.pmc-tte-out{
  display: inline-block;
  white-space: nowrap;
}.pmc-tte-cursor{
  animation: pmc-tte-blink 1s step-end infinite;
}@keyframes pmc-tte-blink {
  from, to { opacity: 1; }
  50%      { opacity: 0; }
}@media (prefers-reduced-motion: reduce){.pmc-tte-cursor{ animation: none; }}/* Arabic tables were rendering left-to-right on all 22 /ar/ pages — 278 of
   them: every price/duration card and both opening-hours blocks. appdrag.css
   sets .appdrag-structure-element{direction:ltr} unconditionally, and nothing
   ever put it back under RTL, so the whole data layer of the Arabic site read
   in the wrong direction while the prose around it read correctly.

   Specificity, not !important, is what wins here: `.body-rtl .x` (0,2,0) beats
   `.x` (0,1,0). That distinction matters on this site — an inline !important
   CANNOT be beaten by a stylesheet !important, which is why the earlier RTL
   work silently did nothing. These are stylesheet declarations, so they are
   beatable. */.body-rtl .appdrag-structure-element,.body-rtl .appdrag-structure-element td,.body-rtl .appdrag-structure-element tr{
  direction: rtl;
}/* "Ladies Only" corner ribbon (2026-08-08).
   -------------------------------------------------------------------------
   The salon's strongest differentiator - all-female staff, no curtain, no
   surcharge for veiled clients - had exactly one page and no presence on the
   other 62. This puts it on the hero of every page a search visitor can land
   on, in that page's own language.

   ANCHORED TO THE HERO, NOT THE VIEWPORT. Both top corners are occupied by
   chrome at every breakpoint: hamburger and the EN.FR.ع switcher in a 58px
   sticky bar below 768, logo and navbar above it. A viewport-pinned ribbon
   collides with one or the other - the same collision that made the RTL
   drawer mirror unshippable. The hero starts below both (y=59 mobile, y=81
   desktop), so a ribbon in ITS corner never meets them.

   THE SQUARE IS THE CLIPPER, NOT THE HERO. body overflow-x is hidden below
   992px but VISIBLE above it, so an overhanging rotated band would add
   sideways scroll on desktop only - exactly the 1024-shaped blind spot that
   shipped the iPad-landscape defect. .pmc-ribbon is a square with
   overflow:hidden that clips the band itself. The hero's own overflow is left
   alone: it has 2-4 absolutely-positioned descendants that clipping would
   cut.

   The hero is already position:relative, so nothing about it changes.
   pointer-events:none on the square stops a 150px transparent triangle
   swallowing clicks meant for the hero CTA; the band re-enables them. */.pmc-ribbon{
  position: absolute;
  top: 0;
  right: 0;
  width: 270px;
  height: 270px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}.pmc-ribbon-band{
  pointer-events: auto;
  position: absolute;
  top: 62px;
  right: -93px;
  width: 394px;
  display: block;
  padding: 16px 0;
  transform: rotate(45deg);
  background: #fff;
  color: #3b063b !important;
  text-align: center;
  text-decoration: none !important;
  font-family: 'Pathway Gothic One', 'Helvetica Neue', Arial, sans-serif;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}.pmc-ribbon-band:hover,.pmc-ribbon-band:focus{
  background: #3b063b;
  color: #fff !important;
}/* RTL: mirror to the other corner and rotate the other way.
   letter-spacing MUST go back to normal - Arabic is cursive, and spacing the
   letters breaks the joins so the word renders as disconnected glyphs.
   Pathway Gothic One has no Arabic glyphs at all, so Arabic falls through to
   the system stack per-character on its own. */.body-rtl .pmc-ribbon{
  right: auto;
  left: 0;
}.body-rtl .pmc-ribbon-band{
  right: auto;
  left: -93px;
  transform: rotate(-45deg);
  letter-spacing: normal;
  font-size: 26px;
}@media (max-width: 767px){.pmc-ribbon{ width: 190px; height: 190px; }.pmc-ribbon-band{
    top: 40px; right: -78px; width: 278px;
    padding: 11px 0; font-size: 21px; letter-spacing: .12em;
  }.body-rtl .pmc-ribbon-band{ right: auto; left: -78px; font-size: 19px; }}/* Mobile header, reworked 2026-08-08 — and it matters more than it used to,
   because a9174f8 moved the drawer breakpoint to 1200, so this is now what
   iPad landscape sees rather than a rare narrow-desktop case.

   Four things, all scoped to the drawer breakpoint so the desktop navbar is
   untouched:

   1. COLOUR. The bar painted #673266 while the desktop navbar paints #3b063b.
      Two purples for the same piece of furniture, depending only on viewport
      width. Desktop is the correct one.
   2. The small heart mark sat jammed against the hamburger, a second logo on
      a page that already shows the full wordmark right below it.
   3. That wordmark is now centred rather than pinned 27px from the left edge.
   4. Opening the drawer used to slide the whole bar 250px to the right
      (.drawer--left.drawer-open .drawer-hamburger{left:250px !important}).
      The drawer now overlays instead. The bar keeps z-index 99 above the
      drawer's 20 on purpose: the drawer covers the page and the logo, but the
      hamburger stays on top of it and therefore stays tappable to close. */@media (max-width: 1199px){.drawer-hamburger{ background: #3b063b !important; }/* THE FULL WORDMARK ON PHONES TOO, not the small heart.
     The box has to clear the hamburger on one side and the EN.FR.ع switcher
     on the other, and on a 360px phone that leaves only 118px of centred
     space (measured: hamburger ends at 38, switcher starts at 239). The
     wordmark is 3.57:1, so at 26px tall it paints 93px wide and fits with
     room to spare. */.pmc-header-logo{
    display: block;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;           /* the bar-button is 99 */
    width: 124px;
    height: 58px;
    background-image: url('/uploads/1556677104101-inline-paula-coiffure-logo-white.w450.c6c98404.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 30px;
  }.drawer-topbar .appdrag-logo-container{ display: none !important; }.drawer--left.drawer-open .drawer-hamburger{ left: 0 !important; }/* ...which means the bar now sits ON TOP of the drawer's first item.
     It used to slide 250px right and get out of the way; overlaying instead
     left "Home" underneath a 58px opaque fixed bar at y=0 - present in the
     DOM, display:list-item, and completely unreachable. Push the drawer's
     content below the bar. padding rather than top, so the drawer's own
     background still covers the full height. */.drawer-nav{ padding-top: 58px; }}/* The small heart comes out, and the full wordmark is centred, ONLY where the
   wordmark actually exists. Its row is d-none d-lg-block, so below 992 it is
   hidden and the heart in the bar is the only logo the page has - removing it
   there left phones with a header of a hamburger and nothing else. *//* Below 375 the switcher starts at x=198 on a 320px screen, leaving only 38px
   either side of centre - so the wordmark has to come down or it runs into it.
   Measured, not guessed: at 30px tall it paints 107px and overlaps by 15px. */@media (max-width: 374px){.pmc-header-logo{ width: 88px; background-size: auto 22px; }}@media (min-width: 480px) and (max-width: 991px){.pmc-header-logo{ width: 240px; background-size: auto 38px; }}@media (min-width: 992px) and (max-width: 1199px){/* ONE BAR. The page shipped two stacked bands here: the 58px hamburger bar,
     and below it a full-width band holding the wordmark. Merged into one.

     The wordmark cannot go inside the bar as a link, because .drawer-topbar
     lives INSIDE <button class="drawer-hamburger drawer-toggle"> and an <a>
     inside a <button> is invalid and unclickable. So .pmc-header-logo is a
     SIBLING of that button, laid over it - exactly how the EN.FR.ع switcher
     already works - with a z-index above the button so it takes its own
     clicks. build-i18n's localise_urls repoints its href, so /fr/ and /ar/
     get their own home page. *//* Room to breathe once the viewport is wide enough. */.pmc-header-logo{ width: 264px; background-size: auto 38px; }/* The old second band. NOT written with :has() - Chrome parses
     `main .row:has(> a > .appdrag-logo-container)` fine via Element.matches()
     but DROPS it from a stylesheet, so the rule sat in the file, matched the
     row when queried, and never applied. .row.d-none.d-lg-block matches this
     one row and nothing else on the page. */.appallin-universal-navbar .row.d-none.d-lg-block{ display: none !important; }}/* "Proudly Canadian owned" — footer line and hero badge (2026-08-08).
   The leaf is fa-canadian-maple-leaf (U+F785), a BRANDS glyph, which is why
   the markup uses `fab` and not `fas`. Adding it meant re-running
   tools/subset-icons.py: the shipped subset carries only the glyphs the
   source actually uses, so a new icon renders as NOTHING - right box, right
   computed font, no glyph, no error (§3.5l). *//* Sits in the closing copyright bar, alongside "Paulacoiffure.com © All
   Rights Reserved" - where ownership and provenance belong. inline-flex, not
   flex, because it shares that centred line with the site name. */.pmc-canadian{
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-right: 1.1em;
  opacity: .92;
}.pmc-canadian i{ font-size: 1em; }.body-rtl .pmc-canadian{ margin-right: 0; margin-left: 1.1em; }/* The footer address needs 313px of text but its cell gives the link 287px,
   so it has to wrap somewhere - and it was splitting "H3H" from "2J4".
   Forcing the cell to width:100% was tried and made it WORSE: the rule hits
   every cell in the block including the icon column, and the address went
   from two lines to three. The fix is in the markup instead - a &nbsp; inside
   the postal code - so the break happens after "Montreal QC," and the code
   stays whole.
   Getting the whole address onto ONE line was tried twice and abandoned: the
   text needs 313px and the footer column is 390px, so it only fits by
   widening that column and reflowing the footer's three-column layout, which
   is far more disruption than the line break is worth. *//* The hero badge sits under the ribbon, in the same corner, so RTL mirrors
   both together and they cannot collide - which a second diagonal ribbon on
   the opposite corner would have done on all 22 Arabic pages.
   position:absolute inside the already-relative hero, so it contributes no
   layout shift. */.pmc-ca-badge{
  position: absolute;
  /* Bottom corner, not top: the ribbon owns the top corner and its clipping
     square is 270px deep, so anything above that runs straight through the
     diagonal band (the first attempt did). The bottom is empty, and because
     both sit in the same hero they mirror together under RTL. */
  bottom: 22px;
  right: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 7px 14px;
  background: rgba(59, 6, 59, .82);
  color: #fff;
  font-family: 'Pathway Gothic One', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 2px 0 0 2px;
}.pmc-ca-badge i{ font-size: 15px; }.body-rtl .pmc-ca-badge{
  right: auto;
  left: 0;
  letter-spacing: normal;
  border-radius: 0 2px 2px 0;
}@media (max-width: 767px){.pmc-ca-badge{ bottom: 16px; padding: 5px 10px; font-size: 12px; letter-spacing: .08em; }.pmc-ca-badge i{ font-size: 12px; }}