/* Un mouvement de marque plutôt qu’un filtre décoratif global. Le film se
   déplie au scroll; les actions ont un relief et les services une réponse. */
/* Une même famille donne le squelette; la serif réserve un accent au titre.
   Les repères numérotés guident le parcours sans ajouter de texte marketing. */
h2 {font-family:var(--display);font-weight:700}
h2 em {font-family:var(--serif);font-weight:400;letter-spacing:-.035em}
.hero.hero-dark {width:100%;max-width:none;padding-inline:var(--gutter);background:var(--ink);color:var(--paper)}
.hero-dark .hero-eyebrow {color:var(--orange);letter-spacing:.045em}
.hero-dark .hero-title {font-size:clamp(92px,11.9vw,200px)}
.hero-dark .hero-line:nth-child(3) {width:max-content;max-width:60.2%;font-size:1.42em;line-height:.83;letter-spacing:-.035em;padding-bottom:.13em}
.hero-dark .hero-serif {font-family:var(--serif);font-weight:400;font-style:italic;color:var(--orange)}
.hero-dark .hero-serif .hero-letter.is-hot {color:var(--paper)}
.hero-dark .hero-round {right:calc(var(--gutter) + 20px)}
.hero-dark .hero-orbit {right:var(--gutter);opacity:.9}
.hero-dark .hero-bottom>p {font-size:clamp(18px,1.55vw,24px);max-width:530px}
.hero-dark .hero-footnote {color:#bbb8b0}
.hero-dark .button-orange:hover,.hero-dark .button-orange:focus-visible {background:var(--orange);color:var(--ink);box-shadow:8px 8px 0 var(--paper)}
.hero-dark .hero-underline {height:5px}
.hero-dark .button::after,.menu-dialog .button::after {display:none}
.overline,.services .section-heading>p,.contact-heading-copy>p {display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.055em;text-transform:uppercase}
.overline::before,.services .section-heading>p::before,.contact-heading-copy>p::before {content:'';width:7px;height:7px;background:var(--orange);flex:0 0 auto}
.contact-heading-copy>p::before {background:var(--orange)}
section.lab .lab-lottie {color:var(--paper)}
.method h2 {margin-bottom:50px}
.footer.footer-dark .contact-heading h2 em {font-size:1.1em;color:var(--orange)}
.film-section {padding-block:64px 100px;background:var(--paper);overflow:hidden}
.film-heading {display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:44px}
.film-heading h2 {font-family:var(--display);font-weight:700;font-size:clamp(48px,5vw,80px);line-height:1;letter-spacing:-.065em}
.film-heading h2 em {font-family:var(--serif);font-weight:400;letter-spacing:-.035em}
.film-heading>p {font-size:14px;max-width:230px;line-height:1.5;padding-bottom:8px}
.film-shell {position:relative;background:var(--orange);aspect-ratio:16/9;overflow:hidden;transform-origin:center center;isolation:isolate}
.film-shell video {display:block;width:100%;height:100%;object-fit:cover}
.film-caption {display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:20px;font-size:12px}
.film-toggle {display:flex;align-items:center;justify-content:space-between;gap:32px;border-bottom:1px solid currentColor;padding:12px 0;min-height:48px;min-width:195px;font-size:13px}
.film-toggle>span:last-child {font-size:22px;transition:transform .2s}
.film-toggle:hover>span:last-child,.film-toggle:focus-visible>span:last-child {transform:rotate(45deg)}
.hero .button,.menu-dialog .button {transition:box-shadow .25s,background-color .25s,color .25s}
.hero .button:hover,.hero .button:focus-visible,.menu-dialog .button:hover,.menu-dialog .button:focus-visible {box-shadow:9px 9px 0 var(--orange);background:var(--ink)}
.text-link:not(.footer .text-link) {position:relative}
.text-link:not(.footer .text-link)::after {content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .24s}
.text-link:not(.footer .text-link):hover::after,.text-link:not(.footer .text-link):focus-visible::after {transform:scaleX(1)}
.method-grid li {position:relative}
.method-grid .method-number {transition:transform .25s,color .25s}
.method-grid li:hover .method-number {transform:translateX(10px)}
.menu-dialog nav>a {transition:transform .25s,color .25s}
.menu-dialog nav>a:hover,.menu-dialog nav>a:focus-visible {transform:translateX(14px);color:var(--orange)}
@media(max-width:999px) {.film-section {padding-top:36px}.film-heading h2 {font-size:clamp(48px,7vw,74px)}}
@media(max-width:999px) {.hero-dark .hero-title {font-size:12.3vw}.hero-dark .hero-round {right:var(--gutter)}.hero-dark .hero-bottom>p {font-size:20px}}
@media(max-width:599px) {
  .hero-dark .hero-title {font-size:15.7vw}
  .hero-dark .hero-line:nth-child(2) {margin-left:8%}
  .hero-dark .hero-line:nth-child(3) {margin-left:27%;max-width:73%;font-size:1.6em}
  .hero-dark .hero-bottom>p {font-size:18px}
  .hero-dark .hero-round {right:var(--gutter)}
  section.lab .lab-heading {display:flex;align-items:end;gap:12px}
  section.lab .lab-heading h2 {font-size:15.3vw}
  section.lab .lab-lottie {width:52px;height:52px;margin:0 0 8px;flex-shrink:0}
  .method h2 {margin-bottom:36px}
  .film-section {padding-block:20px 70px}
  .film-heading {display:block;margin-bottom:26px}
  .film-heading h2 {font-size:clamp(44px,13.5vw,65px)}
  .film-heading>p {margin-top:24px;max-width:260px;font-size:13px}
  .film-caption {align-items:start;font-size:10px;gap:18px}
  .film-toggle {min-width:130px;font-size:12px;gap:16px;padding-top:0}
}
@media(prefers-reduced-motion:reduce) {
  .button,.method-grid .method-number,.menu-dialog nav>a {transition:none}
}
html[data-motion=reduce] .button,html[data-motion=reduce] .menu-dialog nav>a {transition:none}

/* Vivre Saint-Bo : un grand titre en contour qui se remplit à l’encre au
   défilement (le tracé), terminé par le point orange. Sans mouvement, il est
   plein d’emblée (--fill vaut 100 % par défaut). */
.case-heading {margin-bottom:clamp(34px,4vw,56px)}
.case-heading-top {display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:clamp(16px,2vw,26px)}
.case-heading-top .overline {margin:0}
.case-heading-top .text-link {font-size:15px}
.case-title {font:700 clamp(54px,12.6vw,204px)/.84 var(--display);letter-spacing:-.07em;text-transform:uppercase;margin:0}
.case-title-line {display:block;width:fit-content;padding:0 .05em .04em 0;color:transparent;-webkit-text-stroke:max(1px,.009em) var(--ink);background:linear-gradient(var(--ink),var(--ink)) 0 0/var(--fill,100%) 100% no-repeat;-webkit-background-clip:text;background-clip:text}
.case-title-line+.case-title-line {margin-left:clamp(0px,10vw,170px)}
.case-title-dot {display:inline-block;width:.16em;height:.16em;margin-left:.06em;border-radius:50%;background:var(--orange);-webkit-text-stroke:0}
@media (max-width:599px) {.case-title-line+.case-title-line {margin-left:0}.case-heading-top .text-link {font-size:13px;min-width:0}}

/* Film : sans scène, il reste cadré dans la largeur du site. Armée
   (js/film-stage.js), la scène occupe l’écran : le papier recouvre la vidéo
   et le mot « mouvement » s’y découpe. Le titre HTML reste pour les lecteurs
   d’écran. */
.film-stage {width:calc(100% - var(--gutter)*2);max-width:1600px;margin-inline:auto}
.film-section[data-film-armed] {padding-top:0}
.film-section[data-film-armed] .film-heading {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.film-section[data-film-armed] .film-stage {position:relative;width:100%;max-width:none;height:100vh;height:100svh;overflow:hidden;background:var(--paper)}
.film-section[data-film-armed] .film-shell {position:absolute;inset:0;aspect-ratio:auto;clip-path:none}
.film-section[data-film-armed] .film-caption {margin-top:22px}
.film-mask {position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.film-lead {position:absolute;left:0;top:0;z-index:3;font:italic 400 var(--lead-size,64px)/1 var(--serif);letter-spacing:-.03em;color:var(--ink);transform:translate(var(--lead-x,0px),var(--lead-y,0px)) translateY(-100%);pointer-events:none;white-space:nowrap}