/* AlloPrint — styles partagés (tokens, base, atomes, navigation, pied de page) */
/* fonts */
/* latin-ext */
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/gabarito/v9/QGYtz_0dZAGKJJ4t3HtmW4XUng.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/gabarito/v9/QGYtz_0dZAGKJJ4t3HtoW4U.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;
}
/* latin-ext */
@font-face {
  font-family: 'Rethink Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rethinksans/v7/AMOWz4SDuXOMCPfdoglY9JQEWli389k.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Rethink Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rethinksans/v7/AMOWz4SDuXOMCPfdoglY9JQEVFi3.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;
}

/* layers */
@layer tokens, base, atoms, layout, sections, scenes;

/* tokens */
@layer tokens {
:root {
  --color-1: #00677a;
  --color-2: #b9e533;
  --color-3: #f3f3fa;
  --color-4: #06222a;
  --font-1: "Gabarito", "Gabarito Fallback", Arial, sans-serif;
  --font-2: "Rethink Sans", "Rethink Sans Fallback", Arial, sans-serif;
  --radius-1: 999px;
  --space-1: clamp(16px, 3.2vw, 40px);
  --space-2: clamp(56px, 6.5vw, 96px);
}
}

/* base */
@layer base {
  @font-face { font-family: "Gabarito Fallback"; src: local("Arial Black"), local("Arial-Black"), local("Arial Bold"); font-weight: 800 1000; size-adjust: 80.7%; ascent-override: 116.5%; descent-override: 32.2%; line-gap-override: 0%; }
  @font-face { font-family: "Rethink Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); font-weight: 550 799; size-adjust: 93.6%; ascent-override: 105.8%; descent-override: 33.1%; line-gap-override: 0%; }
  @font-face { font-family: "Rethink Sans Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); font-weight: 100 549; size-adjust: 102.3%; ascent-override: 96.8%; descent-override: 30.3%; line-gap-override: 0%; }
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 0; background: var(--color-1); color: var(--color-3); }
  img { display: block; max-width: 100%; height: auto; }
  h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  a { color: inherit; }
  button, input, select, textarea { font: inherit; color: inherit; }
  :focus-visible { outline: 3px solid var(--color-2); outline-offset: 3px; }
  [data-8b-motion~="register"] {
    text-shadow: var(--register-x, 0em) var(--register-y, 0em) 0 color-mix(in srgb, var(--register-ink, var(--color-2)) calc(var(--register-a, 0) * 100%), transparent);
  }
  [data-8b-motion~="screen"].is-screening {
    mask: radial-gradient(circle closest-side, currentColor var(--screen-dot, 0%), transparent calc(var(--screen-dot, 0%) + 10%)) 0 0 / 14px 14px;
  }
  html.lenis, html.lenis body { height: auto; }
  .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
  .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
  .lenis.lenis-smooth iframe { pointer-events: none; }
  .lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }
}

/* system */
@layer atoms {
  @property --link-dot { syntax: "<percentage>"; inherits: false; initial-value: 45%; }

  .m-text { font-family: var(--font-2); font-size: clamp(17px, 0.4vw + 15.5px, 19px); font-weight: 400; line-height: 1.55; letter-spacing: 0; text-transform: none; font-style: normal; }

  .m-text-2 { font-family: var(--font-1); font-size: clamp(38px, 5.2vw, 76px); font-weight: 700; line-height: 1; letter-spacing: -0.025em; text-transform: none; font-style: normal; }

  .m-text-3 { font-family: var(--font-1); font-size: 120px; font-weight: 800; line-height: 0.86; letter-spacing: -0.035em; text-transform: none; font-style: normal; }

  .m-text-4 { font-family: var(--font-2); font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; font-style: normal; }

  .m-text-5 { font-family: var(--font-2); font-size: clamp(20px, 0.8vw + 14px, 25px); font-weight: 500; line-height: 1.35; letter-spacing: -0.005em; text-transform: none; font-style: normal; }

  .m-text-6 { font-family: var(--font-1); font-size: clamp(22px, 0.9vw + 15px, 28px); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; text-transform: none; font-style: normal; }

  .m-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border: 0; border-radius: var(--radius-1); background: var(--color-2); color: var(--color-4); font-family: var(--font-2); font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; }
  .m-btn::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 112%; aspect-ratio: 1; border-radius: var(--radius-1); background: var(--color-3); transform: translate(-50%, 30%) scale(0.1); transition: transform 0.55s cubic-bezier(0.3, 0.7, 0.2, 1); }
  .m-btn__label { position: relative; transition: color 0.3s; }
  @media (hover: hover) {
    .m-btn:hover::before { transform: translate(-50%, -50%) scale(1); }
    .m-btn:hover .m-btn__label { color: var(--color-1); }
  }

  .m-btn-2 { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border: 0; border-radius: var(--radius-1); background: var(--color-1); color: var(--color-3); font-family: var(--font-2); font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; }
  .m-btn-2::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 112%; aspect-ratio: 1; border-radius: var(--radius-1); background: var(--color-4); transform: translate(-50%, 30%) scale(0.1); transition: transform 0.55s cubic-bezier(0.3, 0.7, 0.2, 1); }
  .m-btn-2__label { position: relative; }
  @media (hover: hover) {
    .m-btn-2:hover::before { transform: translate(-50%, -50%) scale(1); }
  }

  .m-link { --link-dot: 45%; display: inline-block; padding-bottom: 7px; color: inherit; font-weight: 600; text-decoration: none; background: radial-gradient(circle closest-side, currentColor var(--link-dot), transparent calc(var(--link-dot) + 14%)) 0 100% / 6px 4px repeat-x; transition: --link-dot 0.4s cubic-bezier(0.3, 0.7, 0.2, 1); }
  @media (hover: hover) {
    .m-link:hover { --link-dot: 170%; }
  }

  .m-icon-btn { position: relative; display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border: 2px solid currentColor; border-radius: var(--radius-1); background: transparent; color: inherit; cursor: pointer; }
  .m-icon-btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; background: currentColor; translate: -50% -50%; }
  .m-icon-btn__dot { position: absolute; left: 50%; top: 11px; width: 8px; height: 8px; margin-left: -4px; border-radius: var(--radius-1); background: currentColor; transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.2, 1); }
  .m-icon-btn__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  @media (hover: hover) {
    .m-icon-btn:hover .m-icon-btn__dot, :hover > .m-icon-btn .m-icon-btn__dot { transform: translateY(16px); }
  }
  [open] > summary .m-icon-btn__dot { transform: translateY(16px); }

  .m-field { display: block; width: 100%; min-height: 52px; padding: 12px 16px; border: 2px solid currentColor; border-radius: 0; background: transparent; color: inherit; font-family: var(--font-2); font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: 0; }
  textarea.m-field { min-height: 128px; resize: vertical; }

  .m-surface { padding: clamp(26px, 3vw, 40px); background: var(--color-3); color: var(--color-1); mask: radial-gradient(circle 6px at 50% 0, transparent 95%, currentColor 100%) 0 0 / 20px 100% repeat-x; }

  .m-disc { display: block; aspect-ratio: 1; border-radius: var(--radius-1); background: var(--color-2); }

  .m-trail { --trail-cols: 12; display: block; color: var(--color-2); background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 480'%3E%3Ccircle cx='6' cy='477' r='3.2'/%3E%3Ccircle cx='6' cy='471' r='3.15'/%3E%3Ccircle cx='6' cy='465' r='3.09'/%3E%3Ccircle cx='6' cy='459' r='3.04'/%3E%3Ccircle cx='6' cy='453' r='2.99'/%3E%3Ccircle cx='6' cy='447' r='2.94'/%3E%3Ccircle cx='6' cy='441' r='2.89'/%3E%3Ccircle cx='6' cy='435' r='2.83'/%3E%3Ccircle cx='6' cy='429' r='2.78'/%3E%3Ccircle cx='6' cy='423' r='2.73'/%3E%3Ccircle cx='6' cy='417' r='2.68'/%3E%3Ccircle cx='6' cy='411' r='2.63'/%3E%3Ccircle cx='6' cy='405' r='2.58'/%3E%3Ccircle cx='6' cy='399' r='2.53'/%3E%3Ccircle cx='6' cy='393' r='2.49'/%3E%3Ccircle cx='6' cy='387' r='2.44'/%3E%3Ccircle cx='6' cy='381' r='2.39'/%3E%3Ccircle cx='6' cy='375' r='2.34'/%3E%3Ccircle cx='6' cy='369' r='2.29'/%3E%3Ccircle cx='6' cy='363' r='2.25'/%3E%3Ccircle cx='6' cy='357' r='2.2'/%3E%3Ccircle cx='6' cy='351' r='2.16'/%3E%3Ccircle cx='6' cy='345' r='2.11'/%3E%3Ccircle cx='6' cy='339' r='2.06'/%3E%3Ccircle cx='6' cy='333' r='2.02'/%3E%3Ccircle cx='6' cy='327' r='1.98'/%3E%3Ccircle cx='6' cy='321' r='1.93'/%3E%3Ccircle cx='6' cy='315' r='1.89'/%3E%3Ccircle cx='6' cy='309' r='1.84'/%3E%3Ccircle cx='6' cy='303' r='1.8'/%3E%3Ccircle cx='6' cy='297' r='1.76'/%3E%3Ccircle cx='6' cy='291' r='1.72'/%3E%3Ccircle cx='6' cy='285' r='1.68'/%3E%3Ccircle cx='6' cy='279' r='1.64'/%3E%3Ccircle cx='6' cy='273' r='1.59'/%3E%3Ccircle cx='6' cy='267' r='1.55'/%3E%3Ccircle cx='6' cy='261' r='1.51'/%3E%3Ccircle cx='6' cy='255' r='1.48'/%3E%3Ccircle cx='6' cy='249' r='1.44'/%3E%3Ccircle cx='6' cy='243' r='1.4'/%3E%3Ccircle cx='6' cy='237' r='1.36'/%3E%3Ccircle cx='6' cy='231' r='1.32'/%3E%3Ccircle cx='6' cy='225' r='1.29'/%3E%3Ccircle cx='6' cy='219' r='1.25'/%3E%3Ccircle cx='6' cy='213' r='1.21'/%3E%3Ccircle cx='6' cy='207' r='1.18'/%3E%3Ccircle cx='6' cy='201' r='1.14'/%3E%3Ccircle cx='6' cy='195' r='1.11'/%3E%3Ccircle cx='6' cy='189' r='1.08'/%3E%3Ccircle cx='6' cy='183' r='1.04'/%3E%3Ccircle cx='6' cy='177' r='1.01'/%3E%3Ccircle cx='6' cy='171' r='0.98'/%3E%3Ccircle cx='6' cy='165' r='0.95'/%3E%3Ccircle cx='6' cy='159' r='0.92'/%3E%3Ccircle cx='6' cy='153' r='0.89'/%3E%3Ccircle cx='6' cy='147' r='0.86'/%3E%3Ccircle cx='6' cy='141' r='0.83'/%3E%3Ccircle cx='6' cy='135' r='0.8'/%3E%3Ccircle cx='6' cy='129' r='0.77'/%3E%3Ccircle cx='6' cy='123' r='0.74'/%3E%3Ccircle cx='6' cy='117' r='0.72'/%3E%3Ccircle cx='6' cy='111' r='0.69'/%3E%3Ccircle cx='6' cy='105' r='0.67'/%3E%3Ccircle cx='6' cy='99' r='0.64'/%3E%3Ccircle cx='6' cy='93' r='0.62'/%3E%3Ccircle cx='6' cy='87' r='0.59'/%3E%3Ccircle cx='6' cy='81' r='0.57'/%3E%3Ccircle cx='6' cy='75' r='0.55'/%3E%3Ccircle cx='6' cy='69' r='0.53'/%3E%3Ccircle cx='6' cy='63' r='0.51'/%3E%3Ccircle cx='6' cy='57' r='0.49'/%3E%3Ccircle cx='6' cy='51' r='0.47'/%3E%3Ccircle cx='6' cy='45' r='0.46'/%3E%3Ccircle cx='6' cy='39' r='0.44'/%3E%3Ccircle cx='6' cy='33' r='0.43'/%3E%3Ccircle cx='6' cy='27' r='0.42'/%3E%3Ccircle cx='6' cy='21' r='0.4'/%3E%3Ccircle cx='6' cy='15' r='0.4'/%3E%3Ccircle cx='6' cy='9' r='0.39'/%3E%3Ccircle cx='6' cy='3' r='0.38'/%3E%3C/svg%3E") 0 100% / calc(100% / var(--trail-cols)) auto repeat-x; }

  .m-photo { position: relative; isolation: isolate; overflow: hidden; background: #fff; }
  .m-photo img { width: 100%; height: 100%; object-fit: cover; }
}

/* layout */
@layer layout {
  .wrap { width: min(100% - 2 * var(--space-1), 1200px); margin-inline: auto; }
  .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lane { position: relative; container-type: inline-size; min-height: 100%; }
  .lane__print { position: absolute; inset: 0 0 50cqw; }
  .lane--up .lane__print { inset: 50cqw 0 0; }
  .lane__print .m-trail { position: absolute; inset: 0; }
  .lane--up .lane__print .m-trail { scale: 1 -1; }
  .lane .drum { position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 1; }
  .lane--up .drum { top: 0; bottom: auto; }
  .drum__intro, .drum__bob, .drum__disc { width: 100%; height: 100%; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  @media (max-width: 899px) {
    .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; }
  }
}

/* section:nav */
@layer sections {
  #nav { position: fixed; inset: 0 0 auto; z-index: 20; }
  #nav .nav__skip { position: absolute; left: var(--space-1); top: 8px; z-index: 2; padding: 10px 16px; border-radius: var(--radius-1); background: var(--color-3); color: var(--color-1); font-weight: 700; text-decoration: none; translate: 0 -160%; }
  #nav .nav__skip:focus-visible { translate: none; }
  #nav .nav__shell { background: transparent; transition: translate 0.4s cubic-bezier(0.3, 0.7, 0.2, 1), background-color 0.3s; }
  #nav[data-scrolled] .nav__shell { background: var(--color-1); }
  #nav[data-hidden] .nav__shell { translate: 0 -100%; }
  #nav:focus-within .nav__shell { translate: none; }
  #nav .nav__bar { display: flex; align-items: center; gap: 28px; height: 96px; }
  #nav .nav__brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--color-3); font-family: var(--font-1); font-size: 27px; font-weight: 900; letter-spacing: -0.03em; text-decoration: none; }
  #nav .nav__logo { width: auto; height: 84px; }
  #nav .nav__links { display: flex; gap: 26px; }
  #nav .nav__toggle { display: none; }
  #nav .nav__menu { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; padding: 18px var(--space-1) 40px; background: var(--color-2); color: var(--color-4); overflow-y: auto; }
  #nav .nav__menu[hidden] { display: none; }
  #nav .nav__menu-top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-bottom: 40px; }
  #nav .nav__menu-links { display: grid; gap: 10px; }
  #nav .nav__menu-links a { color: var(--color-1); text-decoration: none; }
  #nav .nav__menu :focus-visible { outline-color: var(--color-4); }
  @media (max-width: 899px) {
    #nav .nav__bar { height: 76px; gap: 12px; }
    #nav .nav__links, #nav .nav__cta { display: none; }
    #nav .nav__toggle { display: inline-grid; color: var(--color-3); }
    #nav .nav__brand { font-size: 24px; }
    #nav .nav__logo { height: 64px; }
  }
}

/* section:footer */
@layer sections {
  #footer { overflow: clip; padding-block: 56px 28px; background: var(--color-3); color: var(--color-1); }
  #footer .footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 28px; border-top: 2px solid var(--color-1); }
  #footer .footer__nav ul, #footer .footer__social { display: grid; gap: 10px; justify-items: start; align-content: start; }
  #footer .footer__base { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 40px; color: var(--color-4); }
  @media (max-width: 899px) {
    #footer .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #footer .footer__address { grid-column: 1 / -1; }
  }
}
/* pages: services, fiche service, devis, contact */
@layer sections {
  #nav .nav__links [aria-current="page"] { --link-dot: 170%; }

  .hero { position: relative; overflow: clip; padding-block: 144px var(--space-2); background: var(--color-1); color: var(--color-3); }
  .hero__grid { row-gap: 32px; align-items: end; }
  .hero__crumbs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 12px; color: color-mix(in srgb, var(--color-3) 75%, transparent); }
  .hero__crumbs a { color: inherit; text-decoration: none; }
  .hero__crumbs a:hover { color: var(--color-2); }
  .hero__title { grid-column: 1 / 9; font-size: clamp(48px, 7.4vw, 112px); }
  .hero__title span { color: var(--color-2); }
  .hero__lead { grid-column: 9 / 13; max-width: 34ch; }
  @media (max-width: 899px) {
    .hero { padding-block: 108px 48px; }
    .hero__title, .hero__lead { grid-column: 1 / -1; }
  }

  .eyebrow { color: var(--color-2); }
  .band { padding-block: var(--space-2); }
  .band--paper { background: var(--color-3); color: var(--color-1); }
  .band--paper .eyebrow { color: var(--color-1); }
  .band--ink { background: var(--color-1); color: var(--color-3); }
  .band--green { background: var(--color-2); color: var(--color-4); }
  .band--green .eyebrow { color: var(--color-1); }
  .band--green [data-8b-motion~="register"] { --register-ink: var(--color-1); }
  .band__head { align-items: end; row-gap: 20px; margin-bottom: 56px; }
  .band__head > div { grid-column: 1 / 8; display: grid; gap: 14px; }
  .band__head > p, .band__head > a { grid-column: 9 / 13; justify-self: start; }
  @media (max-width: 899px) {
    .band__head > div, .band__head > p, .band__head > a { grid-column: 1 / -1; }
    .band__head { margin-bottom: 40px; }
  }

  .svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; }
  .svc-card { display: grid; gap: 12px; align-content: start; }
  .svc-card__photo { position: relative; display: block; aspect-ratio: 4 / 3; margin-bottom: 8px; }
  .svc-card__tag { position: absolute; left: 14px; bottom: 14px; z-index: 1; max-width: calc(100% - 28px); padding: 9px 14px; border-radius: var(--radius-1); background: var(--color-3); color: var(--color-1); font-size: 14px; font-weight: 700; line-height: 1.2; }
  .svc-card__no { color: color-mix(in srgb, var(--color-1) 70%, transparent); }
  .svc-card .svc-card__no { display: flex; align-items: center; gap: 12px; color: var(--color-1); }
  .svc-card h3 a { color: inherit; text-decoration: none; }
  .svc-card p { color: var(--color-4); }
  .svc-card .m-link { justify-self: start; }
  @media (max-width: 1099px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 679px) { .svc-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

  .detail { row-gap: 48px; align-items: start; }
  .detail__photo { grid-column: 1 / 7; aspect-ratio: 4 / 3; }
  .detail__copy { grid-column: 8 / 13; display: grid; gap: 22px; }
  .detail__copy p { color: var(--color-4); }
  .m-picto { display: inline-block; flex: none; width: 32px; height: 32px; object-fit: contain; vertical-align: middle; }
  .m-picto--large { width: 42px; height: 42px; }
  .picto-badge { display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; border: 1px solid color-mix(in srgb, var(--color-1) 18%, transparent); border-radius: 12px; background: #eef2df; }
  .picto-badge--large { width: 68px; height: 68px; border-radius: 18px; }
  #workshops .session h3, #process .station h3 { display: flex; align-items: center; gap: 10px; }
  #process .station h3 .m-picto { padding: 4px; width: 32px; height: 32px; border-radius: 7px; background: var(--color-3); }
  #studio .studio__caption { grid-column: 1 / -1; font-size: 13px; opacity: 0.8; }
  .detail__box { display: grid; gap: 14px; margin-top: 12px; }
  .detail__box .m-btn-2 { justify-self: start; }
  .detail__box { background: var(--color-2); color: var(--color-4); }
  .detail__box p { color: var(--color-4); }
  @media (max-width: 899px) { .detail__photo, .detail__copy { grid-column: 1 / -1; } }

  .options { row-gap: 40px; }
  .option { grid-column: span 6; display: grid; gap: 18px; align-content: start; padding-top: 22px; border-top: 2px solid var(--color-4); }
  .option li { position: relative; padding: 12px 0 12px 26px; border-bottom: 1px solid color-mix(in srgb, var(--color-4) 30%, transparent); font-weight: 500; }
  .option li::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: var(--radius-1); background: var(--color-1); }
  .option__note { color: color-mix(in srgb, var(--color-4) 80%, transparent); }
  @media (max-width: 899px) { .option { grid-column: 1 / -1; } }

  .qa { row-gap: 40px; align-items: start; }
  .qa > div:first-child { grid-column: 1 / 6; display: grid; gap: 14px; }
  .qa__list { grid-column: 7 / 13; border-top: 2px solid currentColor; }
  .qa__item { border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
  .qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; }
  .qa summary::-webkit-details-marker { display: none; }
  .qa__answer { max-width: 56ch; padding: 0 64px 24px 0; }
  @media (max-width: 899px) {
    .qa > div:first-child, .qa__list { grid-column: 1 / -1; }
    .qa__answer { padding-right: 0; }
  }

  .related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .related__card { display: grid; gap: 14px; color: inherit; text-decoration: none; }
  .related__card .m-photo { aspect-ratio: 4 / 3; }
  .related__card:hover .m-text-6 { color: var(--color-2); }
  @media (max-width: 899px) { .related { grid-template-columns: minmax(0, 1fr); } }

  .cta { row-gap: 28px; align-items: end; }
  .cta__title { grid-column: 1 / 9; }
  .cta__actions { grid-column: 9 / 13; display: grid; gap: 18px; justify-items: start; }
  @media (max-width: 899px) { .cta__title, .cta__actions { grid-column: 1 / -1; } }

  .request { row-gap: 56px; align-items: start; }
  .request__aside { grid-column: 1 / 6; display: grid; gap: 28px; align-content: start; }
  .request__steps { display: grid; border-top: 1px solid color-mix(in srgb, var(--color-3) 30%, transparent); counter-reset: step; }
  .request__steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 18px; padding: 18px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-3) 30%, transparent); counter-increment: step; }
  .request__steps li::before { content: counter(step); grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-1); background: var(--color-2); color: var(--color-4); font-family: var(--font-1); font-weight: 800; }
  .request__steps strong { font-family: var(--font-1); font-size: 20px; }
  .request__details { display: grid; gap: 22px; }
  .request__details > div { display: grid; gap: 6px; }
  .request__details dt { display: flex; align-items: center; gap: 10px; }
  .request__details .m-picto { padding: 4px; border-radius: 7px; background: var(--color-3); }
  .request__details dd { padding-left: 42px; }
  .request__card { display: grid; gap: 12px; }
  .request__card .m-link { justify-self: start; }
  .request__form { grid-column: 7 / 13; display: grid; gap: 22px; }
  .request__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
  .request__field { display: grid; gap: 10px; align-content: start; }
  .request__field--full { grid-column: 1 / -1; }
  .request__field select option { background: var(--color-3); color: var(--color-1); }
  .request__field .m-field::placeholder { color: color-mix(in srgb, var(--color-3) 55%, transparent); }
  .request__consent { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
  .request__consent input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--color-2); }
  .request__form .m-btn { justify-self: start; }
  .request__note { color: color-mix(in srgb, var(--color-3) 75%, transparent); font-size: 14px; }
  .request__status { padding: 18px 20px; border-left: 4px solid var(--color-2); background: color-mix(in srgb, var(--color-3) 10%, transparent); }
  @media (max-width: 899px) {
    .request__aside, .request__form { grid-column: 1 / -1; }
    .request__fields { grid-template-columns: minmax(0, 1fr); }
  }
}

/* icônes 3D (générées avec ElevenLabs, fond transparent) */
@layer sections {
  .icon3d { display: inline-block; flex: none; width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 6px 10px rgb(6 34 42 / .18)); }
  .icon3d--card { width: 64px; height: 64px; margin: -6px 0; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
  .svc-card:hover .icon3d--card, .svc-card:focus-within .icon3d--card { transform: translateY(-4px) rotate(-4deg) scale(1.08); }
  .icon3d--list { width: 46px; height: 46px; margin: -6px 0; }
  .icon3d--hero { width: 132px; height: 132px; margin: -12px 0 -6px -10px; animation: icon3d-float 5s ease-in-out infinite; }
  .band--ink .icon3d, .band--green .icon3d { filter: drop-shadow(0 8px 14px rgb(0 0 0 / .28)); }
  .icon3d-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; margin-top: 8px; }
  @media (min-width: 1100px) { .icon3d-row { grid-template-columns: repeat(9, minmax(0, 1fr)); } .icon3d-row .icon3d { width: 96px; height: 96px; } }
  .icon3d-row a { display: grid; justify-items: center; gap: 10px; text-align: center; text-decoration: none; font-weight: 700; line-height: 1.25; }
  .icon3d-row .icon3d { width: 104px; height: 104px; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
  .icon3d-row a:hover .icon3d, .icon3d-row a:focus-visible .icon3d { transform: translateY(-6px) scale(1.06); }
  .contact-list { display: grid; gap: 14px; }
  .contact-list li { display: flex; align-items: center; gap: 12px; }
  .contact-list .m-picto { padding: 4px; border-radius: 7px; background: var(--color-3); }
  @keyframes icon3d-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-2deg); } }
  @media (prefers-reduced-motion: reduce) { .icon3d--hero { animation: none; } .icon3d--card, .icon3d-row .icon3d { transition: none; } }
}

/* prix (définis dans l'admin) */
@layer sections {
  .prix-tag { display: grid; gap: 2px; padding: 12px 16px; border-radius: 12px; background: var(--color-1); color: var(--color-3) !important; font-size: 15px; line-height: 1.35; }
  .prix-tag[hidden] { display: none; }
  .prix-tag__value { font-family: var(--font-1); font-size: 22px; font-weight: 800; color: var(--color-2); }
  .prix-tag__note { font-size: 13px; opacity: .85; }
  .prix-tag--card { justify-self: start; padding: 8px 14px; border-radius: 10px; font-size: 14px; }
  .prix-tag--card .prix-tag__value { font-size: 17px; }
}

/* articles */
@layer sections {
  .post-card h2 a { color: inherit; text-decoration: none; }
  .post-card h2 { color: var(--color-1); }
  .post-card__ph { display: block; width: 100%; height: 100%; background: radial-gradient(circle at 30% 40%, var(--color-2) 0 18%, transparent 19%), radial-gradient(circle at 72% 62%, color-mix(in srgb, var(--color-3) 40%, transparent) 0 24%, transparent 25%), var(--color-1); }
  .hero__title--article { font-size: clamp(36px, 5.4vw, 72px); grid-column: 1 / 10; }
  .prose-wrap { max-width: 780px; }
  .post-cover { aspect-ratio: 16 / 9; margin-bottom: 40px; border-radius: 4px; }
  .prose-lead { color: var(--color-1); margin-bottom: 28px; }
  .prose { color: var(--color-4); font-size: 18px; line-height: 1.7; }
  .prose > * + * { margin-top: 1em; }
  .prose h2 { margin-top: 1.8em; font-family: var(--font-1); font-size: clamp(26px, 3vw, 36px); line-height: 1.15; color: var(--color-1); }
  .prose h3 { margin-top: 1.5em; font-family: var(--font-1); font-size: 22px; color: var(--color-1); }
  .prose ul { padding-left: 1.2em; list-style: disc; }
  .prose li + li { margin-top: .35em; }
  .prose li::marker { color: var(--color-1); }
  .prose a { color: var(--color-1); }
  .post-svc { margin-top: 48px; }
  @media (max-width: 899px) { .hero__title--article { grid-column: 1 / -1; } }
}

/* titres nets : sans ombre décalée */
[data-8b-motion~="register"], .press__char { text-shadow: none !important; }

/* menu mobile */
@layer sections {
  #nav .nav__toggle::before, #nav .nav__close::before { display: none; }
  #nav .burger { position: relative; display: block; width: 20px; height: 14px; }
  #nav .burger i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: width .3s; }
  #nav .burger i:nth-child(1) { top: 0; }
  #nav .burger i:nth-child(2) { top: 6px; width: 70%; }
  #nav .burger i:nth-child(3) { top: 12px; }
  #nav .nav__toggle:hover .burger i { width: 100%; }
  #nav .xmark { position: relative; display: block; width: 20px; height: 20px; }
  #nav .xmark::before, #nav .xmark::after { content: ""; position: absolute; left: 0; top: 9px; width: 20px; height: 2px; border-radius: 2px; background: currentColor; rotate: 45deg; }
  #nav .xmark::after { rotate: -45deg; }

  #nav .nav__menu { background: var(--color-1); color: var(--color-3); padding: 12px var(--space-1) 28px; gap: 0; }
  #nav .nav__menu-top { margin-bottom: 18px; }
  #nav .nav__menu-top .nav__logo { height: 64px; }
  #nav .nav__close { color: var(--color-3); }
  #nav .nav__menu-links { gap: 0; border-top: 1px solid color-mix(in srgb, var(--color-3) 22%, transparent); }
  #nav .nav__menu-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 2px; border-bottom: 1px solid color-mix(in srgb, var(--color-3) 22%, transparent); color: var(--color-3); font-family: var(--font-1); font-size: clamp(26px, 7.4vw, 34px); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; text-decoration: none; }
  #nav .nav__menu-links a[aria-current="page"] { color: var(--color-2); }
  #nav .nav__arrow { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid currentColor; font-family: var(--font-2); font-size: 18px; transition: background-color .2s, color .2s; }
  #nav .nav__menu-links a:hover .nav__arrow, #nav .nav__menu-links a:focus-visible .nav__arrow { background: var(--color-2); border-color: var(--color-2); color: var(--color-4); }
  #nav .nav__menu-extra { display: grid; gap: 14px; margin-top: auto; padding-top: 26px; }
  #nav .nav__menu-cta { width: 100%; }
  #nav .nav__quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  #nav .nav__quick a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: var(--radius-1); background: color-mix(in srgb, var(--color-3) 12%, transparent); color: var(--color-3); font-weight: 700; text-decoration: none; }
  #nav .nav__quick img { width: 26px; height: 26px; border-radius: 6px; background: var(--color-3); padding: 2px; }
  #nav .nav__menu-addr { font-size: 15px; line-height: 1.5; color: color-mix(in srgb, var(--color-3) 80%, transparent); text-align: center; }
  #nav .nav__menu-addr a { color: var(--color-2); font-weight: 600; }
  #nav .nav__menu :focus-visible { outline-color: var(--color-2); }
  @media (prefers-reduced-motion: no-preference) {
    #nav .nav__menu:not([hidden]) { animation: menu-in .32s cubic-bezier(.2,.7,.2,1); }
    #nav .nav__menu:not([hidden]) .nav__menu-links a { animation: menu-link .45s cubic-bezier(.2,.7,.2,1) backwards; }
    #nav .nav__menu-links a:nth-child(2) { animation-delay: .04s; }
    #nav .nav__menu-links a:nth-child(3) { animation-delay: .08s; }
    #nav .nav__menu-links a:nth-child(4) { animation-delay: .12s; }
    #nav .nav__menu-links a:nth-child(5) { animation-delay: .16s; }
    #nav .nav__menu-links a:nth-child(6) { animation-delay: .2s; }
  }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-12px); } }
  @keyframes menu-link { from { opacity: 0; transform: translateX(-16px); } }
}

/* formulaires : piège anti-spam et statut d'envoi */
.request__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.request__status[data-kind="ok"] { border-left-color: var(--color-2); }
.request__status[data-kind="error"] { border-left-color: #ff8a7a; }
.request__form button[disabled] { opacity: .65; cursor: progress; }