/* Chorégraphie GR conception.
   Quatre gestes tirés du logo : le tracé (une ligne se dessine), le point
   (le point orange du G), le cadre (les coins du viseur) et la coupe (masques,
   rideaux et contrastes nets encre / papier / orange). Ce fichier porte les
   états de repos, les états armés par JavaScript et les replis réduits.
   Sans JavaScript, tout reste visible et en place. */

:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.65,0,.35,1)}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* Header : absolu sur le hero sans JavaScript, fixe et thématique ensuite. */
.site-header{transition:transform .6s var(--ease-out),background-color .35s ease,color .35s ease,height .45s var(--ease-out),box-shadow .35s ease}
html[data-ready=ready] .site-header{position:fixed}
html[data-header-theme=ink] .site-header{color:var(--paper);--header-bg:var(--ink)}
html[data-header-theme=paper] .site-header{color:var(--ink);--header-bg:var(--paper)}
html[data-header-theme=orange] .site-header{color:var(--ink);--header-bg:var(--orange)}
html[data-scrolled] .site-header{background:var(--header-bg,var(--ink));height:calc(var(--header-h) - 22px);box-shadow:0 1px 0 color-mix(in srgb,currentColor 14%,transparent)}
html[data-header-theme=orange] .brand-dot{fill:var(--ink)}
.brand-trace{stroke:var(--orange)}
html[data-header-theme=orange] .brand-trace{stroke:var(--ink)}
.brand-logo .brand-dot{transform-box:fill-box;transform-origin:50% 100%}
/* Sans JavaScript, un simple saut; avec js/brand.js, le point fait le tour du G. */
.brand:hover .brand-logo:not([data-inline]) .brand-dot,.brand:focus-visible .brand-logo:not([data-inline]) .brand-dot{animation:dot-hop .8s var(--ease-out)}
@keyframes dot-hop{0%{transform:none}28%{transform:translateY(-110%) scale(.9,1.12)}56%{transform:translateY(0) scale(1.2,.8)}76%{transform:translateY(-18%) scale(.96,1.04)}100%{transform:none}}


/* Curseur viseur : le point suit la souris, le cadre se pose sur la cible. */
.cursor{position:fixed;left:0;top:0;width:0;height:0;z-index:90;pointer-events:none;opacity:0;display:none;--tone:var(--orange);--tone-text:var(--ink)}
html[data-pointer=fine][data-motion=full] .cursor{display:block}
html[data-entry=pending] .cursor{z-index:120}
.cursor[data-tone=ink]{--tone:var(--ink);--tone-text:var(--paper)}
.cursor-frame{position:absolute;left:0;top:0;width:40px;height:40px}
.cursor-frame>i{position:absolute;width:9px;height:9px;border:0 solid var(--tone);transition:opacity .25s,width .35s var(--ease-out),height .35s var(--ease-out),border-color .25s}
.cursor-frame>i:nth-child(1){left:0;top:0;border-width:1.5px 0 0 1.5px}
.cursor-frame>i:nth-child(2){right:0;top:0;border-width:1.5px 1.5px 0 0}
.cursor-frame>i:nth-child(3){right:0;bottom:0;border-width:0 1.5px 1.5px 0}
.cursor-frame>i:nth-child(4){left:0;bottom:0;border-width:0 0 1.5px 1.5px}
.cursor[data-mode=lock] .cursor-frame>i{width:13px;height:13px}
.cursor[data-mode=title] .cursor-frame>i{width:16px;height:16px}
.cursor-center{position:absolute;left:0;top:0;width:6px;height:6px;border-radius:50%;background:var(--tone);transition:width .3s,height .3s,background-color .25s}
.cursor[data-mode=lock] .cursor-center{width:4px;height:4px}
.cursor-label{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;padding:5px 9px 4px;font:600 10px/1.2 var(--body);letter-spacing:.07em;text-transform:uppercase;background:var(--tone);color:var(--tone-text);opacity:0;transition:opacity .2s}
.cursor[data-labelled] .cursor-label{opacity:1}

/* Hero : grain de film, coupe des lettres, anneau qui tourne. Le header
   fixe recouvre désormais le haut du hero : ses repères descendent d’autant. */
.hero-dark .hero-round{top:calc(var(--header-h) + 58px)}
.hero-dark .hero-orbit{top:calc(var(--header-h) - 8px)}
.hero-grain{position:absolute;inset:-80px;z-index:0;pointer-events:none;opacity:.085;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/180px;animation:grain 1.1s steps(5) infinite}
@keyframes grain{0%,100%{transform:none}20%{transform:translate(-18px,11px)}40%{transform:translate(13px,-15px)}60%{transform:translate(-9px,-7px)}80%{transform:translate(16px,9px)}}
.hero-char{display:inline-block;position:relative}
.hero-char.space{width:.25em}
/* La coupe du hero est un clip-path : il masque le bas sans toucher à la
   mise en page, et laisse dépasser l’accent du « À » vers le haut. */
.hero.is-entering .hero-line:not(:nth-child(3)){clip-path:inset(-.4em -.3em 0 -.3em)}
.hero-serif .hero-dot{display:inline-block}
.hero-round{overflow:visible}
.hero-round-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;animation:ring-turn 20s linear infinite}
.hero-round-ring text{font:600 12.5px/1 var(--body);letter-spacing:.16em;fill:var(--ink)}
@keyframes ring-turn{to{transform:rotate(360deg)}}
.hero-round-arrow{position:relative}
.hero-scroll{align-items:center}
.hero-scroll-cue{display:block;width:18px;height:36px;margin:-6px 0;color:var(--paper)}
.hero-scroll-cue .lottie-poster{width:100%;height:100%}

/* Bouton du hero : il reste orange au survol et se détache par une ombre papier. */
.hero-dark .hero-bottom .button-orange{transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.hero-dark .hero-bottom .button-orange:is(:hover,:focus-visible){background:var(--orange);color:var(--ink);box-shadow:9px 9px 0 var(--paper);transform:translate(-4px,-4px)}


/* Film : le point s’ouvre jusqu’au cadre; une barre suit la lecture. */
.film-shell{cursor:pointer}
.film-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:#11111126;z-index:2}
.film-progress>span{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:0 50%}

/* Vivre Saint-Bo : la maquette se dessine, le code s’écrit, le site est en ligne. */
.code-overlay pre{white-space:normal}
.code-line{display:block;white-space:pre}
.code-overlay code b{color:var(--orange);font-weight:inherit}
.wireframe-top span,.wireframe-copy,.wireframe-action,.wireframe-baseline{transform-origin:0 50%}
.wireframe-image svg{vector-effect:non-scaling-stroke}
.wireframe-image path{vector-effect:non-scaling-stroke;stroke-width:1}
.case-live{position:absolute;right:3.5%;top:4%;z-index:6;display:inline-flex;align-items:center;gap:9px;padding:8px 13px 7px;background:var(--ink);color:var(--paper);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.case-live i{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 #FF4F2099;animation:live 1.8s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 #FF4F20aa}80%,100%{box-shadow:0 0 0 9px #FF4F2000}}

/* Services : l’orange monte sous la ligne survolée, l’icône s’anime. */
.service{position:relative;border-bottom:1px solid var(--rule)}
.service summary{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:clamp(92px,8.6vw,136px);padding:18px 14px;list-style:none;cursor:pointer;overflow:hidden}
.service summary:focus-visible{outline-offset:-5px}
.service-fill{position:absolute;inset:0;z-index:-1;background:var(--orange);transform:scaleY(0);transform-origin:50% 100%;transition:transform .65s var(--ease-out)}
.service:hover .service-fill,.service summary:focus-visible .service-fill,.service[open] .service-fill{transform:scaleY(1)}
.service-name{font:700 clamp(32px,4.5vw,74px)/1.02 var(--display);letter-spacing:-.06em;transition:transform .65s var(--ease-out)}
.service:hover .service-name,.service summary:focus-visible .service-name{transform:translateX(18px)}
.service-icon{flex:0 0 auto;width:clamp(52px,4.6vw,72px);height:clamp(52px,4.6vw,72px);margin:0 clamp(0px,5vw,88px) 0 0;color:var(--ink)}
.service-icon .lottie-poster{stroke:currentColor;stroke-width:1.25;fill:none}
.service:is(:hover,[open]) .service-icon,.service summary:focus-visible .service-icon{--lt-accent:var(--paper)}
.service[open]{border-color:var(--orange)}
.service [data-service-panel]{background:var(--orange);padding:0 14px 30px 32px;overflow:hidden}
.service [data-service-panel] p{max-width:640px;font-size:clamp(16px,1.3vw,21px);line-height:1.45;letter-spacing:-.015em}

/* Méthode : un rail, un point orange, quatre étapes qui s’allument. */
.method-track{position:relative;margin-top:clamp(28px,3vw,48px);--illu:clamp(96px,8.6vw,136px);--method-axis:x}
.method-rail{position:absolute;left:0;right:0;top:calc(var(--illu) + 26px);height:1px;background:var(--rule)}
.method-rail-line{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%}
.method-rail-dot{position:absolute;top:50%;left:100%;width:15px;height:15px;border-radius:50%;background:var(--orange);transform:translate(-50%,-50%);box-shadow:0 0 0 6px var(--paper)}
.method .method-grid{margin-top:0;row-gap:48px}
.method-illustration{display:block;width:var(--illu);height:var(--illu);margin:0 0 54px -8px;color:var(--ink)}
.method-illustration .lottie-poster{stroke:currentColor;stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.method-track[data-armed] li :is(h3,p,.method-number){transition:transform .7s var(--ease-out),color .4s}
/* Les étapes suivantes restent lisibles avant que le point les atteigne. */
.method-track[data-armed] li:not(.is-active) :is(h3,p,.method-number){color:var(--muted)}
.method-track[data-armed] li:not(.is-active) h3{transform:translateY(14px)}
/* Le numéro reste à l’encre (contraste); un point orange marque l’étape atteinte. */
.method .method-number{display:flex;align-items:center;gap:8px;min-height:11px}
.method .method-number::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--orange);transform:scale(0);transition:transform .5s var(--ease-out)}
.method-track li.is-active .method-number::before,.method-track:not([data-armed]) .method-number::before{transform:none}


/* Le viseur : quatre coins qui se posent sur une image (la photo de l’histoire). */
.viewfinder{position:absolute;inset:clamp(14px,1.5vw,22px);pointer-events:none;z-index:2}
.viewfinder i{position:absolute;width:clamp(22px,2.3vw,36px);height:clamp(22px,2.3vw,36px);border:0 solid var(--ink)}
.viewfinder i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px}
.viewfinder i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0}
.viewfinder i:nth-child(3){right:0;bottom:0;border-width:0 2px 2px 0}
.viewfinder i:nth-child(4){left:0;bottom:0;border-width:0 0 2px 2px}

/* Lottie : les classes du JSON se recolorent selon le fond. */
.lottie-mark svg .lt-ink{stroke:currentColor}
.lottie-mark svg .lt-ink-fill{fill:currentColor}
.lottie-mark svg .lt-accent{stroke:var(--lt-accent,var(--orange))}
.lottie-mark svg .lt-accent-fill{fill:var(--lt-accent,var(--orange))}
.lottie-mark svg .lt-paper{stroke:var(--lt-paper,var(--paper))}
.lottie-mark svg .lt-bg-fill{fill:var(--lt-bg,var(--paper))}
.contact-preview-mark{display:block;width:62px;height:62px;flex:0 0 auto;color:var(--paper)}
.contact-preview-mark .lottie-poster{stroke:currentColor;stroke-width:3.4;fill:none}
.footer-dark .contact-preview-heading{align-items:center}

/* Titres découpés : le masque laisse respirer les jambages. Seule la marge
   basse est négative : deux marges négatives voisines fusionneraient et la
   hauteur du titre changerait au moment où la découpe est retirée. */
/* Le masque garde les accents, jambages et débords des italiques. Les marges
   compensent cette réserve : l’animation ne modifie pas la grille du titre. */
.split-line-mask{padding:.16em .09em .24em;margin:-.16em -.09em -.24em}
.split-char{display:inline-block}

/* Menu plein écran : il s’ouvre en cercle depuis son bouton. */
.menu-dialog{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:22px var(--gutter) 28px;background:var(--ink);color:var(--paper);flex-direction:column}
.menu-dialog[open]{display:flex}
.menu-dialog::backdrop{background:transparent}
.menu-dialog .dialog-header{border-color:#3b3a36}
.menu-dialog nav{flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(2px,1vh,12px);padding-block:28px}
.menu-dialog nav>a{display:block;font:700 clamp(46px,12.5vw,108px)/1.04 var(--display);letter-spacing:-.065em}
.menu-dialog nav>a:hover,.menu-dialog nav>a:focus-visible{color:var(--orange)}
.menu-bottom{display:flex;align-items:end;justify-content:space-between;gap:24px}
.menu-bottom p{font-size:13px;line-height:1.5;color:#c8c5bd;text-align:right}
.menu-dialog .button{margin:0;width:auto;min-width:0;max-width:340px;flex:1}
.menu-dialog .button-orange:hover,.menu-dialog .button-orange:focus-visible{background:var(--orange);color:var(--ink);box-shadow:8px 8px 0 var(--paper)}

@media(max-width:1100px){
  .hero-dark .hero-round{top:calc(var(--header-h) + 50px)}
  .hero-dark .hero-orbit{top:calc(var(--header-h) + 2%)}
}
@media(max-width:999px){
  .service-icon{margin-right:2vw}
}
@media(max-width:760px){
  .hero-dark .hero-round{top:calc(var(--header-h) + 10px)}
  .hero-dark .hero-orbit{top:calc(var(--header-h) + 5%)}
  .hero-round-ring{display:none}
  .hero-round .hero-round-arrow{width:42%}
  .service summary{min-height:84px;padding:16px 6px}
  .service-name{font-size:clamp(28px,8.6vw,36px);max-width:250px}
  .service-icon{width:46px;height:46px;margin-right:4px}
  .service [data-service-panel]{padding:0 6px 24px 6px}
  .service [data-service-panel] p{font-size:15px}
  .method-track{--method-axis:y;--illu:84px;padding-left:34px;margin-top:28px}
  .method-rail{left:7px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .method-rail-line{transform-origin:50% 0}
  .method-rail-dot{left:50%;top:100%;width:13px;height:13px}
  .method .method-grid{grid-template-columns:1fr;gap:46px}
  .method-illustration{margin:0 0 22px -6px}
  .menu-dialog nav>a{font-size:clamp(44px,13.5vw,64px)}
  .menu-bottom{flex-direction:column;align-items:stretch}
  .menu-bottom p{text-align:left}
  .menu-dialog .button{max-width:none}
  .case-live{font-size:9px;padding:6px 9px 5px;gap:7px}
}

/* Mouvement réduit : rien ne bouge seul, tout reste lisible et en place. */
@media(prefers-reduced-motion:reduce){
  .hero-grain,.hero-round-ring,.case-live i,.brand-dot{animation:none!important}
}
html[data-motion=reduce] :is(.hero-grain,.hero-round-ring,.case-live i,.brand-dot){animation:none!important}

/* Signature du footer : le point garde l’orange de la marque. */
.footer-signature-main{display:block;width:100%;height:auto;overflow:visible;color:var(--paper)}
.footer-signature-main .logo-dot{fill:var(--orange)}

/* Rideau de page : le point orange couvre l’écran entre deux pages. */
.page-curtain{position:fixed;inset:0;z-index:140;background:var(--orange);pointer-events:none;clip-path:circle(0% at 50% 50%)}
html[data-arriving] .page-curtain{clip-path:circle(150% at 50% 50%)}
@media(prefers-reduced-motion:reduce){html[data-arriving] .page-curtain{clip-path:circle(0% at 50% 50%)}}

/* Rangée légale du footer : la confidentialité se trouve sans chercher. */
.footer-legal{display:grid;grid-template-columns:auto auto 1fr auto auto;gap:14px 36px;align-items:center;padding:22px 0;border-top:1px solid #3b3a36;font-size:12px;line-height:1.5;color:#d6d3cb}
.footer-legal>*{min-width:0}
.footer-legal a{min-width:0;max-width:100%;overflow-wrap:anywhere;display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:44px;color:var(--paper);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;transition:color .2s}
.footer-legal a:is(:hover,:focus-visible){color:var(--orange)}
.footer-legal a:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.footer-legal .footer-place{text-align:right;color:var(--paper)}
.footer-legal time{font-variant-numeric:tabular-nums}
@media(max-width:1100px){.footer-legal{grid-template-columns:1fr 1fr}.footer-legal .footer-place{text-align:left}}
@media(max-width:760px){.footer-legal{grid-template-columns:1fr;gap:6px;padding:18px 0}}