/*
 * Self-hosted, same reasoning as the directory's fonts: no dependency on
 * fonts.googleapis.com reaching the visitor's browser.
 */
/* Title font — Playfair Display: modern editorial serif, none of Cinzel
   Decorative's carved/ornamental flourishes. Also embedded in the Garel
   mockup PDF. */
@font-face{
  font-family:"Playfair Display";
  font-style:normal;
  font-weight:600 800;
  font-display:swap;
  src:url("../fonts/playfair-display-var.woff2") format("woff2");
}
@font-face{
  font-family:"Montserrat";
  font-style:normal;
  font-weight:200 700;
  font-display:swap;
  src:url("../fonts/montserrat-var.woff2") format("woff2");
}
/* Content typography (post body) — matches the Garel mockup PDF, whose
   embedded fonts point to Poppins for its editorial content. */
@font-face{
  font-family:"Poppins";
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("../fonts/poppins-300.woff2") format("woff2");
}
@font-face{
  font-family:"Poppins";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/poppins-400.woff2") format("woff2");
}
@font-face{
  font-family:"Poppins";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/poppins-500.woff2") format("woff2");
}
@font-face{
  font-family:"Poppins";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/poppins-600.woff2") format("woff2");
}
@font-face{
  font-family:"Poppins";
  font-style:italic;
  font-weight:300;
  font-display:swap;
  src:url("../fonts/poppins-300italic.woff2") format("woff2");
}
@font-face{
  font-family:"Poppins";
  font-style:italic;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/poppins-600italic.woff2") format("woff2");
}

:root{
  --lhp-sp-ink:#1B1E1F;
  --lhp-sp-ink-soft:#5C6564;
  --lhp-sp-line:rgba(27,30,31,.1);
  --lhp-sp-surface:#FFFFFF;
}

html.lhp-sp-html, body.lhp-sp{height:100%;}
body.lhp-sp{
  margin:0;
  background:var(--lhp-sp-surface);
  color:var(--lhp-sp-ink);
  font-family:"Montserrat", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.lhp-sp *{box-sizing:border-box;}
/*
 * The theme's inline CSS used to force Source Sans Pro on almost every
 * element site-wide via "body *:not(...){font-family:'Source Sans Pro'
 * !important}" — fixed at the source now (assets/css/dynamic-css.php in
 * the theme, !important dropped), but this rule still needs its own
 * !important + extra specificity for the template chrome (title, footer,
 * nav) that isn't meant to be editable content. It explicitly excludes
 * .lhp-sp-main and everything inside it — that area sets its own
 * font-family with normal (non-!important) specificity instead (see
 * below), specifically so an editor's own font choice there — via
 * Elementor's Typography controls or Gutenberg's — can still win, the way
 * a plain override never could while both the theme's rule and this one
 * were fighting it with !important.
 */
html body.lhp-sp *:not(.lhp-sp-main, .lhp-sp-main *){font-family:"Montserrat", ui-sans-serif, system-ui, sans-serif !important;}
body.lhp-sp a{color:inherit;}
body.lhp-sp address{font-style:normal;}

.lhp-sp-page{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  height:100vh;
  height:100dvh;
}
/* WP admin bar adds a fixed 32px (46px on narrow viewports) header — keep
   the split-screen at exactly the remaining viewport height so it never
   overflows into its own page-level scrollbar for logged-in editors. */
body.lhp-sp.admin-bar .lhp-sp-page{height:calc(100vh - 32px); height:calc(100dvh - 32px);}
@media screen and (max-width: 782px){
  body.lhp-sp.admin-bar .lhp-sp-page{height:calc(100vh - 46px); height:calc(100dvh - 46px);}
}

/* ---------- image ---------- */
.lhp-sp-image{
  position:relative;
  /* Higher than .lhp-sp-content: while the content column is sliding
     across this half (see its animation further down), it must stay
     hidden behind the image, not visible in front of it — it should only
     become visible once it has moved past this column's right edge. */
  z-index:2;
  height:100%;
  overflow:hidden;
  background:#F4F2ED;
  /* A hair wider than its own grid column, bleeding into the title's
     column by 2px: on large/fullscreen viewports the title's clip-path
     bevel can show a faint anti-aliased seam right at that boundary
     (a sub-pixel rendering artifact, not a layout gap — the two columns
     measure pixel-perfectly flush). Since the image sits above the
     content column (z-index, see above), this overlap just quietly
     covers that seam instead of leaving it visible. */
  margin-right:-2px;
}
.lhp-sp-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
/*
 * Reveal veil: a white layer covers the image on load and slides out to
 * the left, uncovering it (see the animation further down); fading its
 * opacity out over the same move softens the hard wipe edge into more of
 * a blend. display:none by default — only switched on inside the
 * prefers-reduced-motion:no-preference block below, together with the
 * animation, so a visitor who asked for reduced motion never gets a veil
 * that covers the image and then never leaves (no animation to remove it).
 */
.lhp-sp-image:after{
  content:"";
  display:none;
  position:absolute;
  inset:0;
  background:var(--lhp-sp-surface);
  pointer-events:none;
}

/* ---------- content column: independent scroll, footer pinned to the
   bottom of the viewport when the post content is short ---------- */
.lhp-sp-content{
  position:relative;
  /* Lower than .lhp-sp-image (see above): while this column is sliding in
     from the left (see the animation below) it starts stacked exactly on
     top of the image column, and must stay hidden behind the image for as
     long as it overlaps it — only becoming visible once it has slid past
     the image's right edge into its own empty half. */
  z-index:1;
  height:100%;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  background:var(--lhp-sp-surface);
}

/* ---------- header / bevelled title ----------
   Flush against the top of the window and the right edge of the image
   (i.e. the left edge of this column) — no padding/margin on the header
   itself. Only the ribbon's own internal padding (text breathing room)
   and the subtitle's inset are set below it. */
.lhp-sp-header{padding:0; margin:0; position:relative;}
/* Sits in the white corner the bevel's clip-path and the title's own
   margin-right:15% leave empty, top-right of the header — not on top of
   the colored ribbon itself. */
.lhp-sp-back{
  position:absolute; top:20px; right:28px; z-index:2;
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; letter-spacing:.02em;
  text-decoration:none;
}
.lhp-sp-back:hover{text-decoration:underline;}
.lhp-sp-back svg{width:16px; height:16px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.lhp-sp-title{
  display:block;
  font-weight:700;
  font-size:clamp(28px, 3.4vw, 46px);
  line-height:1.2;
  background:var(--lhp-sp-color, #000);
  color:var(--lhp-sp-color-text, #fff);
  clip-path:polygon(100% 0%, 94% 100%, 0% 100%, 0% 0%);
  padding:0 44px 0 28px;
  margin:0 15% 0 0;
  max-width:100%;
}
/*
 * body.lhp-sp .lhp-sp-title, not just h1.lhp-sp-title: the theme's inline
 * CSS has "body *:not(i, .ab-icon, .fa-caret-down, .fa){font-family:
 * 'Source Sans Pro' !important}" — a universal selector, but :not() with a
 * class argument gives it (0,1,1) specificity, tying h1.lhp-sp-title
 * exactly; ties go to whichever rule prints later in <head>, which isn't
 * guaranteed to be us. Adding body.lhp-sp pushes this to (0,2,1) so it
 * wins outright regardless of print order.
 */
html body.lhp-sp .lhp-sp-title{font-family:"Playfair Display", Georgia, serif !important;}
/* The theme's own inline CSS puts a gold bar under every <h1> via
   "h1:after{background-color:#F5CB5C !important; height:3px; ...}" —
   content isn't !important in their rule, so killing it here (higher
   specificity: .lhp-sp-title:after beats a bare h1:after) removes the
   generated box entirely, regardless of their !important background/height. */
.lhp-sp-title:after{content:none; display:none !important;}
.lhp-sp-subtitle{
  margin:14px 0 0;
  padding:0 56px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--lhp-sp-ink-soft);
}

/* ---------- main content (Elementor or Gutenberg output) ----------
   Deliberately hands-off on typography (font, size, weight, color,
   heading margins) — that's now controlled per-element from Elementor's
   own Typography controls instead of being forced here. See the
   font-family cascade notes further up for how that's kept possible. */
.lhp-sp-main{
  flex:1 0 auto;
  padding:16px 56px;
}
.lhp-sp-main strong{font-weight:600; color:var(--lhp-sp-ink);}
.lhp-sp-main em{font-style:italic;}
.lhp-sp-main strong em, .lhp-sp-main em strong{font-size:1.1em;}
.lhp-sp-main img{max-width:100%; height:auto;}

/* ---------- footer: always at the bottom of the content area, even when
   the post content is short — the fix for the original mockup, whose
   footer just followed short content with a gap instead of the viewport
   bottom (margin-top:auto on a flex:1 0 auto main is what pins it). ---------- */
/*
 * Three columns: QR/logo on its own, then the name+phone+address block,
 * then email+socials. "align-items:center" on the grid centers the QR
 * column against the row height — which, with the other two columns
 * self-aligned to "start", is set by the (usually tallest) contact column,
 * putting the QR right where it should be: centered on phone/address, not
 * the whole footer. The social column gets a margin-top exactly matching
 * the name's reserved height so its first line (email) lines up with
 * phone, not with the name above it — deterministic because both values
 * (the name's line-height and this margin) are fixed here, not measured.
 */
.lhp-sp-footer{
  margin-top:auto;
  display:grid;
  /* 3rd column is auto (content-sized), not 1fr: the "Demande d'information"
     button must never be the thing that gets squeezed narrower. Below
     max-width:1450px (see that query further down) there simply isn't
     room for a fixed-width button column *and* a legible contact column
     side by side any more, so the footer stacks to one column instead —
     still not touching the button. */
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  column-gap:24px;
  padding:32px 56px 44px;
  border-top:1px solid var(--lhp-sp-line);
}
.lhp-sp-footer-col--contact{align-self:start; display:flex; flex-direction:column; min-width:0;}
.lhp-sp-footer-col--social{align-self:start; display:flex; flex-direction:column; gap:2px; margin-top:28px;}

.lhp-sp-footer-name{line-height:20px; font-weight:700; font-size:16px; margin:0 0 8px;}

.lhp-sp-footer-figure{
  align-self:center;
  width:120px; height:120px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
}
.lhp-sp-footer-figure img{width:100%; height:100%; object-fit:contain;}
.lhp-sp-footer-figure a{display:block; width:100%; height:100%;}
.lhp-sp-qrcode{width:120px; height:120px; line-height:0;}
.lhp-sp-qrcode canvas, .lhp-sp-qrcode img{display:block; width:100% !important; height:100% !important;}

.lhp-sp-footer-info{display:flex; flex-direction:column; gap:2px; min-width:0;}
.lhp-sp-footer-line{font-size:14px; color:var(--lhp-sp-ink-soft); line-height:1.3;}
.lhp-sp-footer-link{text-decoration:none;}
.lhp-sp-footer-link:hover{text-decoration:underline;}

.lhp-sp-socials{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
/* .lhp-sp-footer-col--social .lhp-sp-social-link (2 classes) is needed to
   outrank "body.lhp-sp a{color:inherit}" (1 class + 2 elements) further
   up — that broad link reset otherwise wins on specificity and the icon
   silently inherits the dark body text color instead of white, matching
   its own dark circular background (invisible icon, not a missing one). */
.lhp-sp-footer-col--social .lhp-sp-social-link{
  width:30px; height:30px; border-radius:50%;
  background:var(--lhp-sp-ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}
.lhp-sp-footer-col--social .lhp-sp-social-link:hover{background:var(--lhp-sp-color, var(--lhp-sp-ink-soft));}
.lhp-sp-social-link svg{width:15px; height:15px; fill:currentColor;}

/* The theme's .btn_info is display:inline with vertical padding — fine on
   one line, but an inline box that wraps to a 2nd line renders each line's
   background as a separate disjointed segment (the "deformed" look this
   fixes). Locking it to one line is what makes the auto-sized 3rd footer
   column meaningful: it sizes to this button's true, unwrapped width. */
.lhp-sp-footer .passerAnnonceLink{white-space:nowrap;}
.lhp-sp-footer .info_btn_container{margin-right:12px;}

/* Between this and the 860px breakpoint below (where the whole template
   stacks), only the footer switches to one column: side by side, the
   fixed-width QR and (never-shrunk, see above) button columns don't leave
   the contact column room to stay legible, and letting it overflow instead
   puts a horizontal scrollbar under the whole content column, not just the
   footer — worse than stacking the footer a bit earlier. */
@media (max-width:1450px){
  .lhp-sp-footer{grid-template-columns:1fr; row-gap:20px; column-gap:0;}
  .lhp-sp-footer-col--social{margin-top:0;}
}

/* ---------- responsive: stack, image becomes a fixed-height band that
   fills its height and crops its sides (object-fit:cover, unchanged) ---------- */
@media (max-width: 860px){
  .lhp-sp-page{grid-template-columns:1fr; height:auto; display:block;}
  .lhp-sp-image{height:25vh;}
  .lhp-sp-content{height:auto; overflow:visible; display:block;}
  .lhp-sp-subtitle{padding:0 24px;}
  .lhp-sp-back{top:12px; right:16px;}
  .lhp-sp-back span{display:none;}
  .lhp-sp-main{padding:24px;}
  .lhp-sp-footer{margin-top:0; padding:24px 24px 36px; grid-template-columns:1fr; gap:20px;}
  .lhp-sp-footer-col--social{margin-top:0;}
  .lhp-sp-footer-figure, .lhp-sp-qrcode{width:96px; height:96px;}
  body.lhp-sp.admin-bar .lhp-sp-page{height:auto;}
}

/*
 * On load, the content column starts translated a full width to the left
 * — exactly stacked on top of the image column — then slides right into
 * its own half. It stays hidden the whole time it overlaps the image
 * (lower z-index, see above), only becoming visible once it has slid past
 * the image's right edge; the image itself reveals independently through
 * its own veil (:after, above). Both animations share the exact same
 * duration/easing (previously .7s ease-out vs .9s ease-in-out) so the two
 * moves read as one coordinated motion instead of visibly drifting apart
 * mid-flight, which is what actually read as stutter even though each
 * animation was individually smooth. will-change hints the compositor to
 * promote both to their own layer up front rather than during the first
 * animated frame.
 */
@keyframes lhp-sp-slide-in-x{
  from{transform:translateX(var(--lhp-sp-slide-from, -100%));}
  to{transform:translateX(0);}
}
@keyframes lhp-sp-reveal-veil{
  from{transform:translateX(0); opacity:1;}
  to{transform:translateX(-100%); opacity:.7;}
}
@media (prefers-reduced-motion: no-preference){
  .lhp-sp-social-link{transition:background .15s ease;}
  .lhp-sp-content{will-change:transform; animation:lhp-sp-slide-in-x .7s ease-out both;}
  .lhp-sp-content{--lhp-sp-slide-from:-100%;}
  .lhp-sp-image:after{display:block; will-change:transform, opacity; animation:lhp-sp-reveal-veil .7s ease-out both;}
}