/* ==========================================================================
   Me Lawrence Al Kabain, avocat
   Warm-modern design system. Light theme only, system fonts, zero external
   requests (no CDN, no webfonts) — keeps the site fast and avoids shipping
   visitor data to third parties, which matters under Law 25.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  /* Warm neutrals — tuned to the cream in the logo lockup */
  --bg:          #FBF7F1;
  --surface:     #F4EEE4;
  --surface-2:   #EBE3D6;
  --line:        #E3DACB;
  --line-strong: #CFC3AF;

  /* Ink */
  --ink:         #1B1E26;
  --ink-soft:    #4C5262;
  --ink-mute:    #6F7484;

  /* Brand — sampled from the logo animation */
  --accent:       #13203A;  /* navy   — primary buttons, links, headings */
  --accent-dark:  #0B1425;
  --accent-tint:  #E9ECF2;
  --gold:         #C49A3F;  /* gold   — rules, icon chips, decorative accents */
  --gold-deep:    #A67F2E;
  --gold-text:    #8A6A21;  /* darkened for small text — 4.9:1 on cream */
  --gold-tint:    #F6EEDD;
  --clay:         #A9663F;

  --white: #FFFFFF;

  /* Type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Space */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  --radius:    10px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(34,31,28,.05), 0 2px 8px rgba(34,31,28,.04);
  --shadow-md: 0 2px 6px rgba(34,31,28,.06), 0 12px 32px rgba(34,31,28,.07);

  --wrap: 1140px;
  --measure: 68ch;
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }

}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }

h2 { font-size: clamp(1.65rem, 3.4vw, 2.35rem); }

h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }

h4 { font-size: 1.075rem; }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

a:hover { color: var(--accent-dark); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --------------------------------------------------------------- layout -- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); }

.wrap--narrow { max-width: 780px; }

section { padding-block: var(--s-8); }

@media (min-width: 768px) { section { padding-block: var(--s-9); } }

.section--surface { background: var(--surface); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--white);
  padding: var(--s-3) var(--s-5); border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus { left: 0; color: var(--white); }

/* --------------------------------------------------------------- header -- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(252,250,247,.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: 74px;
}

.brand { display: flex; flex-direction: row; align-items: center; gap: .7rem;
         text-decoration: none; line-height: 1.1; }

.brand__mark { width: 34px; height: auto; flex: none; display: block; }

.brand__text { display: flex; flex-direction: column; }

.brand:hover { color: inherit; }

.brand__name {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 600;
  color: var(--ink); letter-spacing: -.01em;
}

.brand__role {
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: var(--s-5); }

.nav__list { display: flex; align-items: center; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }

.nav__link {
  font-size: .935rem; color: var(--ink-soft); text-decoration: none;
  padding-block: var(--s-2); border-bottom: 2px solid transparent;
}

.nav__link:hover { color: var(--accent); }

.nav__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.nav__actions { display: flex; align-items: center; gap: var(--s-3); }

.lang-toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-mute); text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: 100px;
  padding: .32rem .7rem;
}

.lang-toggle:hover { color: var(--accent); border-color: var(--accent); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: .45rem .6rem; cursor: pointer;
  /* 44px minimum touch target */
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center; flex-direction: column;
}

.nav-toggle__bar {
  display: block; width: 20px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle__bar + .nav-toggle__bar { margin-top: 4px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: flex; order: 4; }

  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: var(--s-4) var(--s-5) var(--s-6);
    box-shadow: var(--shadow-md);
    display: none;
  }

  .nav[data-open="true"] { display: flex; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .nav__link { display: block; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }

  .nav__link[aria-current="page"] { border-bottom-color: var(--accent); }

  .nav__actions { margin-top: var(--s-4); flex-wrap: wrap; }

}

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-size: .96rem; font-weight: 500; line-height: 1;
  padding: .85rem 1.5rem; border-radius: 100px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn:active { transform: translateY(0); }

.btn--primary { background: var(--accent); color: var(--white); }

.btn--primary:hover { background: var(--accent-dark); color: var(--white); }

.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }

.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--light { background: var(--white); color: var(--accent); }

.btn--light:hover { background: var(--surface); color: var(--accent-dark); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* ----------------------------------------------------------------- hero -- */
.hero {
  padding-block: var(--s-8) var(--s-8);
  background:
    radial-gradient(120% 100% at 88% 0%, var(--accent-tint) 0%, rgba(231,239,237,0) 58%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 768px) { .hero { padding-block: var(--s-9) var(--s-9); } }

/* ---------------------------------------------------------- page header -- */
.page-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-7) var(--s-7);
}

@media (min-width: 768px) { .page-head { padding-block: var(--s-8); } }

.page-head__kicker {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-text); margin-bottom: var(--s-3);
}

.page-head__lead { font-size: 1.125rem; color: var(--ink-soft); max-width: 60ch; }

/* ---------------------------------------------------------- breadcrumbs -- */
.crumbs { font-size: .85rem; color: var(--ink-mute); margin-bottom: var(--s-4); }

.crumbs a { color: var(--ink-mute); text-decoration: none; }

.crumbs a:hover { color: var(--accent); text-decoration: underline; }

.crumbs span { margin-inline: .4rem; }

/* ---------------------------------------------------------------- intro -- */
.section-intro { max-width: 62ch; margin-bottom: var(--s-7); }

.section-intro .kicker {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-text); margin-bottom: var(--s-3);
}

.section-intro p { color: var(--ink-soft); }

/* ---------------------------------------------------------------- cards -- */
.grid { display: grid; gap: var(--s-5); }

/* Always exactly two columns above the breakpoint. auto-fit was resolving to
   three at 1140px, which left the fourth card stranded on its own row. */
.grid--2 { grid-template-columns: 1fr; }

@media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s-6);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card__icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--gold-tint); color: var(--gold-deep);
  border: 1px solid rgba(196,154,63,.28);
  display: grid; place-items: center; margin-bottom: var(--s-4);
}

.card h3 { margin-bottom: var(--s-3); }

.card p { color: var(--ink-soft); font-size: .97rem; margin-bottom: var(--s-4); }

/* ---------------------------------------------------------------- steps -- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--s-5); }

.steps li {
  counter-increment: step; position: relative;
  padding-left: 3.5rem;
}

.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 2.35rem; height: 2.35rem; border-radius: 50%;
  background: var(--accent); color: var(--white);
  font-family: var(--serif); font-size: 1.05rem;
  display: grid; place-items: center;
}

.steps h3 { margin-bottom: var(--s-2); font-size: 1.1rem; }

.steps p { color: var(--ink-soft); font-size: .97rem; margin: 0; }

/* --------------------------------------------------------------- checks -- */
.checklist { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }

.checklist li {
  position: relative; padding-left: 1.85rem; color: var(--ink-soft); font-size: .98rem;
}

.checklist li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); opacity: .85;
}

.checklist--tight li { font-size: .94rem; }

/* --------------------------------------------------------------- split --- */
.split { display: grid; gap: var(--s-7); align-items: center; }

@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); }

  .split--portrait { grid-template-columns: minmax(0, 380px) 1fr; }

}

.portrait {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-2); box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
}

.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; }

.portrait-caption {
  margin-top: var(--s-4); font-size: .85rem; color: var(--ink-mute);
  text-align: center;
}

/* -------------------------------------------------------------- callout -- */
.callout {
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: var(--s-5) var(--s-6);
  margin-block: var(--s-6);
}

.callout p:last-child { margin-bottom: 0; }

.callout h3 { font-size: 1.05rem; margin-bottom: var(--s-2); }

.callout--warn { border-left-color: var(--clay); background: #FDF8F4; }

/* ------------------------------------------------------------- contacts -- */
.contact-grid { display: grid; gap: var(--s-5); }

@media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; } }

.contact-methods { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }

.contact-methods li {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-5); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}

.contact-methods__icon {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  background: var(--gold-tint); color: var(--gold-deep);
  border: 1px solid rgba(196,154,63,.28);
  display: grid; place-items: center;
}

.contact-methods dt, .contact-methods .label {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: .25rem;
}

.contact-methods .value { font-size: 1.05rem; font-weight: 500; color: var(--ink); text-decoration: none; }

a.value:hover { color: var(--accent); }

.contact-methods .note { font-size: .87rem; color: var(--ink-mute); margin: .2rem 0 0; }

/* ----------------------------------------------------------------- form -- */
.form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s-6); }

.field { margin-bottom: var(--s-5); }

.field label { display: block; font-size: .89rem; font-weight: 500; margin-bottom: var(--s-2); color: var(--ink); }

.field .req { color: var(--clay); }

.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: .7rem .85rem;
}

.field textarea { min-height: 130px; resize: vertical; }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.field .hint { font-size: .84rem; color: var(--ink-mute); margin: var(--s-2) 0 0; }

.consent { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-5); }

.consent input { width: 1.35rem; height: 1.35rem; margin-top: .2rem; flex: none; accent-color: var(--accent); }

.consent label { font-size: .9rem; color: var(--ink-soft); font-weight: 400; line-height: 1.5; }

.form-note { font-size: .84rem; color: var(--ink-mute); margin-top: var(--s-4); }

/* Questions de tri du formulaire de contact, affichées selon le domaine choisi. */
.screen { border-top: 1px solid var(--line); margin-bottom: var(--s-5); padding-top: var(--s-5); }

.screen__title { margin: 0 0 var(--s-4); font-weight: 600; color: var(--ink); }

.screen fieldset { border: 0; padding: 0; margin-inline: 0; }

.screen legend { padding: 0; margin-bottom: var(--s-3); font-size: .89rem; font-weight: 500; color: var(--ink); }

.screen label.consent { display: flex; margin-bottom: var(--s-2); font-size: .9rem; font-weight: 400; color: var(--ink-soft); }

/* ----------------------------------------------------------------- prose -- */
.prose h2 { margin-top: var(--s-7); }

.prose h2:first-child { margin-top: 0; }

.prose h3 { margin-top: var(--s-6); }

.prose p, .prose li { color: var(--ink-soft); }

.prose ul, .prose ol { max-width: var(--measure); padding-left: 1.25rem; }

.prose li { margin-bottom: var(--s-2); }

.prose dl { max-width: var(--measure); }

.prose dt { font-weight: 600; color: var(--ink); margin-top: var(--s-4); }

.prose dd { margin: var(--s-1) 0 0; color: var(--ink-soft); }

/* ------------------------------------------------------------------ CTA -- */
.cta-band {
  background: var(--accent); color: var(--white);
  border-radius: var(--radius-lg); padding: var(--s-7) var(--s-6);
  text-align: center;
}

.cta-band h2 { color: var(--white); }

.cta-band p { color: rgba(255,255,255,.86); margin-inline: auto; max-width: 54ch; }

.cta-band .btn-row { justify-content: center; }

.cta-band .btn--light { background: var(--gold); color: var(--accent-dark); }

.cta-band .btn--light:hover { background: #D4AC55; color: var(--accent-dark); }

.cta-band .btn--ghost { border-color: rgba(255,255,255,.45); color: var(--white); }

.cta-band .btn--ghost:hover { border-color: var(--white); color: var(--white); background: rgba(255,255,255,.1); }

.cta-band__fine { font-size: .85rem; color: rgba(255,255,255,.7); margin-top: var(--s-5); }

/* --------------------------------------------------------------- footer -- */
.site-footer {
  background: var(--ink); color: rgba(255,255,255,.72);
  padding-block: var(--s-8) var(--s-6); margin-top: var(--s-8);
  font-size: .93rem;
}

.footer-grid { display: grid; gap: var(--s-6); }

@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-7); } }

.site-footer h3 {
  color: var(--white); font-family: var(--sans); font-size: .76rem;
  letter-spacing: .15em; text-transform: uppercase; margin-bottom: var(--s-4);
  font-weight: 600;
}

.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }

.site-footer a:hover { color: var(--white); text-decoration: underline; }

.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }

.site-footer p { max-width: 40ch; margin-bottom: var(--s-3); }

.footer-brand__name { font-family: var(--serif); font-size: 1.15rem; color: var(--white); margin-bottom: var(--s-2); }

.footer-meta {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  justify-content: space-between; font-size: .85rem; color: rgba(255,255,255,.55);
}

.footer-meta p { margin: 0; max-width: none; }

.footer-disclaimer {
  font-size: .82rem; color: rgba(255,255,255,.5); line-height: 1.55;
  max-width: 78ch; margin-top: var(--s-4);
}

/* ---------------------------------------------------- cinematic hero ----- */
/* One screen tall. 100svh (not vh) so mobile browser chrome can't cause
   overflow. The hero slides up under the sticky header, which is transparent
   until you scroll past it. */
.hero-video {
  position: relative;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: -74px;          /* pull up under the sticky header */

  /* The logo fills 60% of the video frame's height, so object-fit:cover makes it
     far too large to share the hero with bottom-anchored text — and cropping the
     sides on phones would slice the wordmark. Instead the media sits in its own
     box and the hero paints a radial gradient tuned to the video's sampled edge
     colours, so the backdrop continues past the video's rectangle. */
  background: radial-gradient(118% 96% at 50% 30%,
    #D5D0C9 0%, #C8C4BC 38%, #B1AEA6 74%, #9D9A92 100%);
}

/* Give the <video> an explicit ratio so it reserves the right box before its
   metadata loads. Phones load the portrait encode (see the <source media>
   attribute), so the ratio has to switch with it. The still is a 16:9 frame and
   uses its own intrinsic ratio. */
.hero-video__media { aspect-ratio: 16 / 9; }

@media (max-aspect-ratio: 1 / 1) {
  .hero-video__media { aspect-ratio: 2 / 3; max-height: 46%; }

}

/* Soft fade into the page background so the hero dissolves into the site */
.hero-video__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(251,247,241,0) 0%,
    rgba(251,247,241,.42) 26%,
    rgba(251,247,241,.80) 52%,
    rgba(251,247,241,.96) 76%,
    var(--bg) 100%
  );
}

.hero-video .btn-row { margin-top: var(--s-5); }

/* Scroll cue */
.scroll-cue {
  position: absolute;
  bottom: var(--s-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  gap: .35rem;
  color: var(--ink-mute);
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase;
  padding: var(--s-2);
  text-decoration: none;
}

@keyframes cue-bounce {
  0%, 100% { transform: translateY(0); opacity: .75; }

  50%      { transform: translateY(5px); opacity: 1; }

}

/* Header sits transparent over the hero, then solidifies once scrolled past.
   Solid is the DEFAULT — transparency is opt-in via the `js` class set
   synchronously in <head>. Without JS the header stays solid and readable
   rather than floating invisibly over the page content. */
.js .site-header[data-hero-header]:not(.is-solid) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Reduced motion: no video at all, static branded still instead (brief §15) */
@media (prefers-reduced-motion: reduce) {
  .hero-video__media { display: none; }

}

/* --------------------------------------------------------------- utils --- */
.u-center { text-align: center; }

/* ---------------------------------------------------------- intro splash -- */
/* Fullscreen logo animation on first arrival, then it shrinks into the header
   mark. Hidden entirely without JS so content is never trapped behind it. */
.splash { display: none; }

html.js .splash.is-active {
  display: block;
  position: fixed; inset: 0; z-index: 9999;
  background: #B9B6AF;
  transition: opacity .55s ease;
}

.splash.is-leaving { opacity: 0; pointer-events: none; }

.splash__frame {
  position: absolute; inset: 0;
  transform-origin: top left;
  will-change: transform, opacity;
}

.splash__media { width: 100%; height: 100%; object-fit: cover; display: block; }

.splash__skip {
  position: absolute; z-index: 2;
  right: var(--s-5); bottom: var(--s-5);
  font-family: var(--sans); font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: #2B2A27; background: rgba(255,255,255,.62);
  border: 1px solid rgba(0,0,0,.12); border-radius: 100px;
  padding: .5rem 1.15rem; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.splash__skip:hover { background: rgba(255,255,255,.9); }

body.splash-open { overflow: hidden; }

/* ------------------------------------------------------------- text hero -- */
.hero-text {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  /* Asymmetric on purpose: full space above, tighter below, so the hero and the
     section under it do not stack two full paddings into one enormous gap. */
  padding-block: var(--s-8) var(--s-6);
}

.hero-text + section { padding-top: var(--s-6); }

@media (min-width: 768px) {
  .hero-text { padding-block: var(--s-8) var(--s-6); }

  .hero-text + section { padding-top: var(--s-6); }

}

.hero-text__rule {
  width: 54px; height: 3px; border-radius: 2px;
  background: var(--gold); margin-bottom: var(--s-5);
}

.hero-text__title { max-width: 18ch; }

.hero-text__lead {
  font-size: clamp(1.075rem, 1.9vw, 1.25rem);
  color: var(--ink-soft); max-width: 56ch; margin-top: var(--s-5);
}

/* ----------------------------------------------------------- booking ----- */
/* Google's calendar is third-party. Nothing is requested from Google until the
   visitor explicitly asks for it, which keeps clause 6.3 of the legal notice
   true for anyone who never clicks. */
.booking {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--s-5);
}

.booking__placeholder { padding: var(--s-6); text-align: center; }

.booking__placeholder p { margin-inline: auto; }

.booking__note { font-size: .92rem; color: var(--ink-soft); max-width: 54ch; }

.booking__alt { font-size: .88rem; color: var(--ink-mute); margin: var(--s-5) 0 0; }

.booking__placeholder .btn { margin-top: var(--s-5); }

.booking__frame { width: 100%; border: 0; display: block; height: 640px; background: var(--white); }

@media (max-width: 600px) { .booking__frame { height: 760px; } }

.booking.is-empty .booking__placeholder .btn { opacity: .5; pointer-events: none; }

/* ------------------------------------------------------- booking gate ---- */
.booking__locked { padding: var(--s-7) var(--s-6); text-align: center; }

.booking__locked .booking__note { margin-inline: auto; }

.booking__lock { color: var(--gold-deep); margin: 0 auto var(--s-4); display: block; }

.booking.is-locked { background: var(--surface); border-style: dashed; }

.form-status {
  margin: var(--s-4) 0 0; font-size: .93rem; line-height: 1.5;
  padding: var(--s-3) var(--s-4); border-radius: var(--radius);
  display: none;
}

.form-status.is-visible { display: block; }

.form-status.is-error   { background: #FBF0EA; color: #7E3F1D; border: 1px solid #E8CDBB; }

.form-status.is-success { background: var(--accent-tint); color: var(--accent-dark); border: 1px solid #C9D4D1; }

/* --------------------------------------------------- hero with portrait -- */
.hero-text__inner { display: grid; gap: var(--s-6); align-items: center; }

@media (min-width: 860px) {
  .hero-text__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--s-8); }

}

.hero-text__photo { margin: 0; }

.hero-text__photo img {
  width: 100%; max-width: 260px; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 50% 10%;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: var(--white); box-shadow: var(--shadow-md);
}

.hero-text__photo figcaption {
  margin-top: var(--s-3); font-size: .84rem; color: var(--ink-mute);
  max-width: 260px; text-align: center;
}

@media (min-width: 860px) {
  .hero-text__photo img, .hero-text__photo figcaption { margin-left: auto; }

  .hero-text__photo img { max-width: 260px; }

}

/* --------------------------------------------------------- title tiles --- */
.card--tile { padding: var(--s-6); justify-content: flex-start; min-height: 235px; }

/* Larger, two-tone emblem. Navy carries the structure, gold picks out one
   detail, so the four tiles read as a set rather than four stock icons. */
.card--tile .card__icon {
  width: 92px; height: 92px; border-radius: 26px;
  margin-bottom: var(--s-5);
  background: linear-gradient(150deg, var(--gold-tint) 0%, var(--white) 70%);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(34,31,28,.04);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.card--tile .card__icon svg { width: 46px; height: 46px; }

.card--tile .ico-a { stroke: var(--accent); }

.card--tile .ico-b { stroke: var(--gold-deep); stroke-width: 2.1; }

.card--tile:hover .card__icon {
  transform: translateY(-2px) scale(1.04);
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 18px rgba(19,32,58,.10);
}

.card--tile h3 {
  margin: 0 0 var(--s-5); font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  text-wrap: balance;
}

.card--tile .card__more { margin-top: auto; }

/* three steps side by side once there is room */
@media (min-width: 860px) {
  .steps--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }

}

.hero-text__licence {
  display: block; margin-top: 2px;
  font-size: .78rem; letter-spacing: .04em; color: var(--gold-text);
}

/* -------------------------------------------------------- header CTA ----- */
/* Lifted out of the collapsible nav so it stays visible on phones, where it
   used to disappear behind the hamburger. Gold rather than navy so it reads
   as the one thing to press. */
.header-inner > .brand      { order: 1; }

.header-inner > .nav        { order: 2; }

.header-inner > .header-cta { order: 3; }

.header-inner > .nav-toggle { order: 4; }

.header-cta {
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  border-color: transparent;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(196, 154, 63, .38);
}

.header-cta:hover {
  background: var(--gold-deep);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(196, 154, 63, .48);
}

.header-cta:active { transform: translateY(0); }

@media (max-width: 940px) {
  .nav { order: 5; }              /* dropdown panel sits below the bar */
  .header-cta { margin-left: auto; margin-right: var(--s-3); }

}

@media (max-width: 560px) {
  .header-cta { font-size: .84rem; padding: .62rem 1rem; }

  .brand__role { display: none; }

  .brand__name { font-size: 1.02rem; }

}

@media (max-width: 400px) {
  .brand__text { display: none; }  /* logo mark alone keeps the CTA on screen */
}

/* ==========================================================================
   MOBILE REFINEMENTS
   Audited at 320px and 375px across all 16 pages. Three real defects:
   the French header overflowed at 320 (longer labels than English), footer
   and breadcrumb links were under the 40px touch minimum, and the small
   uppercase labels sat below 12px.
   ========================================================================== */

@media (max-width: 620px) {
  /* Reclaim horizontal room: the French CTA label is ~30% longer than the
     English one and pushed the 320px header past the viewport. */
  .wrap { padding-inline: var(--s-4); }

  .header-inner { gap: var(--s-3); min-height: 66px; }

  .header-cta { font-size: .8rem; padding: .58rem .85rem; }

  /* Touch targets: these were 20-24px tall, well under the 40px minimum. */
  .site-footer ul a { display: inline-block; padding-block: .4rem; }

  .crumbs a { display: inline-block; padding-block: .35rem; }

  .contact-methods .value { display: inline-block; padding-block: .25rem; }

  .lang-toggle { padding: .5rem .9rem; }

  /* Small uppercase labels were rendering at 10.6-11.8px. */
  .kicker, .page-head__kicker, .contact-methods .label,
  .contact-methods dt { font-size: .8rem; }

  .hero-text__licence { font-size: .8rem; }

  /* Comfortable reading measure on a phone. */
  .hero-text__lead, .page-head__lead { font-size: 1.05rem; }

}

@media (max-width: 380px) {
  .header-cta { font-size: .8rem; padding: .55rem .7rem; }

  .header-inner { gap: var(--s-2); }

}

/* Stop iOS from tinting tapped cards grey. */
a, button { -webkit-tap-highlight-color: rgba(19, 32, 58, .12); }

/* Kickers previously carried an inline style that overrode every media query.
   Styling them by class instead keeps the mobile size bump effective. */
.kicker {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--s-3);
}

@media (max-width: 620px) {
  .kicker, .section-intro .kicker, .page-head__kicker,
  .contact-methods .label { font-size: .82rem; }

  /* 37px was still short of a comfortable thumb target. */
  .site-footer ul a { padding-block: .6rem; }

  .crumbs a { padding-block: .5rem; }

  .contact-methods .value { padding-block: .45rem; }

  .header-cta { padding-block: .72rem; }

}

@media (max-width: 620px) {
  /* Last 2px to clear 40px, plus the footer language link which sits in a
     <p> rather than the <ul> my earlier selector covered. */
  .header-cta { padding-block: .8rem; }

  .crumbs a { padding-block: .6rem; }

  .footer-meta a { display: inline-block; padding-block: .6rem; }

}

.footer-address { font-style: normal; line-height: 1.6; }
/* ================================================================ faq ==
   <details> natif : ouvrable sans JavaScript, et le contenu reste dans le
   DOM pour l'indexation même replié. */
.faq { display: grid; gap: var(--s-3); margin-top: var(--s-5); }

.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.faq__item summary {
  cursor: pointer;
  padding: var(--s-4) var(--s-5);
  padding-right: var(--s-8);
  font-weight: 600;
  color: var(--accent);
  list-style: none;
  position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: var(--s-5);
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--gold-deep);
  line-height: 1;
}
.faq__item[open] summary::after { content: "–"; }
.faq__item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.faq__item > div {
  padding: 0 var(--s-5) var(--s-5);
  color: var(--ink-soft);
  max-width: var(--measure);
}
.faq__item > div > p { margin: 0 0 var(--s-3); }
.faq__item > div > p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  .faq__item { transition: border-color .15s ease; }
  .faq__item[open] { border-color: var(--line-strong); }
}

/* ============================================================= mandat ==
   Pot de miel : invisible pour l'humain, rempli par les robots. On évite
   display:none, que certains robots savent reconnaître. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.mandat-form h2 {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: 1.15rem;
}
.mandat-form h2:first-of-type { margin-top: var(--s-5); }

.mandat-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--s-4);
}
.mandat-form legend {
  padding: 0;
  margin-bottom: var(--s-2);
  font-weight: 600;
  color: var(--ink);
}

.sig { margin-top: var(--s-3); }

/* touch-action évite que le doigt fasse défiler la page pendant qu'on signe. */
.sig__pad {
  display: block;
  width: 100%;
  height: 200px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--white);
  touch-action: none;
  cursor: crosshair;
}
.sig__clear { margin-top: var(--s-3); }

@media (max-width: 560px) {
  .sig__pad { height: 160px; }
}

/* ====================================================== rythme vertical ==
   Chaque <section> porte 6 rem en haut ET en bas. Deux sections de même
   fond qui se suivent additionnent donc 12 rem, ce qui ouvre un vide au
   milieu de la page sans qu'aucune séparation ne le justifie. On retire la
   marge du haut dans ce cas précis : là où le fond change, les deux marges
   sont conservées, car la césure de couleur les rend lisibles. */
section:not(.section--surface):not(.page-head) + section:not(.section--surface),
.section--surface + .section--surface {
  padding-top: 0;
}

/* ============================================================ impression ==
   Le navigateur n'imprime pas les fonds. Sans ces règles, tout texte blanc
   posé sur un fond sombre — le pied de page, les bandeaux d'appel — devient
   blanc sur blanc, donc invisible sur papier et dans un PDF. */
@media print {
  .site-header,
  .nav,
  .nav-toggle,
  .header-cta,
  .skip-link,
  .hero-video,
  .splash,
  .scroll-cue,
  .booking,
  .form,
  .cta-band,
  .lang-toggle { display: none !important; }

  body {
    background: #FFFFFF;
    color: #000000;
    font-size: 11pt;
    line-height: 1.45;
  }

  section { padding-block: 0.9rem !important; }
  .section--surface { background: transparent !important; }

  /* Le pied de page perd son fond sombre : son texte doit redevenir noir. */
  .site-footer {
    background: transparent !important;
    color: #000000 !important;
    border-top: 1pt solid #999999;
    margin-top: 1.5rem;
    padding-block: 1rem 0;
  }
  .site-footer a,
  .site-footer h3,
  .site-footer p,
  .footer-brand__name,
  .footer-meta { color: #000000 !important; }

  .callout,
  .card,
  .faq__item {
    background: transparent !important;
    border: 1pt solid #BBBBBB;
    box-shadow: none !important;
  }

  /* Un <details> replié n'imprime pas son contenu : on le déplie. */
  .faq__item > div { display: block !important; }
  .faq__item summary::after { content: "" !important; }

  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  .callout, .faq__item, .checklist li, table { break-inside: avoid; page-break-inside: avoid; }

  /* Une adresse cliquable ne mène nulle part sur papier. */
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555555; }
}

/* ============================================== barre de navigation ==
   Les intitulés composés — « Droit civil », « À propos » — se coupaient en
   deux lignes dès que la barre devenait étroite, ce qui déformait la
   hauteur de l'en-tête. Un intitulé de menu ne se coupe jamais; c'est la
   barre qui doit céder, en resserrant ses espacements puis en passant au
   menu déroulant. */
.nav__link,
.brand__name { white-space: nowrap; }

@media (min-width: 861px) and (max-width: 1180px) {
  .nav,
  .nav__list { gap: var(--s-4); }
  .nav__link { font-size: .88rem; }
  .header-cta { padding-inline: var(--s-4); }
}

/* ================================================= cartes de questions ==
   Le hub d'articles réutilise l'habillage des accordéons FAQ, mais ses
   éléments sont des <article> et non des <details> : le titre y est un lien
   qu'il faut pouvoir viser au doigt. Sur une seule ligne, il ne mesurait que
   23 px de haut. */
article.faq__item h3 a {
  display: block;
  padding-block: .72rem;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
article.faq__item { padding-block: var(--s-3) var(--s-4) !important; }


/* Tuiles de domaines sur une colonne : disposition horizontale, hauteur
   naturelle. Le min-height de 235px n'a de sens qu'en grille à deux colonnes. */
@media (max-width: 719px) {
  .card--tile {
    flex-direction: row; align-items: center; gap: var(--s-4);
    min-height: 0; padding: var(--s-4) var(--s-5);
  }
  .card--tile .card__icon { width: 56px; height: 56px; border-radius: 16px; margin-bottom: 0; flex: 0 0 auto; }
  .card--tile .card__icon svg { width: 30px; height: 30px; }
  .card--tile h3 { margin: 0; }
}

/* Liens secondaires « Voir la page du domaine » : 16px de haut, trop peu pour le pouce. */
.form-note a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; }

/* Pacta Avocats (14 nov. 2026) : le nom du cabinet est assez court pour revenir
   dans l'en-tête des téléphones de 370 à 400 px, sur deux lignes à côté de
   l'emblème. En dessous de 370 px, l'emblème seul laisse la place au bouton. */
@media (min-width: 370px) and (max-width: 400px) {
  .brand__text { display: flex; }
  .brand { gap: .5rem; }
  .brand__name { white-space: normal; max-width: 4.6em; font-size: .98rem; line-height: 1.02; }
}

/* lawrence@pactavocats.ca est un seul mot insécable : sur les téléphones de
   320 px, il élargissait la colonne de 3 px et provoquait un défilement
   horizontal sur les pages Contact. On le laisse passer à la ligne au besoin. */
.contact-methods .value, .contact-methods a { overflow-wrap: anywhere; }
.contact-grid > * { min-width: 0; }