:root {
  --pp-rose: #d36e78;
  --pp-blue: #74aab7;
  --pp-ink: #3b3a3d;
  --pp-paper: #fff;
}
.container-header { box-shadow: 0 1px 8px rgb(0 0 0 / 10%); }
.container-header .navbar-brand img { max-height: 92px; width: auto; }
.container-header .mod-menu { gap: .2rem; }
.container-header .metismenu > li > a, .container-header .metismenu > li > button { font-size: .88rem; letter-spacing: .03em; text-transform: uppercase; }
.container-header .metismenu > li.active > a, .container-header .metismenu > li > a:hover { color: var(--pp-rose); }
.item-page { max-width: 1100px; margin: 0 auto; padding-block: clamp(2rem, 5vw, 4.5rem); }
.item-page h1, .item-page h2, .item-page h3 { color: var(--pp-blue); font-weight: 500; }
.item-page h1 { color: var(--pp-rose); margin-bottom: 1.5rem; }
.item-page h2 { margin-top: 2rem; }
.item-page h3 { margin-top: 1.5rem; }
.item-page p, .item-page li { line-height: 1.75; }
.item-page a { color: var(--pp-rose); }
.pp-home { margin: -2rem calc(50% - 50vw) 0; overflow: hidden; }
.pp-home > :not(.pp-hero) { max-width: 1100px; margin-inline: auto; padding-inline: 1rem; }
.pp-hero { position: relative; min-height: min(34vw, 445px); display: grid; place-items: center; color: var(--pp-paper); text-align: center; background: #3f3f43; }
.pp-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .78; }
.pp-hero div { position: relative; text-shadow: 0 2px 16px rgb(0 0 0 / 65%); }
.pp-hero p { margin: 0; font-size: clamp(1rem, 2vw, 1.5rem); letter-spacing: .08em; text-transform: uppercase; }
.pp-hero h1 { margin: .25rem 0 0; color: #fff; font-size: clamp(2rem, 5vw, 4.6rem); font-weight: 400; }
.pp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.pp-col img { max-width: 100%; height: auto; }
.pp-center { text-align: center; }
.pp-home .merci { max-width: 720px; margin: 3rem auto; text-align: center; }
.pp-home .merci .head2 { font-size: 1.75rem; color: var(--pp-rose); }
.pp-home .uk-button, .pp-home .btn, .item-page .btn { display: inline-block; padding: .7rem 1.25rem; background: var(--pp-rose); color: #fff; text-decoration: none; }
.pp-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: clamp(1.5rem, 4vw, 3rem) 0; }
.pp-gallery-item { margin: 0; overflow: hidden; background: #f5f5f4; }
.pp-gallery-item > a { display: block; aspect-ratio: 1; overflow: hidden; }
.pp-gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.pp-gallery-item:hover img { transform: scale(1.04); }
.pp-gallery-item figcaption { display: grid; gap: .25rem; padding: .75rem; color: var(--pp-ink); }
.pp-gallery-item figcaption span { font-size: .9rem; }
.pp-footer-columns { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; max-width: 1100px; margin: 0 auto; }
.pp-footer-columns h2 { margin: 0 0 .7rem; font-size: 1.1rem; color: inherit; }
.pp-footer-columns p { margin: .4rem 0; line-height: 1.6; }
.pp-footer-legal { max-width: 1100px; margin: 2rem auto 0; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / 30%); }
@media (max-width: 991px) { .container-header .navbar-brand img { max-height: 72px; } .container-header .metismenu > li > a, .container-header .metismenu > li > button { font-size: .8rem; } }
@media (max-width: 767px) { .item-page { padding-inline: 1rem; } .pp-home { margin-top: -1.25rem; } .pp-hero { min-height: 54vw; } .pp-grid, .pp-footer-columns { grid-template-columns: 1fr; gap: 1.25rem; } .pp-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } }
@media (prefers-reduced-motion: reduce) { .pp-gallery-item img { transition: none; } }
.pp-menu-toggle { display: none; border: 1px solid currentColor; background: transparent; color: inherit; padding: .45rem .7rem; font: inherit; }
@media (max-width: 767px) {
  .container-header .pp-menu-toggle { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; }
  .container-header .mod-menu { display: none; width: 100%; padding-top: .75rem; }
  .container-header .mod-menu.pp-menu-open { display: flex; flex-direction: column; align-items: stretch; }
  .container-header .mod-menu.pp-menu-open > li { width: 100%; }
  .container-header .mod-menu.pp-menu-open > li > a, .container-header .mod-menu.pp-menu-open > li > button { padding: .65rem 0; }
}
/* Source-measured Paris Perruque home composition. */
:root { --pp-source-ink:#666; --pp-source-panel:#d2d2d2; --pp-source-rose:#ad655f; }
.container-header { height:180px; min-height:180px; position:relative; background:#f5f5f5 !important; box-shadow:none; }
.container-header > .grid-child:first-child { height:180px; padding:20px max(0px,calc((100vw - 1720px) / 2)); align-items:center; }
.container-header .navbar-brand { height:140px; margin:0; padding:0; align-self:center; }
.container-header .navbar-brand img { max-height:140px; width:190px; object-fit:contain; }
.container-header > .container-nav { position:absolute; inset:0 340px 0 400px; height:180px; padding:0; align-items:center; justify-content:center; }
.container-header .mod-menu { width:auto; height:180px; align-items:center; }
.container-header .metismenu > li > a { color:#666; font-size:13px; font-weight:400; text-transform:uppercase; white-space:nowrap; }
.container-header .metismenu > li.active > a, .container-header .metismenu > li > a:hover { color:#c98790; }
.container-header .mod-menu > li:nth-last-child(-n+2) { display:none; }
.container-header::after { content:"☎  01 44 83 00 64"; position:absolute; right:15px; top:80px; color:#666; font-size:15px; }
.item-page { width:min(1200px,calc(100% - 80px)); max-width:1200px; margin:0 auto; padding:32px 0; }
.item-page:has(.pp-home) { width:auto; max-width:none; margin:0; padding:0; }
main:has(.pp-home) { margin-top:0 !important; }
.pp-home { width:100vw; max-width:none; margin:0 calc(50% - 50vw) !important; color:var(--pp-source-ink); font-family:Arial,sans-serif; }
.pp-home > * { box-sizing:border-box; max-width:none !important; padding-inline:0 !important; }
.pp-source-hero { height:clamp(400px,23vw,435px); overflow:hidden; }
.pp-source-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.pp-source-intro { width:min(1200px,calc(100% - 80px)); margin:40px auto; padding:40px; background:var(--pp-source-panel); min-height:228px; }
.pp-source-intro h2,.pp-source-length h2 { margin:0 0 24px; color:#666; font-size:20px; font-weight:400; letter-spacing:2px; text-transform:uppercase; text-align:center; }
.pp-source-intro p { margin:0; font-size:16px; line-height:1.8; }
.pp-source-spring { width:min(1200px,calc(100% - 80px)); display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:40px auto; }
.pp-source-spring img { width:100%; height:359px; object-fit:cover; display:block; }
.pp-source-thanks { min-height:439px; display:grid; place-items:center; padding:40px 10px; text-align:center; background:#f3f4f8 url('/images/homepage/paris-perruque-renseignements.jpg') left center/auto 100% no-repeat; }
.pp-source-thanks > div { width:min(680px,65vw); }
.pp-source-thanks img { width:130px; height:auto; }
.pp-source-thanks h2 { margin:14px 0; font-size:24px; font-weight:400; text-transform:uppercase; }
.pp-source-thanks p { font-size:16px; font-weight:600; line-height:1.6; }
.pp-source-btn { display:inline-block; padding:11px 18px; background:var(--pp-source-rose); color:#fff !important; font-size:13px; letter-spacing:1px; text-transform:uppercase; text-decoration:none; }
.pp-source-length { width:min(1200px,calc(100% - 80px)); margin:40px auto; text-align:center; }
.pp-source-length > p { max-width:1100px; margin:0 auto 30px; line-height:1.8; }
.pp-source-length-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:40px; text-align:left; }
.pp-source-length-card img { width:100%; height:340px; object-fit:cover; display:block; }
.pp-source-length-card h3 { margin:16px 0; color:#666; font-size:18px; font-weight:400; }
.pp-source-feature { width:min(1200px,calc(100% - 80px)); margin:70px auto; padding:40px; background:var(--pp-source-panel); display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.pp-source-feature img { width:100%; height:340px; object-fit:cover; }
.pp-source-feature h2 { font-size:30px; letter-spacing:2px; font-weight:400; text-align:center; }
.pp-source-feature p { font-size:18px; line-height:1.6; text-align:center; }
.container-footer { background:#fff !important; color:#666 !important; }
.container-footer a { color:#b26e73 !important; }
.pp-footer-columns { grid-template-columns:1fr 1fr 1fr 270px; border-top:1px solid #eee; padding:40px 0; }
.pp-footer-columns h2 { color:#b26e73; font-size:16px; letter-spacing:2px; text-transform:uppercase; }
.pp-footer-map { width:270px; height:220px; border:0; }
.pp-footer-legal { max-width:none; margin:0; padding:17px; text-align:center; color:#fff; background:#333; border:0; font-size:13px; letter-spacing:1px; text-transform:uppercase; }
.pp-footer-legal a { color:#d19094 !important; }
@media (min-width:768px) and (max-width:991px) { .container-header > .grid-child:first-child{padding:49px 0;height:180px}.container-header .navbar-brand{height:81px}.container-header .navbar-brand img{height:81px;width:115px}.container-header > .container-nav{inset:0 88px 0 115px;width:auto;padding:0!important;justify-content:flex-start}.container-header .mod-menu{width:550px;height:180px;flex-direction:row!important;flex-wrap:wrap;align-content:center;align-items:center;justify-content:flex-start}.container-header .mod-menu>li{padding:0}.container-header .mod-menu>li>a{display:flex;align-items:center;height:90px;padding:0 15px} }
@media (max-width:767px) { .container-header,.container-header .container-header{height:auto;min-height:92px;position:sticky!important;top:0;z-index:1000}.container-header > .grid-child:first-child{height:92px;padding:10px 16px}.container-header .navbar-brand img{height:70px;width:95px}.container-header > .container-nav{position:static;height:auto;padding:0 16px 12px}.container-header .mod-menu{height:auto}.container-header::after{display:none}.pp-source-hero,.pp-source-hero img{height:230px}.pp-source-intro,.pp-source-spring,.pp-source-length,.pp-source-feature{width:calc(100% - 30px)}.pp-source-intro{padding:24px;margin:24px auto}.pp-source-spring{grid-template-columns:repeat(2,1fr);gap:8px}.pp-source-spring img{height:250px}.pp-source-thanks{background-position:left bottom;background-size:auto 45%;min-height:560px;align-items:start}.pp-source-thanks>div{width:100%}.pp-source-length-grid,.pp-source-feature,.pp-footer-columns{grid-template-columns:1fr;gap:24px}.pp-source-length-card img{height:auto}.pp-source-feature{padding:24px;margin:40px auto}.pp-source-feature img{height:auto}.pp-footer-map{width:100%;height:220px} }

/* Contact form: retain the source's single-column phone layout without its fixed-width overflow. */
@media (max-width:767px) {
  .item-page:not(:has(.pp-home)) { width:100%; max-width:none; }
  .pp-grid > *, .pp-grid .rsform, .pp-grid .formResponsive, .pp-grid .formContainer,
  .pp-grid .formRow, .pp-grid .formSpan12, .pp-grid .formControls, .pp-grid .formBody { min-width:0; max-width:100%; }
  .pp-grid .rsform-input-box, .pp-grid .rsform-select-box, .pp-grid .rsform-text-box {
    width:100% !important; max-width:100%; box-sizing:border-box;
  }
}

/* Keep the desktop navigation inside its measured header band. */
@media (min-width:992px) {
  .container-header > .container-nav { width:auto !important; }
}

@media (max-width:767px) {
  .pp-grid .rsform-input-box, .pp-grid .rsform-select-box, .pp-grid .rsform-text-box { box-sizing:border-box !important; }
  .pp-grid .rsform form > div:not(.formContainer) { overflow-wrap:anywhere; }
}

/* RSForm retains a two-column source layout on tablets, constrained to its actual grid track. */
@media (min-width:768px) and (max-width:991px) {
  .pp-grid > *, .pp-grid .rsform, .pp-grid .formResponsive, .pp-grid .formContainer,
  .pp-grid .formRow, .pp-grid .formSpan12, .pp-grid .formControls, .pp-grid .formBody { min-width:0; max-width:100%; }
  .pp-grid .rsform-input-box, .pp-grid .rsform-select-box, .pp-grid .rsform-text-box {
    width:100% !important; max-width:100%; box-sizing:border-box !important;
  }
  .pp-grid .rsform form > div:not(.formContainer) { overflow-wrap:anywhere; }
}

/* Full-bleed homepage sections match the source viewport without 100vw scrollbar overflow. */
@media (max-width:991px) {
  .pp-home { width:calc(100% + 64px); margin:0 -32px !important; }
}

/* Source desktop article typography and one-row navigation. */
.item-page { font-family:Roboto,Arial,sans-serif; font-weight:300; color:#666; }
.item-page h1 { margin:0 0 20px; color:#d36e78; font-family:Lato,Arial,sans-serif; font-size:30px; font-weight:300; line-height:30px; text-transform:uppercase; }
.item-page h2, .item-page h3 { font-family:Lato,Arial,sans-serif; font-weight:400; }
.item-page p, .item-page li { color:#666; font-weight:300; }
@media (min-width:992px) {
  .container-header > .container-nav { inset:0 240px 0 190px; }
  .container-header .mod-menu { display:flex; flex-wrap:nowrap; justify-content:center; }
  .container-header .mod-menu > li > a { color:rgba(102,102,102,.9); font-family:Lato,Arial,sans-serif; font-size:13px; font-weight:400; line-height:180px; text-transform:uppercase; white-space:nowrap; }
}

@media (min-width:992px) {
  .item-page:not(:has(.pp-home)) { padding-top:14px; }
}

@media (min-width:992px) {
  .container-header > .container-nav { inset:0 184px 0 246px; }
}

/* Native replacement for the source Contact-page access map. */
body:has(.pp-contact-map) { overflow-x:clip; }
.item-page .pp-contact-map { display:block; width:100vw; height:400px; border:0; margin:40px calc(50% - 50vw) 250px; }
@media (max-width:991px) {
  .item-page .pp-contact-map { width:calc(100% + 64px); height:300px; margin:0 -32px 32px; }
}

@media (min-width:992px) {
  .item-page .pp-contact-map { width:calc(100vw - 15px); margin:10px calc(50% - 50vw + 7.5px) 250px; }
}

/* Preserve the source-specific Capillaire homme editorial title treatment. */
.item-page h1.pp-center { font-size:32px; line-height:38px; }

/* Source editorial H1 finish. */
.item-page h1 { letter-spacing:2px; text-shadow:none; }
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url(/media/templates/site/cassiopeia_extended/fonts/lato-300.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(/media/templates/site/cassiopeia_extended/fonts/lato-400.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
  src: url(/media/templates/site/cassiopeia_extended/fonts/roboto-300.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(/media/templates/site/cassiopeia_extended/fonts/roboto-400.ttf) format('truetype');
}

/* Source footer: centered four-column panel and full-width legal strip. */
.container-footer { margin-top:0; }
.container-footer > .grid-child { width:100%; max-width:none; padding:0 !important; display:block; }
#mod-custom119 { width:100%; }
.pp-footer-columns {
  width:calc(100% - 60px); max-width:1200px; margin:20px auto 0;
  padding:20px 0 30px; border-top:1px solid #ddd;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px;
  font:300 16px/28px Roboto,Arial,sans-serif; color:#666;
}
.pp-footer-columns > div { min-width:0; }
.pp-footer-columns h2 { margin:0 0 20px; font:300 16px/22px Lato,Arial,sans-serif; letter-spacing:2px; color:#d36e78; }
.pp-footer-columns p { margin:20px 0; font:300 16px/28px Roboto,Arial,sans-serif; }
.pp-footer-columns p:last-child { margin-bottom:0; }
.pp-footer-columns .pp-footer-arrow { color:#d36e78; font-weight:400; }
.pp-footer-columns strong { font-weight:400; }
.container-footer .pp-footer-columns a { color:#666 !important; text-decoration:none; }
.container-footer .pp-footer-columns a[href^="mailto:"] { color:#ad655f !important; }
.pp-footer-map { width:100%; height:250px; border:0; }
.pp-footer-legal {
  width:100%; max-width:none; box-sizing:border-box; min-height:92px;
  padding:10px; margin:0; background:#333; color:white;
  font:300 12px/16px Lato,Arial,sans-serif; letter-spacing:2px; text-transform:uppercase;
}
.container-footer .pp-footer-legal a { text-decoration:none; color:#ad655f !important; }
.pp-back-to-top { display:block; width:32px; height:20px; margin:20px auto 0; text-decoration:none; }
.pp-back-to-top::before { content:""; display:block; width:10px; height:10px; border-top:2px solid; border-left:2px solid; transform:translate(10px,5px) rotate(45deg); }
@media(max-width:1219px) { .pp-footer-columns { gap:30px; } }
@media(max-width:479px) { .pp-footer-columns { grid-template-columns:1fr; gap:0; } }

/* Native equivalents of the source scroll-triggered Widgetkit animations. */
.pp-reveal-pending { opacity:0; }
.pp-reveal-fade { animation:pp-fade 800ms linear both; }
.pp-reveal-scale { animation:pp-scale-down 500ms ease-out both; }
@keyframes pp-fade { from { opacity:0; } to { opacity:1; } }
@keyframes pp-scale-down { from { opacity:0; transform:scale(1.8); } to { opacity:1; transform:scale(1); } }
@media(prefers-reduced-motion:reduce) {
 .pp-reveal-pending { opacity:1; }
 .pp-reveal-fade,.pp-reveal-scale { animation:none; }
}
/* Native Joomla menu, with the source desktop shrink and off-canvas presentation. */
header.pp-site-header {
  --pp-header-height:180px;
  position:sticky !important; top:0; z-index:1030; display:flex;
  align-items:center; justify-content:space-between; flex-wrap:nowrap;
  height:var(--pp-header-height); min-height:0; padding:0 10px;
  background:#f5f5f5 !important; box-shadow:none;
  transition:height .2s ease-in-out;
}
header.pp-site-header.pp-header-small { --pp-header-height:90px; }
header.pp-site-header > .grid-child:first-child {
  flex:0 0 auto; width:auto; height:100%; padding:0;
}
header.pp-site-header .navbar-brand {
  height:auto; margin:0; padding:0; line-height:0;
}
header.pp-site-header .navbar-brand img {
  width:auto; height:140px; max-height:var(--pp-header-height);
  transition:height .2s ease-in-out;
}
header.pp-site-header.pp-header-small .navbar-brand img { height:90px; }
header.pp-site-header > .container-nav {
  position:static; inset:auto; flex:1; width:auto !important;
  height:100%; padding:0 !important; margin:0; display:flex; justify-content:center;
}
header.pp-site-header .mod-menu {
  display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center;
  width:auto; height:100%; gap:0; margin:0; padding:0; list-style:none;
}
header.pp-site-header .mod-menu > li { padding:0; margin:0; }
header.pp-site-header .mod-menu > li > a {
  display:flex; align-items:center; height:100%; padding:0 15px;
  font:400 13px/1 Lato,Arial,sans-serif; letter-spacing:0;
  color:rgba(102,102,102,.9); text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
}
header.pp-site-header .mod-menu > li.active > a,
header.pp-site-header .mod-menu > li > a:hover,
header.pp-site-header .mod-menu > li > a:focus-visible { color:#d36e78; }
header.pp-site-header::after { content:none; }
.pp-header-phone { flex:0 0 auto; color:#999; font:300 16px/28px Roboto,Arial,sans-serif; text-decoration:none; white-space:nowrap; }
.pp-menu-toggle { display:none; }
.pp-header-spacer { height:0; }
.pp-header-small + .pp-header-spacer { height:90px; }
.pp-drawer {
  position:fixed; inset:0; width:100%; max-width:none; height:100%; max-height:none;
  margin:0; padding:0; border:0; background:transparent; overflow:hidden;
}
.pp-drawer::backdrop { background:rgba(0,0,0,.1); }
.pp-drawer-panel {
  position:absolute; inset:0 auto 0 0; width:min(270px,100%); background:#222;
  overflow-y:auto; overscroll-behavior:contain; animation:pp-drawer-in .3s ease-in-out;
}
@keyframes pp-drawer-in { from { transform:translateX(-100%); } to { transform:translateX(0); } }
.pp-drawer .mod-menu { display:block; margin:0; padding:0; list-style:none; }
.pp-drawer .mod-menu > li { margin:0; padding:0; }
.pp-drawer .mod-menu > li:nth-last-child(-n+2) { display:none; }
.pp-drawer .mod-menu > li > a {
  display:block; padding:10px 25px; color:#ccc; text-decoration:none;
  font:300 16px/28px Roboto,Arial,sans-serif; text-transform:none;
}
.pp-drawer .mod-menu > li.active > a { background:#151515; color:#fff; }
.pp-drawer .mod-menu > li > a:hover,.pp-drawer .mod-menu > li > a:focus-visible { color:#fff; }
.pp-drawer-close { display:block; margin:16px 25px; padding:5px 10px; border:1px solid #777; background:transparent; color:#ccc; font:300 14px/24px Roboto,Arial,sans-serif; }
html.pp-modal-open { overflow:hidden; }
@media(min-width:1441px) { header.pp-site-header { padding-inline:max(30px,calc((100% - 1720px)/2)); } }
@media(max-width:1199px) and (min-width:992px) {
  header.pp-site-header .mod-menu > li > a { padding-inline:6px; font-size:12px; }
  header.pp-site-header .navbar-brand img { max-width:130px; object-fit:contain; }
  .pp-header-phone { font-size:13px; }
}
@media(max-width:767px) {
  header.pp-site-header,header.pp-site-header.pp-header-small { --pp-header-height:61px; padding:0 30px; border-bottom:1px solid #ddd; }
  header.pp-site-header > .grid-child:first-child { position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; }
  header.pp-site-header .navbar-brand img,header.pp-site-header.pp-header-small .navbar-brand img { height:54px; width:70px; max-height:54px; }
  header.pp-site-header > .container-nav { justify-content:flex-start; flex:0 0 auto; }
  header.pp-site-header .mod-menu { display:none; }
  header.pp-site-header .pp-menu-toggle {
    display:flex; align-items:center; justify-content:center; width:30px; height:60px;
    border:0; padding:0; margin:0; background:transparent; color:#626262;
  }
  .pp-menu-toggle span { display:block; width:16px; height:12px; border-top:2px solid; border-bottom:2px solid; position:relative; }
  .pp-menu-toggle span::before { content:""; position:absolute; top:4px; left:0; width:16px; border-top:2px solid; }
  .pp-header-phone { display:none; }
  .pp-header-small + .pp-header-spacer { height:0; }
}
@media(prefers-reduced-motion:reduce) {
  header.pp-site-header,header.pp-site-header .navbar-brand img { transition:none; }
  .pp-drawer-panel { animation:none; }
}
/* Perruques source gallery: five/three/two/one columns, filters and lightbox. */
body.itemid-111 .site-grid > .container-component { grid-column:full-start / full-end !important; }
body.itemid-111 .item-page { width:calc(100% - 60px); max-width:1200px; padding-inline:0; }
body.itemid-111 .pp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
body.itemid-111 .item-page p { margin:20px 0; line-height:28px; }
body.itemid-111 .pp-col > :first-child { margin-top:0; }
body.itemid-111 .pp-col > :last-child { margin-bottom:0; }
body.itemid-111 .item-page ul:not(.pp-gallery-filters) { margin:20px 0; padding-left:30px; }
body.itemid-111 .item-page li { line-height:28px; }
body.itemid-111 .pp-col > img { width:100%; }
.pp-gallery-filters { display:flex; gap:5px; padding:0; margin:20px 0; border-bottom:1px solid rgb(51 51 51 / 10%); }
.pp-gallery-filters button { margin:0 0 -1px; padding:8px 12px; border:1px solid transparent; border-bottom:0; background:transparent; color:rgb(102 102 102 / 50%); font:300 16px/28px Roboto,Arial,sans-serif; white-space:nowrap; }
.pp-gallery-filters button[aria-pressed="true"] { border-color:rgb(51 51 51 / 10%); background:white; color:#666; }
.pp-gallery-filters button:hover { color:#626262; border-color:rgb(51 51 51 / 10%); }
.pp-perruques-gallery { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:0; }
.pp-perruques-gallery .pp-gallery-item { background:transparent; }
.pp-perruques-gallery .pp-gallery-item[hidden] { display:none; }
.pp-perruques-gallery .pp-gallery-item > a { position:relative; aspect-ratio:1; }
.pp-perruques-gallery img { transition:transform .3s ease-out; }
.pp-perruques-gallery .pp-gallery-item:hover img,
.pp-perruques-gallery .pp-gallery-item:focus-within img { transform:scale(1.1); }
.pp-perruques-gallery .pp-gallery-item > a::after {
  content:""; position:absolute; inset:0; background:rgba(46,42,42,.8);
  transform:translateY(-100%); transition:transform .3s ease-out; pointer-events:none;
}
.pp-perruques-gallery .pp-gallery-item > a:hover::after,
.pp-perruques-gallery .pp-gallery-item > a:focus-visible::after { transform:translateY(0); }
.pp-lightbox { padding:10px; border:0; background:#fff; overflow:visible; max-width:calc(100vw - 60px); max-height:calc(100dvh - 60px); }
.pp-lightbox::backdrop { background:rgba(0,0,0,.6); }
.pp-lightbox img { display:block; width:auto; height:auto; max-width:calc(100vw - 80px); max-height:calc(100dvh - 100px); margin:auto; }
.pp-lightbox button { position:absolute; border:0; background:rgba(0,0,0,.6); color:#fff; font:24px/36px Arial,sans-serif; min-width:36px; }
.pp-lightbox-close { top:-18px; right:-18px; border-radius:50%; }
.pp-lightbox-prev { left:10px; top:45%; }
.pp-lightbox-next { right:10px; top:45%; }
.pp-lightbox-count { display:block; text-align:center; font:300 12px/20px Roboto,Arial,sans-serif; color:#666; }
@media(max-width:1219px) { body.itemid-111 .pp-grid { gap:30px; } }
@media(max-width:959px) { .pp-perruques-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:767px) { .pp-perruques-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:479px) {
  .pp-perruques-gallery,body.itemid-111 .pp-grid { grid-template-columns:1fr; }
  body.itemid-111 .pp-grid { gap:0; }
}
/* Home hover effects measured from the original image panels. */
.site-grid > .container-component:has(.pp-home) { grid-column:full-start / full-end !important; }
.pp-home { width:100%; margin:0 !important; }
.pp-source-spring > figure { margin:0; overflow:hidden; }
.pp-source-spring > figure img { transition:transform .3s ease-out; }
.pp-source-spring > figure:hover img { transform:scale(1.1) rotate(3deg); }
.pp-source-length-card > a:first-child { display:block; overflow:hidden; }
.pp-source-length-card > a:first-child img { opacity:.7; transition:opacity .3s ease-out; }
.pp-source-length-card > a:first-child:hover img,
.pp-source-length-card > a:first-child:focus-visible img { opacity:1; }
.pp-source-btn { transition:background-color .2s ease-in-out; }
.pp-source-btn:hover,.pp-source-btn:focus-visible { background:#8f4f4a; }
@media(prefers-reduced-motion:reduce) {
  .pp-perruques-gallery img,.pp-perruques-gallery .pp-gallery-item > a::after,
  .pp-source-spring > figure img,.pp-source-length-card > a:first-child img { transition:none; }
}
.site-grid > .container-component:has(.pp-native-gallery,.pp-slideshow) { grid-column:full-start / full-end !important; }
.item-page:has(.pp-native-gallery,.pp-slideshow):not(:has(.pp-home)) { width:calc(100% - 60px); max-width:1200px; padding-inline:0; }
.pp-native-gallery { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:20px 0; }
.pp-native-gallery .pp-gallery-item { background:transparent; }
.pp-native-gallery .pp-gallery-item > a { display:block; position:relative; aspect-ratio:1; overflow:hidden; }
.pp-native-gallery img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease-out; }
.pp-native-gallery a:hover img,.pp-native-gallery a:focus-visible img { transform:scale(1.1); }
.pp-native-gallery .pp-gallery-overlay { position:absolute; inset:0; display:grid; place-items:center; padding:20px; color:#fff; background:rgba(46,42,42,.8); text-align:center; font:300 16px/28px Roboto,Arial,sans-serif; white-space:pre-line; transition:transform .3s ease-out,opacity .3s ease-out; pointer-events:none; }
.pp-native-gallery[data-overlay="fade"] .pp-gallery-overlay { opacity:0; }
.pp-native-gallery[data-overlay="slide-bottom"] .pp-gallery-overlay { transform:translateY(100%); }
.pp-native-gallery a:hover .pp-gallery-overlay,.pp-native-gallery a:focus-visible .pp-gallery-overlay { opacity:1; transform:translate(0); }
.pp-lightbox-caption { display:block; white-space:pre-line; color:#666; font:300 16px/24px Roboto,Arial,sans-serif; text-align:center; }
.pp-lightbox:has(.pp-lightbox-caption:not(:empty)) img { max-height:calc(100dvh - 160px); }
.pp-home > .pp-source-feature { display:block; width:min(1200px,calc(100% - 60px)); padding:40px !important; margin:40px auto; }
.pp-slideshow { display:grid; grid-template-columns:1fr 1fr; align-items:center; width:100%; }
.pp-slideshow-media { position:relative; display:grid; min-width:0; min-height:300px; overflow:hidden; touch-action:pan-y; }
.pp-slideshow-media > img { grid-area:1/1; display:block; width:100%; height:100%; min-height:300px; aspect-ratio:550/350; object-fit:cover; opacity:0; visibility:hidden; transition:opacity .5s; }
.pp-slideshow-media > img.is-active { opacity:1; visibility:visible; }
.pp-slideshow-panel { padding:30px; min-width:0; }
.pp-slideshow-copy { display:grid; text-align:center; }
.pp-slide-copy { grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .5s; }
.pp-slide-copy.is-active { opacity:1; visibility:visible; }
.pp-slideshow .pp-slide-copy h3 { margin:0; font:300 32px/38px Lato,Arial,sans-serif; letter-spacing:2px; text-transform:none; color:#74aab7; }
.pp-slideshow .pp-slide-copy h3 a { color:inherit; text-decoration:none; }
.pp-slideshow .pp-slide-copy p { margin:20px 0; font:300 20px/33px Roboto,Arial,sans-serif; }
.pp-slideshow .pp-slide-copy p:last-child { margin-bottom:0; line-height:38px; }
.pp-slideshow .pp-source-btn { padding:0 12px; border:1px solid transparent; font:300 12px/36px Lato,Arial,sans-serif; vertical-align:middle; }
.pp-slideshow-thumbs { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:20px; }
.pp-slideshow-thumbs button { padding:0; border:0; background:none; opacity:.7; }
.pp-slideshow-thumbs button[aria-pressed="true"],.pp-slideshow-thumbs button:hover { opacity:1; }
.pp-slideshow-thumbs img { display:block; width:70px; height:70px; object-fit:cover; }
.pp-slide-arrow { position:absolute; z-index:1; top:calc(50% - 30px); border:0; padding:0; width:40px; height:60px; background:transparent; color:white; font:300 60px/60px Arial,sans-serif; opacity:0; transition:opacity .2s; }
.pp-slide-prev { left:10px; } .pp-slide-next { right:10px; }
.pp-slideshow-media:hover .pp-slide-arrow,.pp-slide-arrow:focus-visible { opacity:1; }
.pp-source-spring { width:min(1200px,calc(100% - 60px)); }
.pp-source-spring img { height:auto; aspect-ratio:286/443; }
.pp-source-length { width:min(1200px,calc(100% - 60px)); }
.pp-source-length-card img { width:auto; max-width:100%; height:auto; max-height:340px; aspect-ratio:260/340; }
@media(max-width:1219px) { .pp-home > .pp-source-feature { padding:30px !important; } }
@media(max-width:959px) {
 .pp-native-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .pp-source-length-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
 .pp-source-hero,.pp-source-hero img { height:300px; }
}
@media(max-width:767px) {
 .pp-native-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .pp-slideshow { grid-template-columns:1fr; }
 .pp-slideshow-panel { margin-top:30px; }
 .pp-source-spring { display:none; }
 .pp-source-length-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .pp-source-feature { width:calc(100% - 60px); }
}
@media(max-width:479px) {
 .pp-native-gallery,.pp-source-length-grid { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
 .pp-native-gallery img,.pp-gallery-overlay,.pp-slide-copy,.pp-slideshow-media > img { transition:none; }
}
/* Native RSForm contact presentation; other routes and forms remain independent. */
#userForm:has(#rsform_3_page_0) {
  --pp-form-paper:#faf7f7; --pp-form-ink:#555; --pp-form-line:#b86472;
  --pp-form-accent:#a65360; --pp-form-hover:#88424e; --pp-form-error:#a12635;
  --pp-form-space:8px; --pp-form-gap:5px; --pp-form-padding:32px;
  --pp-form-height:48px; --pp-form-textarea:160px; --pp-form-label:14px;
  --pp-form-text:16px; --pp-form-leading:24px; --pp-form-duration:180ms;
  margin:0; padding:var(--pp-form-padding); border-top:3px solid var(--pp-form-accent);
  background:var(--pp-form-paper); color:var(--pp-form-ink);
  font:400 var(--pp-form-text)/var(--pp-form-leading) Roboto,Arial,sans-serif;
}
.pp-grid:has(#rsform_3_page_0) { grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:48px; align-items:start; }
#rsform_3_page_0 .formRow,
#rsform_3_page_0 .formSpan12 { width:100%; margin:0; min-width:0; }
#rsform_3_page_0 .formSpan12 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--pp-form-gap); }
#rsform_3_page_0 .rsform-block { margin:0; padding:0; min-width:0; }
#rsform_3_page_0 .rsform-block-message,
#rsform_3_page_0 .rsform-block-envoyer { grid-column:1 / -1; }
#rsform_3_page_0 .formControlLabel {
  display:block; float:none; width:auto; margin:0 0 var(--pp-form-space); padding:0;
  color:var(--pp-form-ink); text-align:left;
  font:400 var(--pp-form-label)/var(--pp-form-leading) Roboto,Arial,sans-serif;
}
#rsform_3_page_0 .formControlLabel:empty,
#rsform_3_page_0 .formDescription:empty { display:none; }
#rsform_3_page_0 .formControls { margin:0; padding:0; width:100%; }
#rsform_3_page_0 .formBody { float:none; width:100%; min-width:0; }
#rsform_3_page_0 :is(.rsform-input-box,.rsform-select-box,.rsform-text-box) {
  display:block; box-sizing:border-box; width:100%; max-width:100%; height:var(--pp-form-height);
  margin:0; padding:12px 16px; border:1px solid var(--pp-form-line); border-radius:0; box-shadow:none;
  background:#fff; color:var(--pp-form-ink);
  font:400 var(--pp-form-text)/var(--pp-form-leading) Roboto,Arial,sans-serif;
  transition:border-color var(--pp-form-duration),box-shadow var(--pp-form-duration);
}
#rsform_3_page_0 .rsform-select-box { padding-block:8px; }
#rsform_3_page_0 .rsform-text-box { height:var(--pp-form-textarea); min-height:var(--pp-form-height); resize:vertical; }
#rsform_3_page_0 :is(input,textarea)::placeholder { color:#727272; opacity:1; }
#rsform_3_page_0 :is(input,select,textarea):focus {
  border-color:var(--pp-form-accent); outline:2px solid var(--pp-form-accent); outline-offset:2px; box-shadow:none;
}
#rsform_3_page_0 .rsform-submit-button {
  display:block; width:auto; min-width:160px; min-height:var(--pp-form-height); margin:0 0 0 auto;
  padding:12px 32px; border:1px solid var(--pp-form-accent); border-radius:0;
  background:var(--pp-form-accent); background-image:none; box-shadow:none; color:#fff; text-shadow:none;
  font:400 var(--pp-form-text)/var(--pp-form-leading) Roboto,Arial,sans-serif; cursor:pointer;
  transition:background-color var(--pp-form-duration),border-color var(--pp-form-duration);
}
#rsform_3_page_0 .rsform-submit-button:hover,
#rsform_3_page_0 .rsform-submit-button:active { background:var(--pp-form-hover); border-color:var(--pp-form-hover); }
#rsform_3_page_0 .rsform-submit-button:focus-visible { outline:2px solid var(--pp-form-accent); outline-offset:2px; }
#rsform_3_page_0 .rsform-submit-button:disabled { opacity:.6; cursor:wait; }
#rsform_3_page_0 .formValidation { display:block; font-size:var(--pp-form-label); line-height:var(--pp-form-leading); }
#rsform_3_page_0 .formError { color:var(--pp-form-error); }
#rsform_3_page_0 .rsform-error { border-color:var(--pp-form-error); }
#userForm:has(#rsform_3_page_0) > div:not(.formContainer) { margin-top:var(--pp-form-gap); font-size:var(--pp-form-label); overflow-wrap:anywhere; }
@media (max-width:991px) { .pp-grid:has(#rsform_3_page_0) { grid-template-columns:minmax(0,1fr); gap:32px; } }
@media (max-width:600px) {
  #userForm:has(#rsform_3_page_0) { --pp-form-padding:20px; --pp-form-gap:5px; }
  #rsform_3_page_0 .formSpan12 { grid-template-columns:minmax(0,1fr); }
  #rsform_3_page_0 .rsform-submit-button { width:100%; min-width:0; }
}
@media (prefers-reduced-motion:reduce) { #rsform_3_page_0 :is(input,select,textarea,button) { transition:none; } }
/* Article pages: the source column is a full-width track with a 1200px, 30px-gutter article, and bold <strong>. */
body:not(:has(.pp-home)) .site-grid > .container-component:has(.com-content-article) { grid-column:full-start / full-end !important; }
body:not(:has(.pp-home)) .com-content-article.item-page { width:calc(100% - 60px); max-width:1200px; padding-inline:0; }
.com-content-article__body strong { font-weight:700; }

/* Source base typography (YOOtheme Lykka / UIkit 2 theme.css), which the Joomla 6 rebuild never carried:
   paragraph and list rhythm, sub-heading style and the red <em>. Scoped to article bodies other than the
   home page, whose rebuilt sections carry their own measured rules; page titles (h1) keep the site's
   measured .item-page h1 style. */
em { color:#df6d6d; }
.com-content-article__body:not(:has(.pp-home)) :is(p, ul, ol, dl, blockquote, address) { margin:0 0 20px 0; }
.com-content-article__body:not(:has(.pp-home)) * + :is(p, ul, ol, dl, blockquote, address) { margin-top:20px; }
.com-content-article__body:not(:has(.pp-home)) :is(ul, ol) { padding-left:30px; line-height:28px; }
.com-content-article__body:not(:has(.pp-home)) :is(h2, h3, h4, h5, h6) { margin:0 0 20px 0; font-family:'Lato'; font-weight:300; color:#626262; text-transform:uppercase; letter-spacing:2px; }
.com-content-article__body:not(:has(.pp-home)) * + :is(h2, h3, h4, h5, h6) { margin-top:40px; }
.com-content-article__body:not(:has(.pp-home)) h2 { font-size:24px; line-height:30px; }
.com-content-article__body:not(:has(.pp-home)) h3 { font-size:18px; line-height:24px; }
.com-content-article__body:not(:has(.pp-home)) h4 { font-size:16px; line-height:22px; }
.com-content-article__body:not(:has(.pp-home)) h5 { font-size:14px; line-height:28px; }
.com-content-article__body:not(:has(.pp-home)) h6 { font-size:12px; line-height:18px; }
.com-content-article__body:not(:has(.pp-home)) hr { box-sizing:content-box; height:0; margin:20px 0; border:0; border-top:1px solid rgba(51,51,51,.1); }
.com-content-article__body .pp-col > :last-child { margin-bottom:0; } /* uk-grid cells; the article's own last paragraph keeps its 20 px, as inside the source's article wrapper */
/* On phones the source's two-column uk-grid stacks its cells with no gap (contact form grid excluded). */
@media (max-width:767px) { .com-content-article__body .pp-grid:not(:has(.rsform)) { row-gap:0; } }
/* Page titles are UIkit article titles on the source: 30/30 px on every page. */
.item-page h1:is(.pp-article-title, .pp-center) { font-size:30px; line-height:30px; }
/* On phones the source stacks the slideshow's text panel directly under its image, on every page. */
@media (max-width:767px) { .pp-slideshow-panel { margin-top:0; } }
/* Article subtitles are uk-article-title on the source: pink 24/30 px (the generic h3 rule above must not grey them). */
.com-content-article__body h3.pp-article-title { font-size:24px; line-height:30px; color:#d36e78; }

/* Source header at 768-991 px (YOOtheme Lykka): logo left, the menu wrapped into two rows, the phone in a
   91 px box on the right, a 180 px band shrinking to 90 px on scroll. The source gives each row the full
   band height, so its first row sits half above the screen and the second hangs below the band; here the
   two rows share the band instead (source layout bug fixed, geometry otherwise as measured). */
@media (min-width:768px) and (max-width:991px) {
  header.pp-site-header { padding:0; }
  header.pp-site-header > .grid-child:first-child { flex:0 0 117px; width:117px; display:flex; align-items:center; }
  header.pp-site-header .navbar-brand img { width:117px; height:83px; max-height:none; object-fit:contain; }
  header.pp-site-header.pp-header-small .navbar-brand img { width:79px; height:56px; }
  header.pp-site-header > .container-nav { flex:0 0 561px; justify-content:flex-start; }
  header.pp-site-header .mod-menu { flex-wrap:wrap; align-content:center; justify-content:flex-start; width:561px; }
  header.pp-site-header .mod-menu > li > a { height:calc(var(--pp-header-height) / 2); }
  header.pp-site-header .pp-header-phone { flex:0 0 90px; white-space:normal; } /* source box is 91 px and ends 1 px past the viewport, hidden by its overflow; 90 keeps the same text position */
  .item-page:not(:has(.pp-home)) { padding-top:4px; }
}
/* Source phone (.uk-navbar-content): 15 px, 15 px side padding, flush with the viewport edge. */
header.pp-site-header .pp-header-phone { padding:0 15px; font-size:15px; color:rgba(102,102,102,.5); }
@media (min-width:992px) { header.pp-site-header .pp-header-phone { margin-right:-10px; } }
/* The source's Font Awesome 4 phone icon (uk-icon-phone) instead of a ☎ character, at every width. */
.pp-header-phone::before {
  content:""; display:inline-block; width:.786em; height:1em; vertical-align:-.143em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1408 1792'%3E%3Cpath fill='%23666' fill-opacity='.5' d='M1408 1240L1408 1240Q1408 1267 1398 1310.5Q1388 1354 1377 1379L1377 1379Q1356 1429 1255 1485L1255 1485Q1161 1536 1069 1536L1069 1536Q1042 1536 1016.5 1532.5Q991 1529 959 1520Q927 1511 911.5 1505.5Q896 1500 856 1485Q816 1470 807 1467L807 1467Q709 1432 632 1384L632 1384Q504 1305 367.5 1168.5Q231 1032 152 904L152 904Q104 827 69 729L69 729Q66 720 51 680Q36 640 30.5 624.5Q25 609 16 577Q7 545 3.5 519.5Q0 494 0 467L0 467Q0 375 51 281L51 281Q107 180 157 159L157 159Q182 148 225.5 138Q269 128 296 128L296 128Q310 128 317 131L317 131Q335 137 370 207L370 207Q381 226 400 261Q419 296 435 324.5Q451 353 466 378L466 378Q469 382 483.5 403Q498 424 505 438.5Q512 453 512 467L512 467Q512 487 483.5 517Q455 547 421.5 572Q388 597 359.5 625Q331 653 331 671L331 671Q331 680 336 693.5Q341 707 344.5 714Q348 721 358.5 738Q369 755 370 757L370 757Q446 894 544 992Q642 1090 779 1166L779 1166Q781 1167 798 1177.5Q815 1188 822 1191.5Q829 1195 842.5 1200Q856 1205 865 1205L865 1205Q883 1205 911 1176.5Q939 1148 964 1114.5Q989 1081 1019 1052.5Q1049 1024 1069 1024L1069 1024Q1083 1024 1097.5 1031Q1112 1038 1133 1052.5Q1154 1067 1158 1070L1158 1070Q1183 1085 1211.5 1101Q1240 1117 1275 1136Q1310 1155 1329 1166L1329 1166Q1399 1201 1405 1219L1405 1219Q1408 1226 1408 1240Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Source footer rhythm (.tm-block-bottom-c): 30 px under the columns to the legal strip, 40 px from
   UIkit's large breakpoint (1220 px) up. */
@media (min-width:1220px) { .pp-footer-columns { padding-bottom:40px; } }
/* Article pages end 50 px (60 px from 1220 px) above the footer separator, as on the source: no trailing
   margin may escape the article body (a gallery module's did on Santé), then article padding + the 20 px
   footer margin. */
.com-content-article__body:not(:has(.pp-home)) > .mod-custom:last-child > :last-child { margin-bottom:0; }
.item-page:not(:has(.pp-home)) { padding-bottom:30px; }
@media (min-width:1220px) { .item-page:not(:has(.pp-home)) { padding-bottom:40px; } }
/* Perruques: the source's filterable gallery grid ends 20 px lower than its last row. */
body.itemid-111 .item-page { padding-bottom:50px; }
@media (min-width:1220px) { body.itemid-111 .item-page { padding-bottom:60px; } }

/* Source home buttons (.uk-button.uk-button-primary) and thank-you block (.merci, custom.css): 40 px
   padding, a text column half the inner width, 20 px rhythm, height from content. Below 768 px the source
   hides the block (uk-hidden-small) and shows only its button in a 128 px band. */
.pp-source-btn { padding:0 12px; border:1px solid transparent; font:300 12px/36px Lato,Arial,sans-serif; letter-spacing:2px; vertical-align:middle; }
.pp-home .pp-source-thanks { min-height:0; padding:40px !important; line-height:28px; }
.pp-home .pp-source-thanks > div { width:50%; }
.pp-home .pp-source-thanks h2 { margin:20px 0; font-family:Lato,Arial,sans-serif; font-weight:700; line-height:28px; }
.pp-home .pp-source-thanks p { margin:20px 0; font-size:18px; font-weight:700; line-height:28px; }
.pp-home .pp-source-thanks .pp-source-btn { margin-bottom:20px; }
@media (min-width:768px) { .pp-home .pp-source-thanks .pp-source-btn { font-weight:700; } }
@media (max-width:767px) {
  .pp-home .pp-source-thanks { display:block; padding:30px 0 0 !important; background:none; text-align:center; } /* with the neighbours' 30 px margins: 60 px above the button, 30 px below */
  .pp-home .pp-source-thanks > div { width:auto; }
  .pp-home .pp-source-thanks :is(img, h2, p) { display:none; }
  .pp-home .pp-source-thanks .pp-source-btn { margin-bottom:0; }
}

/* The source's base font (Roboto 300) for the home sections, which fell back to Arial. */
.pp-home { font-family:Roboto,Arial,sans-serif; }
/* Source home intro (.printemps-ete, a UIkit panel box): width min(1200px, 100% - 60px), 30 px padding
   (40 px from 1220 px), an 18/24 px bold title, 28 px paragraphs with 20 px margins and a trailing empty
   paragraph worth 20 px. */
.pp-home .pp-source-intro { box-sizing:border-box; width:min(1200px, calc(100% - 60px)); min-height:0; padding:30px 30px 50px !important; }
.pp-home .pp-source-intro h2 { margin:0 0 20px; color:#626262; font-family:Lato,Arial,sans-serif; font-size:18px; font-weight:700; line-height:24px; }
.pp-home .pp-source-intro p { margin:20px 0 0; line-height:28px; }
@media (min-width:1220px) { .pp-home .pp-source-intro { padding:40px 40px 60px !important; } }
/* Source section and card headings are Lato 300 (UIkit h1-h6). */
.pp-home :is(.pp-source-length, .pp-source-feature) :is(h2, h3) { font-weight:300; }
/* Source home hero from 1220 px: the 1600x371 banner at full width, never under 400 px
   (100vw x 371/1600; vw includes a desktop scrollbar, about 3 px taller at 1919). */
@media (min-width:1220px) { .pp-home .pp-source-hero { height:max(400px, 23.1875vw); } }

/* Source phone-only contact panel (.coordonnees, uk-hidden-large uk-hidden-medium, module position
   tm-top-a on every page): grey UIkit panel box, two centred lines with the Font Awesome 4 phone and
   envelope icons. Rendered by a top-a module on standard pages, and inside the home (after the hero)
   and contact (after the map) compositions, where the source shows it. */
.pp-source-coordonnees { display:none; }
@media (min-width:768px) { .container-top-a:has(.pp-source-coordonnees) { display:none; } }
@media (max-width:767px) {
  .pp-source-coordonnees { display:block; box-sizing:border-box; width:100%; margin:0; padding:30px !important; background:#d2d2d2; color:#666; font:300 16px/28px Roboto,Arial,sans-serif; }
  .pp-source-coordonnees p { margin:0 !important; text-align:center; } /* inside the contact article, the article paragraph rhythm must not apply */
  .pp-source-coordonnees a { color:#ad655f; text-decoration:none; }
  .pp-home .pp-source-coordonnees + .pp-source-intro { margin-top:30px; }
  .container-top-a:has(.pp-source-coordonnees) { grid-column:full-start / full-end; margin:0; padding:0; }
  .container-top-a .pp-source-coordonnees { margin:22px 0 4px; } /* + Cassiopeia's 8 px grid gap: 30 px under the header, 60 px to the title */
}
.pp-icon-phone, .pp-icon-envelope { display:inline-block; height:1em; vertical-align:-.143em; background:center/contain no-repeat; }
.pp-icon-phone { width:.786em; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1408 1792'%3E%3Cpath fill='%23666' d='M1408 1240L1408 1240Q1408 1267 1398 1310.5Q1388 1354 1377 1379L1377 1379Q1356 1429 1255 1485L1255 1485Q1161 1536 1069 1536L1069 1536Q1042 1536 1016.5 1532.5Q991 1529 959 1520Q927 1511 911.5 1505.5Q896 1500 856 1485Q816 1470 807 1467L807 1467Q709 1432 632 1384L632 1384Q504 1305 367.5 1168.5Q231 1032 152 904L152 904Q104 827 69 729L69 729Q66 720 51 680Q36 640 30.5 624.5Q25 609 16 577Q7 545 3.5 519.5Q0 494 0 467L0 467Q0 375 51 281L51 281Q107 180 157 159L157 159Q182 148 225.5 138Q269 128 296 128L296 128Q310 128 317 131L317 131Q335 137 370 207L370 207Q381 226 400 261Q419 296 435 324.5Q451 353 466 378L466 378Q469 382 483.5 403Q498 424 505 438.5Q512 453 512 467L512 467Q512 487 483.5 517Q455 547 421.5 572Q388 597 359.5 625Q331 653 331 671L331 671Q331 680 336 693.5Q341 707 344.5 714Q348 721 358.5 738Q369 755 370 757L370 757Q446 894 544 992Q642 1090 779 1166L779 1166Q781 1167 798 1177.5Q815 1188 822 1191.5Q829 1195 842.5 1200Q856 1205 865 1205L865 1205Q883 1205 911 1176.5Q939 1148 964 1114.5Q989 1081 1019 1052.5Q1049 1024 1069 1024L1069 1024Q1083 1024 1097.5 1031Q1112 1038 1133 1052.5Q1154 1067 1158 1070L1158 1070Q1183 1085 1211.5 1101Q1240 1117 1275 1136Q1310 1155 1329 1166L1329 1166Q1399 1201 1405 1219L1405 1219Q1408 1226 1408 1240Z'/%3E%3C/svg%3E"); }
.pp-icon-envelope { width:1em; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath fill='%23666' d='M1792 710L1792 710L1792 1504Q1792 1570 1745 1617Q1698 1664 1632 1664L1632 1664L160 1664Q94 1664 47 1617Q0 1570 0 1504L0 1504L0 710Q44 759 101 797L101 797Q463 1043 598 1142L598 1142Q655 1184 690.5 1207.5Q726 1231 785 1255.5Q844 1280 895 1280L895 1280L896 1280L897 1280Q948 1280 1007 1255.5Q1066 1231 1101.5 1207.5Q1137 1184 1194 1142L1194 1142Q1364 1019 1692 797L1692 797Q1749 758 1792 710ZM1792 416L1792 416Q1792 495 1743 567Q1694 639 1621 690L1621 690Q1245 951 1153 1015L1153 1015Q1143 1022 1110.5 1045.5Q1078 1069 1056.5 1083.5Q1035 1098 1004.5 1116Q974 1134 947 1143Q920 1152 897 1152L897 1152L896 1152L895 1152Q872 1152 845 1143Q818 1134 787.5 1116Q757 1098 735.5 1083.5Q714 1069 681.5 1045.5Q649 1022 639 1015L639 1015Q548 951 377 832.5Q206 714 172 690L172 690Q110 648 55 574.5Q0 501 0 438L0 438Q0 360 41.5 308Q83 256 160 256L160 256L1632 256Q1697 256 1744.5 303Q1792 350 1792 416Z'/%3E%3C/svg%3E"); }

/* Source contact access map (.tm-top-a panel): 400 px tall and full width at every size; 30 px under the
   header and 230 px above the title below 1220 px; on phones 30 px above the contact panel, which then
   sits 60 px above the title. The desktop rules (from 992 px) are unchanged. */
/* Top margins net of the article's own offset above the map (30 px from 992 px, 20 px on tablets, 48 px on phones). */
@media (max-width:1219px) {
  .item-page .pp-contact-map { width:100vw; height:400px; margin:0 calc(50% - 50vw) 230px; }
}
@media (max-width:991px) { .item-page .pp-contact-map { margin-top:10px; } }
@media (max-width:767px) {
  .item-page .pp-contact-map { margin-top:-18px; margin-bottom:30px; }
  .item-page .pp-contact-map + .pp-source-coordonnees { width:100vw; margin:0 calc(50% - 50vw) 60px; }
}

/* Source home "length" panel: 24/30 px title, full-width intro with 20 px margins, cards whose title sits
   20 px under the image and 20 px above the button, and a trailing empty paragraph worth 20 px. */
.pp-home .pp-source-length h2 { margin:0 0 20px; font-size:24px; line-height:30px; }
.pp-home .pp-source-length > p { margin:20px 0; line-height:28px; }
.pp-home .pp-source-length-card h3 { margin:20px 0; line-height:24px; color:#626262; text-transform:uppercase; letter-spacing:2px; }
.pp-home .pp-source-length { padding-bottom:20px !important; }
/* Source home blocks are 30 px apart below 1220 px (UIkit block padding), 40 px from 1220 px up. */
@media (max-width:1219px) { .pp-home > :is(.pp-source-intro, .pp-source-spring, .pp-source-length, .pp-source-feature) { margin-block:30px; } }
@media (min-width:768px) and (max-width:1219px) { .pp-home > .pp-source-intro { margin-top:40px; } }
/* Source home feature slideshow: empty paragraphs give 20 px above and below it; slide titles are UIkit h3
   links styled as headings (Lato 300 32/38 px, uppercase, 2 px tracking, #626262). */
.pp-home .pp-source-feature .pp-slideshow { margin:20px 0; }
:is(.pp-home, .com-content-article__body) .pp-slide-copy :is(h3, h3 a) { margin:0 0 20px; color:#626262; font:300 32px/38px Lato,Arial,sans-serif; letter-spacing:2px; text-transform:uppercase; text-decoration:none; }
:is(.pp-home, .com-content-article__body) .pp-slide-copy h3 a { margin:0; }
@media (max-width:767px) { .pp-home .pp-slideshow-panel { margin-top:0; } }

/* ---- next pass 2026-10-07: p2 ---- */
/* p2: header and footer chrome (appended after user.css).
   Header >= 768 px follows the source's flex model: logo, menu and phone are three flex items that shrink in
   proportion to their natural widths (190 + 910 + 147 px big, 126 + 910 + 147 px shrunk), so the menu wraps into
   two rows exactly where the source wraps it, from 768 up to 1219 px. */
@media (min-width:768px) {
  html body header.pp-site-header {
    position:fixed !important; top:0; left:0; right:0; width:auto; box-sizing:border-box;
    display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between;
    height:var(--pp-header-height); min-height:0; padding:0 !important;
  }
  html body header.pp-site-header > .grid-child:first-child {
    flex:0 1 auto; width:auto; max-width:none; min-width:0; height:auto; margin:0; padding:0; display:block; line-height:0;
  }
  html body header.pp-site-header .navbar-brand { width:auto; height:auto; margin:0; padding:0; line-height:0; }
  html body header.pp-site-header .navbar-brand img,
  html body header.pp-site-header.pp-header-small .navbar-brand img {
    display:block; box-sizing:border-box; width:auto; height:auto; max-width:100%;
    max-height:var(--pp-header-height); padding-left:10px; object-fit:fill;
    transition:max-height .2s ease-in-out;
  }
  html body header.pp-site-header > .container-nav {
    position:static; inset:auto; flex:0 1 auto; min-width:0; max-width:none; width:auto !important; height:var(--pp-header-height);
    margin:0; padding:0 !important; display:block; transition:height .2s ease-in-out;
  }
  html body header.pp-site-header .mod-menu {
    display:flex; flex-wrap:wrap; flex-direction:row; align-content:stretch; justify-content:flex-start;
    width:auto; height:100%; margin:0; padding:0; gap:0;
  }
  html body header.pp-site-header .mod-menu > li { display:flex; padding:0; margin:0; }
  html body header.pp-site-header .mod-menu > li > a {
    display:flex; flex:1; align-items:center; height:auto; padding:0 15px; font:400 13px/1 Lato,Arial,sans-serif;
    letter-spacing:0; white-space:nowrap;
  }
  html body header.pp-site-header .pp-header-phone {
    flex:0 1.2975 auto; min-width:0; margin:0; padding:0 15px 0 calc(15px + .247em); white-space:normal;
  }
  html body .pp-header-spacer, html body .pp-header-small + .pp-header-spacer { height:180px; }
}
@media (min-width:1441px) {
  html body header.pp-site-header { padding:0 90px !important; }
  html body header.pp-site-header .navbar-brand img,
  html body header.pp-site-header.pp-header-small .navbar-brand img { padding-left:0; }
  html body header.pp-site-header .mod-menu > li > a { font-size:14px; }
  html body header.pp-site-header .pp-header-phone { font-size:16px; }
}
/* Below 768 px the bar stays sticky at the top (user decision 2026-10-07, deliberate deviation: the source bar scrolls away). Its height is constant on phones, so scrolling causes no layout feedback. */
@media (max-width:767px) {
  html body header.pp-site-header { position:sticky !important; top:0; }
}
/* Footer panel: the source container is 1040 px wide with 30 px padding below 1220 px (centred, so 980 px of
   content from 1100 px) and 1280 px with 40 px padding from 1220 px (1200 px of content). */
.pp-footer-columns { width:min(calc(100% - 60px), 980px); }
@media (min-width:1220px) { .pp-footer-columns { width:min(calc(100% - 80px), 1200px); } }
/* Back-to-top chevron: the source's Font Awesome angle-up at 22 px is about 12 px wide, 2 px lower than the 10 px box drawn before. */
.pp-back-to-top::before { width:8.5px; height:8.5px; transform:translate(10.75px,6.65px) rotate(45deg); }
/* Footer link hovers as the source: `a:hover` #5b5b5b on the mail address, white on the legal links and the
   back-to-top arrow, all fading over 0.1 s (UIkit link transition). */
.container-footer .pp-footer-columns a, .container-footer .pp-footer-legal a, .container-footer .pp-back-to-top { transition:color .1s linear; }
.container-footer .pp-footer-columns a[href^="mailto:"]:hover { color:#5b5b5b !important; }
.container-footer .pp-footer-legal a:hover, .container-footer .pp-back-to-top:hover { color:#fff !important; }
/* Capillaire homme chrome (source `.capi-homme`): blue active menu item, footer headings, arrows and links. */
html body.itemid-114 header.pp-site-header .mod-menu > li.active > a,
html body.itemid-114 header.pp-site-header .mod-menu > li.active > a:hover { color:#74aab7; }
body.itemid-114 .pp-footer-columns h2, body.itemid-114 .pp-footer-columns .pp-footer-arrow { color:#74aab7; }
body.itemid-114 .container-footer .pp-footer-columns a[href^="mailto:"], body.itemid-114 .container-footer .pp-footer-columns a[href^="mailto:"]:hover,
body.itemid-114 .container-footer .pp-footer-legal a, body.itemid-114 .container-footer .pp-footer-legal a:hover,
body.itemid-114 .container-footer .pp-back-to-top, body.itemid-114 .container-footer .pp-back-to-top:hover { color:#74aab7 !important; }
/* Drawer (below 768 px) as the UIkit offcanvas: the page is pushed 270 px to the right while the bar slides in
   (0.3 s ease-in-out) and both slide back when it closes (the close is delayed by the script for the animation). */
@media (max-width:767px) {
  body { transition:transform .3s ease-in-out; }
  html.pp-modal-open body { transform:translateX(270px); }
  .pp-drawer.pp-closing .pp-drawer-panel { animation:none; transform:translateX(-100%); transition:transform .3s ease-in-out; }
}
@media (prefers-reduced-motion:reduce) { body { transition:none; } }
/* Phones: the source bar has no side padding (the 30 px toggle sits at the left edge) and its logo is centred in the
   width left of the toggle, 15 px right of the page centre. */
@media (max-width:767px) {
  html body header.pp-site-header, html body header.pp-site-header.pp-header-small { padding:0 !important; }
  html body header.pp-site-header > .grid-child:first-child { left:calc(50% + 15px); }
}
/* Source phone block: a full-band-high inline strut centres the first line in the band; when the number wraps
   (768-1219 px) the second line falls below the band, over the page, exactly as on the source. */
@media (min-width:768px) {
  html body header.pp-site-header .pp-header-phone { align-self:flex-start; }
  html body header.pp-site-header .pp-header-phone::before { height:var(--pp-header-height); vertical-align:middle; transition:height .2s ease-in-out; }
}

/* ---- next pass 2026-10-07: p1 ---- */
/* p1 (2026-10-07): behaviour parity with the source's UIkit 2 / Widgetkit effects.
   Glyphs below are the source's own Font Awesome 4 outlines (angle-left/right, remove, spinner) drawn as masks. */

/* Slideshows (home feature, notre-histoire): UIkit "fade", 500 ms linear. The incoming slide is already at full opacity
   underneath; the outgoing slide fades out on top of it. */
.pp-slideshow-media > img,.pp-slide-copy { z-index:2; transition:opacity .5s linear,visibility 0s linear .5s; }
.pp-slideshow-media > img.is-active,.pp-slide-copy.is-active { z-index:1; transition:none; }
/* Thumbnails: the source's uk-thumbnav fades only the image, .5 -> 1 on hover or when active, 150 ms linear, on white. */
.pp-slideshow-thumbs button { background:#fff; opacity:1; }
.pp-slideshow-thumbs img { opacity:.5; transition:opacity .15s linear; }
.pp-slideshow-thumbs button[aria-pressed="true"] img,.pp-slideshow-thumbs button:hover img,.pp-slideshow-thumbs button:focus-visible img { opacity:1; }
/* Slide arrows: uk-slidenav-contrast, 40 px, 20 px from the edges, shown at once while the image is hovered. */
.pp-slide-arrow { top:calc(50% - 20px); width:40px; height:40px; padding:0; font-size:0; line-height:0; color:rgba(255,255,255,.5); opacity:0; transition:color .1s ease-in-out; }
.pp-slide-prev { left:20px; } .pp-slide-next { right:20px; }
.pp-slideshow-media:hover .pp-slide-arrow,.pp-slide-arrow:focus-visible { opacity:1; }
.pp-slide-arrow:hover,.pp-slide-arrow:focus-visible { color:rgba(255,255,255,.7); outline:none; }
.pp-slide-arrow:active { color:rgba(255,255,255,.9); }
.pp-slide-arrow::before { content:""; position:absolute; inset:0; background:currentColor; mask:center / auto 40px no-repeat; -webkit-mask:center / auto 40px no-repeat; }
.pp-slide-prev::before { mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%201792%27%3E%3Cpath%20d%3D%27M617%20521Q627%20531%20627%20544Q627%20557%20617%20567L617%20567L224%20960L617%201353Q627%201363%20627%201376Q627%201389%20617%201399L617%201399L567%201449Q557%201459%20544%201459Q531%201459%20521%201449L521%201449L55%20983Q45%20973%2045%20960Q45%20947%2055%20937L55%20937L521%20471Q531%20461%20544%20461Q557%20461%20567%20471L567%20471L617%20521Z%27%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%201792%27%3E%3Cpath%20d%3D%27M617%20521Q627%20531%20627%20544Q627%20557%20617%20567L617%20567L224%20960L617%201353Q627%201363%20627%201376Q627%201389%20617%201399L617%201399L567%201449Q557%201459%20544%201459Q531%201459%20521%201449L521%201449L55%20983Q45%20973%2045%20960Q45%20947%2055%20937L55%20937L521%20471Q531%20461%20544%20461Q557%20461%20567%20471L567%20471L617%20521Z%27%2F%3E%3C%2Fsvg%3E"); }
.pp-slide-next::before { mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%201792%27%3E%3Cpath%20d%3D%27M585%20937Q595%20947%20595%20960Q595%20973%20585%20983L585%20983L119%201449Q109%201459%2096%201459Q83%201459%2073%201449L73%201449L23%201399Q13%201389%2013%201376Q13%201363%2023%201353L23%201353L416%20960L23%20567Q13%20557%2013%20544Q13%20531%2023%20521L23%20521L73%20471Q83%20461%2096%20461Q109%20461%20119%20471L119%20471L585%20937Z%27%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%201792%27%3E%3Cpath%20d%3D%27M585%20937Q595%20947%20595%20960Q595%20973%20585%20983L585%20983L119%201449Q109%201459%2096%201459Q83%201459%2073%201449L73%201449L23%201399Q13%201389%2013%201376Q13%201363%2023%201353L23%201353L416%20960L23%20567Q13%20557%2013%20544Q13%20531%2023%20521L23%20521L73%20471Q83%20461%2096%20461Q109%20461%20119%20471L119%20471L585%20937Z%27%2F%3E%3C%2Fsvg%3E"); }
.pp-slide-arrow::after { content:""; position:absolute; top:50%; left:50%; width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:50%; background:rgba(255,255,255,.05); opacity:0; }
.pp-slide-arrow:active::after { animation:pp-slidenav-ripple 1s ease-out forwards; }
@keyframes pp-slidenav-ripple { 0% { opacity:1; transform:scale3d(.5,.5,1); } 25% { opacity:.5; transform:scale3d(1,1,1); } 100% { opacity:0; transform:scale3d(1,1,1); } }
@media (hover:none) and (pointer:coarse) { .pp-slide-arrow { display:none; } }

/* Gallery overlays that slide in: the source fades the panel in while it slides (opacity 0 -> 1 with the transform). */
.pp-perruques-gallery .pp-gallery-item > a::after { opacity:0; transition:transform .3s ease-out,opacity .3s ease-out; }
.pp-perruques-gallery .pp-gallery-item > a:hover::after,.pp-perruques-gallery .pp-gallery-item > a:focus-visible::after { opacity:1; }
.pp-native-gallery[data-overlay="slide-bottom"] .pp-gallery-overlay { opacity:0; }

/* Lightbox: the source's UIkit modal. The image sits bare in a white frame (no padding), a 26 px white round close button
   straddles its top-right corner, arrows show while the frame is hovered, the caption is white text under the frame.
   The page counter stays for assistive technology only. */
.pp-lightbox { padding:0; border:0; background:#fff; overflow:visible; width:fit-content; height:fit-content; max-width:none; max-height:none; margin:15px auto auto; color:#666; }
.pp-lightbox::backdrop { background:rgba(0,0,0,.6); }
.pp-lightbox img { display:block; width:auto; height:auto; max-width:calc(100vw - 30px); max-height:calc(100dvh - 30px); margin:0; }
.pp-lightbox:has(.pp-lightbox-caption:not(:empty)) img { max-height:calc(100dvh - 58px); }
.pp-lightbox.is-loading img { opacity:0; }
.pp-lightbox button { position:absolute; margin:0; border:0; padding:0; background:none; min-width:0; font:0/0 Arial,sans-serif; }
.pp-lightbox .pp-lightbox-close { top:-12px; right:-12px; box-sizing:content-box; width:20px; height:20px; padding:2px; border:1px solid rgba(51,51,51,.1); border-radius:50%; background:#fff; color:#666; transition:border-color .3s; }
.pp-lightbox .pp-lightbox-close:hover,.pp-lightbox .pp-lightbox-close:focus-visible { border-color:#5b5b5b; outline:none; }
.pp-lightbox .pp-lightbox-close::before { content:""; position:absolute; inset:2px; background:currentColor; opacity:.5; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201408%201792%27%3E%3Cpath%20d%3D%27M1270%201254Q1298%201282%201298%201322Q1298%201362%201270%201390L1270%201390L1134%201526Q1106%201554%201066%201554Q1026%201554%20998%201526L998%201526L704%201232L410%201526Q382%201554%20342%201554Q302%201554%20274%201526L274%201526L138%201390Q110%201362%20110%201322Q110%201282%20138%201254L138%201254L432%20960L138%20666Q110%20638%20110%20598Q110%20558%20138%20530L138%20530L274%20394Q302%20366%20342%20366Q382%20366%20410%20394L410%20394L704%20688L998%20394Q1026%20366%201066%20366Q1106%20366%201134%20394L1134%20394L1270%20530Q1298%20558%201298%20598Q1298%20638%201270%20666L1270%20666L976%20960L1270%201254Z%27%2F%3E%3C%2Fsvg%3E") center / auto 20px no-repeat; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201408%201792%27%3E%3Cpath%20d%3D%27M1270%201254Q1298%201282%201298%201322Q1298%201362%201270%201390L1270%201390L1134%201526Q1106%201554%201066%201554Q1026%201554%20998%201526L998%201526L704%201232L410%201526Q382%201554%20342%201554Q302%201554%20274%201526L274%201526L138%201390Q110%201362%20110%201322Q110%201282%20138%201254L138%201254L432%20960L138%20666Q110%20638%20110%20598Q110%20558%20138%20530L138%20530L274%20394Q302%20366%20342%20366Q382%20366%20410%20394L410%20394L704%20688L998%20394Q1026%20366%201066%20366Q1106%20366%201134%20394L1134%20394L1270%20530Q1298%20558%201298%20598Q1298%20638%201270%20666L1270%20666L976%20960L1270%201254Z%27%2F%3E%3C%2Fsvg%3E") center / auto 20px no-repeat; }
.pp-lightbox .pp-lightbox-close:hover::before,.pp-lightbox .pp-lightbox-close:focus-visible::before { opacity:.8; }
.pp-lightbox.is-loading .pp-lightbox-close { visibility:hidden; }
.pp-lightbox .pp-lightbox-prev,.pp-lightbox .pp-lightbox-next { top:calc(50% - 20px); width:40px; height:40px; color:rgba(255,255,255,.5); opacity:0; transition:color .1s ease-in-out; }
.pp-lightbox .pp-lightbox-prev { left:20px; } .pp-lightbox .pp-lightbox-next { right:20px; }
.pp-lightbox:hover .pp-lightbox-prev,.pp-lightbox:hover .pp-lightbox-next,.pp-lightbox .pp-lightbox-prev:focus-visible,.pp-lightbox .pp-lightbox-next:focus-visible { opacity:1; }
.pp-lightbox .pp-lightbox-prev:hover,.pp-lightbox .pp-lightbox-next:hover,.pp-lightbox .pp-lightbox-prev:focus-visible,.pp-lightbox .pp-lightbox-next:focus-visible { color:rgba(255,255,255,.7); outline:none; }
.pp-lightbox .pp-lightbox-prev:active,.pp-lightbox .pp-lightbox-next:active { color:rgba(255,255,255,.9); }
.pp-lightbox .pp-lightbox-prev::before,.pp-lightbox .pp-lightbox-next::before { content:""; position:absolute; inset:0; background:currentColor; }
.pp-lightbox .pp-lightbox-prev::before { mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%201792%27%3E%3Cpath%20d%3D%27M617%20521Q627%20531%20627%20544Q627%20557%20617%20567L617%20567L224%20960L617%201353Q627%201363%20627%201376Q627%201389%20617%201399L617%201399L567%201449Q557%201459%20544%201459Q531%201459%20521%201449L521%201449L55%20983Q45%20973%2045%20960Q45%20947%2055%20937L55%20937L521%20471Q531%20461%20544%20461Q557%20461%20567%20471L567%20471L617%20521Z%27%2F%3E%3C%2Fsvg%3E") center / auto 40px no-repeat; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%201792%27%3E%3Cpath%20d%3D%27M617%20521Q627%20531%20627%20544Q627%20557%20617%20567L617%20567L224%20960L617%201353Q627%201363%20627%201376Q627%201389%20617%201399L617%201399L567%201449Q557%201459%20544%201459Q531%201459%20521%201449L521%201449L55%20983Q45%20973%2045%20960Q45%20947%2055%20937L55%20937L521%20471Q531%20461%20544%20461Q557%20461%20567%20471L567%20471L617%20521Z%27%2F%3E%3C%2Fsvg%3E") center / auto 40px no-repeat; }
.pp-lightbox .pp-lightbox-next::before { mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%201792%27%3E%3Cpath%20d%3D%27M585%20937Q595%20947%20595%20960Q595%20973%20585%20983L585%20983L119%201449Q109%201459%2096%201459Q83%201459%2073%201449L73%201449L23%201399Q13%201389%2013%201376Q13%201363%2023%201353L23%201353L416%20960L23%20567Q13%20557%2013%20544Q13%20531%2023%20521L23%20521L73%20471Q83%20461%2096%20461Q109%20461%20119%20471L119%20471L585%20937Z%27%2F%3E%3C%2Fsvg%3E") center / auto 40px no-repeat; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%201792%27%3E%3Cpath%20d%3D%27M585%20937Q595%20947%20595%20960Q595%20973%20585%20983L585%20983L119%201449Q109%201459%2096%201459Q83%201459%2073%201449L73%201449L23%201399Q13%201389%2013%201376Q13%201363%2023%201353L23%201353L416%20960L23%20567Q13%20557%2013%20544Q13%20531%2023%20521L23%20521L73%20471Q83%20461%2096%20461Q109%20461%20119%20471L119%20471L585%20937Z%27%2F%3E%3C%2Fsvg%3E") center / auto 40px no-repeat; }
.pp-lightbox .pp-lightbox-prev::after,.pp-lightbox .pp-lightbox-next::after { content:""; position:absolute; top:50%; left:50%; width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:50%; background:rgba(255,255,255,.05); opacity:0; }
.pp-lightbox .pp-lightbox-prev:active::after,.pp-lightbox .pp-lightbox-next:active::after { animation:pp-slidenav-ripple 1s ease-out forwards; }
.pp-lightbox button[hidden] { display:none; }
.pp-lightbox-caption { position:absolute; left:0; right:0; bottom:-20px; margin-bottom:-10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; text-align:center; font:300 16px/28px Roboto,Arial,sans-serif; }
.pp-lightbox-count { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.pp-lightbox.is-loading::after { content:""; position:absolute; top:50%; left:50%; width:25px; height:25px; margin:-12px 0 0 -12px; background:#ddd; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201792%201792%27%3E%3Cpath%20d%3D%27M488.5%201303.5Q526%201341%20526%201394Q526%201447%20488.5%201484.5Q451%201522%20398%201522L398%201522Q346%201522%20308%201484Q270%201446%20270%201394L270%201394Q270%201341%20307.5%201303.5Q345%201266%20398%201266Q451%201266%20488.5%201303.5ZM986.5%201509.5Q1024%201547%201024%201600Q1024%201653%20986.5%201690.5Q949%201728%20896%201728Q843%201728%20805.5%201690.5Q768%201653%20768%201600Q768%201547%20805.5%201509.5Q843%201472%20896%201472Q949%201472%20986.5%201509.5ZM282.5%20805.5Q320%20843%20320%20896Q320%20949%20282.5%20986.5Q245%201024%20192%201024Q139%201024%20101.5%20986.5Q64%20949%2064%20896Q64%20843%20101.5%20805.5Q139%20768%20192%20768Q245%20768%20282.5%20805.5ZM1522%201394L1522%201394Q1522%201446%201484%201484Q1446%201522%201394%201522L1394%201522Q1341%201522%201303.5%201484.5Q1266%201447%201266%201394Q1266%201341%201303.5%201303.5Q1341%201266%201394%201266Q1447%201266%201484.5%201303.5Q1522%201341%201522%201394ZM511%20285Q558%20332%20558%20398Q558%20464%20511%20511Q464%20558%20398%20558Q332%20558%20285%20511Q238%20464%20238%20398Q238%20332%20285%20285Q332%20238%20398%20238Q464%20238%20511%20285ZM1690.5%20805.5Q1728%20843%201728%20896Q1728%20949%201690.5%20986.5Q1653%201024%201600%201024Q1547%201024%201509.5%20986.5Q1472%20949%201472%20896Q1472%20843%201509.5%20805.5Q1547%20768%201600%20768Q1653%20768%201690.5%20805.5ZM1032%2056Q1088%20112%201088%20192Q1088%20272%201032%20328Q976%20384%20896%20384Q816%20384%20760%20328Q704%20272%20704%20192Q704%20112%20760%2056Q816%200%20896%200Q976%200%201032%2056ZM1618%20398L1618%20398Q1618%20491%201552%20556.5Q1486%20622%201394%20622L1394%20622Q1301%20622%201235.5%20556.5Q1170%20491%201170%20398L1170%20398Q1170%20306%201235.5%20240Q1301%20174%201394%20174L1394%20174Q1486%20174%201552%20240Q1618%20306%201618%20398Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201792%201792%27%3E%3Cpath%20d%3D%27M488.5%201303.5Q526%201341%20526%201394Q526%201447%20488.5%201484.5Q451%201522%20398%201522L398%201522Q346%201522%20308%201484Q270%201446%20270%201394L270%201394Q270%201341%20307.5%201303.5Q345%201266%20398%201266Q451%201266%20488.5%201303.5ZM986.5%201509.5Q1024%201547%201024%201600Q1024%201653%20986.5%201690.5Q949%201728%20896%201728Q843%201728%20805.5%201690.5Q768%201653%20768%201600Q768%201547%20805.5%201509.5Q843%201472%20896%201472Q949%201472%20986.5%201509.5ZM282.5%20805.5Q320%20843%20320%20896Q320%20949%20282.5%20986.5Q245%201024%20192%201024Q139%201024%20101.5%20986.5Q64%20949%2064%20896Q64%20843%20101.5%20805.5Q139%20768%20192%20768Q245%20768%20282.5%20805.5ZM1522%201394L1522%201394Q1522%201446%201484%201484Q1446%201522%201394%201522L1394%201522Q1341%201522%201303.5%201484.5Q1266%201447%201266%201394Q1266%201341%201303.5%201303.5Q1341%201266%201394%201266Q1447%201266%201484.5%201303.5Q1522%201341%201522%201394ZM511%20285Q558%20332%20558%20398Q558%20464%20511%20511Q464%20558%20398%20558Q332%20558%20285%20511Q238%20464%20238%20398Q238%20332%20285%20285Q332%20238%20398%20238Q464%20238%20511%20285ZM1690.5%20805.5Q1728%20843%201728%20896Q1728%20949%201690.5%20986.5Q1653%201024%201600%201024Q1547%201024%201509.5%20986.5Q1472%20949%201472%20896Q1472%20843%201509.5%20805.5Q1547%20768%201600%20768Q1653%20768%201690.5%20805.5ZM1032%2056Q1088%20112%201088%20192Q1088%20272%201032%20328Q976%20384%20896%20384Q816%20384%20760%20328Q704%20272%20704%20192Q704%20112%20760%2056Q816%200%20896%200Q976%200%201032%2056ZM1618%20398L1618%20398Q1618%20491%201552%20556.5Q1486%20622%201394%20622L1394%20622Q1301%20622%201235.5%20556.5Q1170%20491%201170%20398L1170%20398Q1170%20306%201235.5%20240Q1301%20174%201394%20174L1394%20174Q1486%20174%201552%20240Q1618%20306%201618%20398Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; animation:pp-lightbox-spin 2s infinite linear; }
@keyframes pp-lightbox-spin { to { transform:rotate(360deg); } }
@media (max-width:767px) { .pp-lightbox .pp-lightbox-close { top:-7px; right:-7px; } }
@media (hover:none) and (pointer:coarse) { .pp-lightbox .pp-lightbox-prev,.pp-lightbox .pp-lightbox-next { display:none; } }
@media (prefers-reduced-motion:reduce) {
  .pp-slideshow-media > img,.pp-slide-copy,.pp-slideshow-thumbs img,.pp-slide-arrow,.pp-perruques-gallery .pp-gallery-item > a::after,.pp-lightbox.is-loading::after { transition:none; animation:none; }
}

/* UIkit primary button (uk-button-primary, lykka): background .3 s and colour .3 s ease-in-out, a darker bar that fills
   from the bottom on press (height 0 -> 36 px in .1 s) and #6e3c38 while pressed. */
.pp-source-btn { position:relative; overflow:hidden; z-index:0; transition:background-color .3s ease,color .3s ease-in-out; }
.pp-source-btn::before { content:""; position:absolute; bottom:0; left:0; width:100%; height:0; background:#6e3c38; transition:height .3s; z-index:-1; }
.pp-source-btn:active { background:#6e3c38; transition:background-color .2s ease,color .2s ease-in-out; }
.pp-source-btn:active::before { height:36px; transition:height .1s; }
@media (prefers-reduced-motion:reduce) { .pp-source-btn,.pp-source-btn::before { transition:none; } }

/* ---- next pass 2026-10-07: p3 ---- */
/* p3: in-between widths, content of home, perruques, sante, capillaire-homme, mode-et-extensions. */

/* Article column: the source UIkit container is 980 px (30 px gutters) from 768 to 1219 px, and from 1220 px it has 40 px
   gutters and a 1200 px maximum. Staging's 60 px-gutter rule gave 1040-1159 px at 992-1219 and 1160 px at 1220-1279. */
@media (min-width:768px) and (max-width:1219px) {
  body:is(.itemid-111,.itemid-112,.itemid-113,.itemid-114) .com-content-article.item-page:not(:has(.pp-home)) { max-width:980px; }
}
@media (min-width:1220px) {
  body:is(.itemid-111,.itemid-112,.itemid-113,.itemid-114) .com-content-article.item-page:not(:has(.pp-home)) { width:calc(100% - 80px); }
}
/* The article starts 200 px from the top (header 180 + 20) below 1220 px; the 14 px padding makes it 210 only from 1220 px. */
@media (min-width:992px) and (max-width:1219px) {
  body:is(.itemid-111,.itemid-112,.itemid-113,.itemid-114) .item-page:not(:has(.pp-home)) { padding-top:4px; }
}
/* In-text links: #ad655f, no underline, #5b5b5b on hover (staging used the global rose with an underline). */
body:is(.itemid-111,.itemid-112,.itemid-113,.itemid-114) .com-content-article__body p > a:not([class]) { color:#ad655f; text-decoration:none; }
body:is(.itemid-111,.itemid-112,.itemid-113,.itemid-114) .com-content-article__body p > a:not([class]):hover { color:#5b5b5b; }

/* Home blocks: the same source container (980 px maximum at 768-1219, 40 px gutters from 1220 px). */
@media (min-width:768px) and (max-width:1219px) {
  .pp-home > :is(.pp-source-intro, .pp-source-spring, .pp-source-length, .pp-source-feature) { width:min(980px, calc(100% - 60px)); }
}
@media (min-width:1220px) {
  .pp-home > :is(.pp-source-intro, .pp-source-spring, .pp-source-length, .pp-source-feature) { width:min(1200px, calc(100% - 80px)); }
}
/* Four length cards: 30 px gutters (UIkit grid) below 1220 px, 40 px from 1220 px. */
@media (min-width:960px) and (max-width:1219px) { .pp-source-length-grid { gap:30px; } }

/* Capillaire homme title: Lato 32/38 px at every width (the shared 30/30 px article-title rule overrode it; two lines on a
   phone, so 46 px lower than staging had it). */
body.itemid-114 .item-page h1.pp-center { font-size:32px; line-height:38px; }

/* Santé two-column text: UIkit grid with 30 px gutters below 1220 px and 40 px from 1220 px (staging used clamp(24px, 4vw, 64px)). */
@media (min-width:768px) and (max-width:1219px) { body.itemid-112 .pp-grid { gap:30px; } }
@media (min-width:1220px) { body.itemid-112 .pp-grid { gap:40px; } }

/* Boxed paragraphs inside a coloured <span> (the "professionnel agréé" panel) take the span's green; the global
   .item-page p colour (#666) overrode it, at every width. */
body:is(.itemid-111,.itemid-112,.itemid-113,.itemid-114) .com-content-article__body span[style] > p { color:inherit; }

/* ---- next pass 2026-10-07: p4 ---- */
/* p4: article column width and top offset between 960 and 1299 px. UIkit's container is 980 px wide from 960 px
   (centred) and 80 px narrower than the viewport, up to 1200 px, from 1220 px. */
@media (min-width:960px) and (max-width:1219px) {
  body:is(.itemid-110,.itemid-115,.itemid-116,.itemid-117,.itemid-118) .com-content-article.item-page { width:min(980px, calc(100% - 60px)); }
}
@media (min-width:1220px) {
  body:is(.itemid-110,.itemid-115,.itemid-116,.itemid-117,.itemid-118) .com-content-article.item-page { width:min(1200px, calc(100% - 80px)); }
}
/* The source article starts 10 px higher below 1220 px (block padding 30 px instead of 40 px). Contact is excluded:
   its map margins already absorb the offset. */
@media (min-width:992px) and (max-width:1219px) {
  body:is(.itemid-110,.itemid-115,.itemid-117,.itemid-118) .item-page:not(:has(.pp-home)) { padding-top:4px; }
}
/* Contact: the source grid is two equal columns from 768 px (uk-width-medium-1-2), 30 px gutter, 40 px from 1220 px.
   The staging layout stacked below 992 px and used a 0.8fr/1.4fr split above. */
@media (min-width:768px) {
  body.itemid-116 .pp-grid:has(#rsform_3_page_0) { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:30px; }
}
@media (min-width:1220px) {
  body.itemid-116 .pp-grid:has(#rsform_3_page_0) { column-gap:40px; }
}

/* ---- next pass 2026-10-07: p5 ---- */
/* p5: modern contact form (user decision 2026-10-07, the one exception to the 1:1 rule).
   Scoped to the contact page; two ids plus the body class beat the earlier #rsform_3_page_0 rules. */
body.itemid-116 #userForm:has(#rsform_3_page_0) {
  --p5-accent:#a65360; --p5-hover:#88424e; --p5-teal:#74aab7;
  --p5-ink:#3f3f3f; --p5-label:#4a4a4a; --p5-line:#d8cfd1; --p5-line-hover:#b9a9ac;
  --p5-error:#a12635; --p5-ring:rgba(166,83,96,.22);
  box-sizing:border-box; padding:32px; background:#fff; color:var(--p5-ink);
  border:1px solid #eadfe1; border-top:1px solid #eadfe1; border-radius:8px;
  box-shadow:0 1px 2px rgba(60,30,36,.05),0 8px 24px rgba(60,30,36,.06);
}
body.itemid-116 #userForm #rsform_3_page_0 .formSpan12 { gap:20px 20px; }
body.itemid-116 #userForm #rsform_3_page_0 .formControlLabel {
  margin:0 0 6px; color:var(--p5-label);
  font:600 14px/20px Lato,Roboto,Arial,sans-serif; letter-spacing:.01em;
}
body.itemid-116 #userForm #rsform_3_page_0 :is(.rsform-input-box,.rsform-select-box,.rsform-text-box) {
  height:48px; padding:11px 14px; border:1px solid var(--p5-line); border-radius:5px;
  background-color:#fff; color:var(--p5-ink); font:400 16px/24px Roboto,Arial,sans-serif;
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}
body.itemid-116 #userForm #rsform_3_page_0 .rsform-text-box { height:160px; min-height:96px; resize:vertical; }
body.itemid-116 #userForm #rsform_3_page_0 .rsform-select-box {
  padding:11px 40px 11px 14px; appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a65360' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px 8px;
}
body.itemid-116 #userForm #rsform_3_page_0 :is(input,textarea)::placeholder { color:#6f6f6f; opacity:1; }
body.itemid-116 #userForm #rsform_3_page_0 :is(input,select,textarea):hover { border-color:var(--p5-line-hover); }
body.itemid-116 #userForm #rsform_3_page_0 :is(input,select,textarea):focus,
body.itemid-116 #userForm #rsform_3_page_0 :is(input,select,textarea):focus-visible {
  border-color:var(--p5-accent); box-shadow:0 0 0 3px var(--p5-ring); outline:2px solid transparent; outline-offset:2px;
}
/* validation: RSForm marks the field .rsform-error and shows the message span (.formError) under it */
body.itemid-116 #userForm #rsform_3_page_0 .formValidation { display:block; }
body.itemid-116 #userForm #rsform_3_page_0 .formValidation:empty,
body.itemid-116 #userForm #rsform_3_page_0 .formNoError { display:none; }
body.itemid-116 #userForm #rsform_3_page_0 .formError {
  display:block; margin:6px 0 0; padding:0; color:var(--p5-error); font:500 13px/18px Roboto,Arial,sans-serif;
}
body.itemid-116 #userForm #rsform_3_page_0 :is(input,select,textarea):is(.rsform-error,[aria-invalid="true"]) {
  border-color:var(--p5-error); background-color:#fdf7f8;
}
body.itemid-116 #userForm #rsform_3_page_0 :is(input,select,textarea):is(.rsform-error,[aria-invalid="true"]):focus {
  box-shadow:0 0 0 3px rgba(161,38,53,.2);
}
body.itemid-116 #userForm #rsform_error_3 {
  margin:0 0 20px; padding:10px 14px; background:#fdf1f2; border-left:3px solid var(--p5-error); border-radius:4px;
}
body.itemid-116 #userForm #rsform_error_3 .formRed { margin:0; color:var(--p5-error); font:500 14px/20px Roboto,Arial,sans-serif; }
/* submit */
body.itemid-116 #userForm #rsform_3_page_0 .rsform-submit-button {
  min-width:180px; min-height:48px; padding:11px 32px; border:1px solid var(--p5-accent); border-radius:5px;
  background:var(--p5-accent); color:#fff; font:600 16px/24px Lato,Roboto,Arial,sans-serif; letter-spacing:.02em;
  transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
body.itemid-116 #userForm #rsform_3_page_0 .rsform-submit-button:hover { background:var(--p5-hover); border-color:var(--p5-hover); }
body.itemid-116 #userForm #rsform_3_page_0 .rsform-submit-button:active { background:#73363f; border-color:#73363f; transform:translateY(1px); }
body.itemid-116 #userForm #rsform_3_page_0 .rsform-submit-button:focus-visible {
  outline:2px solid transparent; box-shadow:0 0 0 3px #fff,0 0 0 5px var(--p5-teal);
}
/* reCAPTCHA (invisible badge, notices) keeps the field width */
body.itemid-116 #userForm .g-recaptcha { max-width:100%; margin:0; }
@media (max-width:767px) {
  body.itemid-116 #userForm:has(#rsform_3_page_0) { padding:20px; }
  body.itemid-116 #userForm #rsform_3_page_0 .formSpan12 { grid-template-columns:minmax(0,1fr); }
  body.itemid-116 #userForm #rsform_3_page_0 .rsform-submit-button { width:100%; min-width:0; }
}
@media (prefers-reduced-motion:reduce) {
  body.itemid-116 #userForm * { transition:none !important; }
  body.itemid-116 #userForm .rsform-submit-button:active { transform:none; }
}

/* ---- next pass 2026-10-07: p5b ---- */
/* p5b: contact form layout in the source-width column.
   Only name and e-mail share a row, and only when the form's content box is wide enough for both placeholders
   (container query on the form itself); phone and the subject select (longest option 208 px + chevron) take the full row.
   Below 340 px of content, and below 768 px of viewport (p5), everything stacks. */
body.itemid-116 #userForm:has(#rsform_3_page_0) { container-type:inline-size; }
body.itemid-116 #userForm #rsform_3_page_0 .formSpan12 { grid-template-columns:minmax(0,1fr); }
body.itemid-116 #userForm #rsform_3_page_0 .formControlLabel { overflow-wrap:anywhere; }
@media (min-width:768px) {
  @container (min-width:340px) {
    body.itemid-116 #userForm #rsform_3_page_0 .formSpan12 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    body.itemid-116 #userForm #rsform_3_page_0 :is(.rsform-block-tel,.rsform-block-objet) { grid-column:1 / -1; }
  }
}

/* ---- next pass 2026-10-07: controller ---- */
/* Source fonts 1:1: the source loads Google's Roboto v51 (one variable woff2 for 300 and 400) and Lato v25 woff2, latin
   subset. Staging's older static TTFs measure differently by fractions of a pixel and change line wraps (politique at
   834 px). Same files, self-hosted; these faces come after the TTF ones, so they win (one face per weight, matching the TTF faces exactly). Bold uses the same variable
   file at 700: the source footer map injects Google Roboto 300-700 from it, so the source settles on real bold. */
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-stretch:100%;src:url(/media/templates/site/cassiopeia_extended/fonts/roboto-v51-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:'Roboto';font-style:normal;font-weight:400;font-stretch:100%;src:url(/media/templates/site/cassiopeia_extended/fonts/roboto-v51-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:'Roboto';font-style:normal;font-weight:700;font-stretch:100%;src:url(/media/templates/site/cassiopeia_extended/fonts/roboto-v51-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:'Lato';font-style:normal;font-weight:300;src:url(/media/templates/site/cassiopeia_extended/fonts/lato-v25-300-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:'Lato';font-style:normal;font-weight:400;src:url(/media/templates/site/cassiopeia_extended/fonts/lato-v25-400-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}

/* ---- next pass 2026-10-07: p6 ---- */
/* p6: desktop (1440/1919) re-check. Wave 1 live user.css is the base. */

/* Home thanks band: the source heading (.merci .head2) is #666, not the global teal h2 colour. */
.pp-home .pp-source-thanks h2 { color:#666; }

/* Home hero: the source shows a one-dot UIkit dotnav on its single-slide banner: an 18px ring
   (14px + 2px border), 20px above the banner bottom, centred; #5b5b5b from 960, white below. */
.pp-home .pp-source-hero { position:relative; }
.pp-home .pp-source-hero::after { content:""; position:absolute; left:50%; bottom:20px; box-sizing:content-box; width:14px; height:14px; margin-left:-9px; border:2px solid #5b5b5b; border-radius:50%; pointer-events:none; }
@media (max-width:959px) { .pp-home .pp-source-hero::after { border-color:#fff; } }

/* Slideshow copy panel: the "En savoir plus" paragraph grew to 40px because the middle-aligned inline-block
   button made the 38px line taller; the source paragraph is 38px. */
.pp-slideshow .pp-source-btn { vertical-align:top; }

/* Article text links on spectacle, mentions-legales and politique-de-confidentialite: the source link is #ad655f, not underlined,
   #5b5b5b on hover with a 0.1s colour transition (wave 1 covered itemid-111 to 114 only). */
body:is(.itemid-115,.itemid-117,.itemid-118) .com-content-article__body a:not([class]) { color:#ad655f; text-decoration:none; transition:color .1s ease-in-out; }
body:is(.itemid-115,.itemid-117,.itemid-118) .com-content-article__body a:not([class]):hover { color:#5b5b5b; text-decoration:none; }

/* ---- next pass 2026-10-07: p7 ---- */
/* Capillaire homme: the source swaps in the blue logo from 768 px (a.tm-logo); phones keep the pink one. */
@media (min-width:768px) { body.itemid-114 header.pp-site-header .navbar-brand img { content:url(/images/paris_perruque_bleu.png); } }
/* Home: the source intro paragraph under "Trouvez la perruque" is 1200 px wide from 1220 px (staging capped it at 1100). */
@media (min-width:1220px) { .pp-home .pp-source-length > p { max-width:1200px; } }

/* ---- 2026-10-08: highlights 1:1 ---- */
/* Highlights 1:1 (owner feedback 2026-10-08). */
/* Contact address e-mail: #ad655f, #5b5b5b on hover (staging used the global rose). */
body.itemid-116 .com-content-article__body a[href^="mailto:"] { color:#ad655f; text-decoration:none; }
body.itemid-116 .com-content-article__body a[href^="mailto:"]:hover { color:#5b5b5b; }
/* Capillaire homme phone contact panel: the e-mail is the route blue, also on hover. */
body.itemid-114 .pp-source-coordonnees a, body.itemid-114 .pp-source-coordonnees a:hover { color:#74aab7; }
/* Home cards: the titles are links on the source (uk-link-reset: inherited colour, no underline, no hover change). */
.pp-source-length-card h3 a, .pp-source-length-card h3 a:hover { color:inherit; text-decoration:none; }

/* Readable text on the existing grey panels and rose controls. */
.pp-source-intro, .pp-source-intro h2, .pp-source-intro p,
.pp-source-feature, .pp-source-feature p, .pp-source-coordonnees { color:#555; }
.pp-source-coordonnees a, .pp-footer-columns h2 { color:#a65360; }
.container-footer a { color:#a65360 !important; }
.pp-source-btn { background-color:#a65360; }
.container-footer .pp-footer-legal a { color:#e2a7ad !important; }

.pp-source-coordonnees, .pp-source-coordonnees p, .pp-source-intro h2 { color:#555 !important; }
.pp-source-coordonnees a { color:#883c49 !important; }
.container-footer joomla-hidden-mail a { color:#a65360 !important; }

.container-footer .pp-footer-columns a[href^="mailto:"] { color:#a65360 !important; }