/*
  Cognizance, Design System (extrait à l'identique de cognizance-lp.html, page validée)
  ────────────────────────────────────────────────────────────────────────
  Ce fichier regroupe TOUT le CSS de la landing page validée, réparti en deux
  couches, dans l'ordre de cascade d'origine (important : ne pas inverser) :

  1. COUCHE TAILWIND : CSS généré par Tailwind (utilitaires + tokens @theme).
     Définit les couleurs de référence en oklch() : --teal, --teal-bright,
     --teal-deep, --navy, --navy-deep, --ivory, --cream, --border, etc.

  2. COUCHE CUSTOM : styles écrits à la main par-dessus Tailwind : cursor
     personnalisé, grain de fond, scroll-reveal, marquee, hero, mission,
     nav sticky, menu mobile, section clients, cta-primary, etc.
     Cette couche redéfinit --teal en hexadécimal (#28AAA7) : comme les deux
     :root ont la même spécificité, c'est CETTE valeur qui l'emporte au final
     (le hex, pas l'oklch). Comportement d'origine conservé tel quel.

  Aucune valeur n'a été modifiée par rapport à la page validée.
  Seul retrait : le @font-face "CameraPlainVariable" (pointait vers un CDN
  externe cdn.gpteng.co, artefact de la plateforme Lovable, jamais utilisé
  dans la page) et la règle #lovable-badge (idem, sélecteur mort). Aucun des
  deux n'affecte le rendu visuel.
*/

/* ============================== */
/* 1. COUCHE TAILWIND (générée)   */
/* ============================== */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:"";--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@layer theme{:root,:host{--font-sans:"Jost", system-ui, sans-serif;--font-serif:"Cormorant Garamond", Georgia, serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-black:#000;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--text-8xl:6rem;--text-8xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-widest:.1em;--leading-relaxed:1.625;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--blur-md:12px;--blur-3xl:64px;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:"Jost", system-ui, sans-serif;--default-mono-font-family:var(--font-mono);--color-background:var(--background);--color-foreground:var(--foreground);--color-border:var(--border)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:var(--color-border)}html{scroll-behavior:smooth}body{background-color:var(--color-background);color:var(--color-foreground);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;font-weight:300}h1,h2,h3,h4,h5,h6{font-family:var(--font-serif);letter-spacing:-.01em;font-weight:400}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.inset-x-0{inset-inline:calc(var(--spacing) * 0)}.inset-y-0{inset-block:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.-top-5{top:calc(var(--spacing) * -5)}.-top-12{top:calc(var(--spacing) * -12)}.-top-32{top:calc(var(--spacing) * -32)}.top-0{top:calc(var(--spacing) * 0)}.top-1\.5{top:calc(var(--spacing) * 1.5)}.top-1\/2{top:50%}.top-1\/4{top:25%}.top-3\.5{top:calc(var(--spacing) * 3.5)}.top-4{top:calc(var(--spacing) * 4)}.top-\[1px\]{top:1px}.top-\[50\%\]{top:50%}.top-\[60\%\]{top:60%}.top-full{top:100%}.-right-5{right:calc(var(--spacing) * -5)}.-right-12{right:calc(var(--spacing) * -12)}.-right-32{right:calc(var(--spacing) * -32)}.right-0{right:calc(var(--spacing) * 0)}.right-1{right:calc(var(--spacing) * 1)}.right-2{right:calc(var(--spacing) * 2)}.right-3{right:calc(var(--spacing) * 3)}.right-4{right:calc(var(--spacing) * 4)}.right-6{right:calc(var(--spacing) * 6)}.-bottom-5{bottom:calc(var(--spacing) * -5)}.-bottom-12{bottom:calc(var(--spacing) * -12)}.bottom-0{bottom:calc(var(--spacing) * 0)}.bottom-8{bottom:calc(var(--spacing) * 8)}.-left-5{left:calc(var(--spacing) * -5)}.-left-12{left:calc(var(--spacing) * -12)}.-left-40{left:calc(var(--spacing) * -40)}.left-0{left:calc(var(--spacing) * 0)}.left-1\/2{left:50%}.left-2{left:calc(var(--spacing) * 2)}.left-\[50\%\]{left:50%}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[1\]{z-index:1}.-mx-1{margin-inline:calc(var(--spacing) * -1)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-3\.5{margin-inline:calc(var(--spacing) * 3.5)}.mx-auto{margin-inline:auto}.my-0\.5{margin-block:calc(var(--spacing) * .5)}.my-1{margin-block:calc(var(--spacing) * 1)}.-mt-4{margin-top:calc(var(--spacing) * -4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-24{margin-top:calc(var(--spacing) * 24)}.mt-auto{margin-top:auto}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.mb-12{margin-bottom:calc(var(--spacing) * 12)}.mb-20{margin-bottom:calc(var(--spacing) * 20)}.mb-24{margin-bottom:calc(var(--spacing) * 24)}.-ml-4{margin-left:calc(var(--spacing) * -4)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-16{margin-left:calc(var(--spacing) * 16)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.aspect-\[4\/5\]{aspect-ratio:4/5}.aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:var(--aspect-video)}.size-\(--cell-size\){width:var(--cell-size);height:var(--cell-size)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.h-\(--cell-size\){height:var(--cell-size)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2{height:calc(var(--spacing) * 2)}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-20{height:calc(var(--spacing) * 20)}.h-\[1px\]{height:1px}.h-\[500px\]{height:500px}.h-\[600px\]{height:600px}.h-\[var\(--radix-navigation-menu-viewport-height\)\]{height:var(--radix-navigation-menu-viewport-height)}.h-\[var\(--radix-select-trigger-height\)\]{height:var(--radix-select-trigger-height)}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.h-svh{height:100svh}.max-h-\(--radix-context-menu-content-available-height\){max-height:var(--radix-context-menu-content-available-height)}.max-h-\(--radix-select-content-available-height\){max-height:var(--radix-select-content-available-height)}.max-h-40{max-height:calc(var(--spacing) * 40)}.max-h-\[300px\]{max-height:300px}.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\]{max-height:var(--radix-dropdown-menu-content-available-height)}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-h-\[60px\]{min-height:60px}.min-h-screen{min-height:100vh}.min-h-svh{min-height:100svh}.w-\(--cell-size\){width:var(--cell-size)}.w-\(--sidebar-width\){width:var(--sidebar-width)}.w-0{width:calc(var(--spacing) * 0)}.w-1{width:calc(var(--spacing) * 1)}.w-2{width:calc(var(--spacing) * 2)}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-3\/4{width:75%}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-10{width:calc(var(--spacing) * 10)}.w-16{width:calc(var(--spacing) * 16)}.w-64{width:calc(var(--spacing) * 64)}.w-72{width:calc(var(--spacing) * 72)}.w-\[1px\]{width:1px}.w-\[100px\]{width:100px}.w-\[500px\]{width:500px}.w-\[600px\]{width:600px}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.w-max{width:max-content}.w-px{width:1px}.max-w-\(--skeleton-width\){max-width:var(--skeleton-width)}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-lg{max-width:var(--container-lg)}.max-w-max{max-width:max-content}.max-w-md{max-width:var(--container-md)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-\(--cell-size\){min-width:var(--cell-size)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-5{min-width:calc(var(--spacing) * 5)}.min-w-8{min-width:calc(var(--spacing) * 8)}.min-w-9{min-width:calc(var(--spacing) * 9)}.min-w-10{min-width:calc(var(--spacing) * 10)}.min-w-\[8rem\]{min-width:8rem}.min-w-\[12rem\]{min-width:12rem}.min-w-\[var\(--radix-select-trigger-width\)\]{min-width:var(--radix-select-trigger-width)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.grow-0{flex-grow:0}.basis-full{flex-basis:100%}.caption-bottom{caption-side:bottom}.border-collapse{border-collapse:collapse}.origin-\(--radix-context-menu-content-transform-origin\){transform-origin:var(--radix-context-menu-content-transform-origin)}.origin-\(--radix-dropdown-menu-content-transform-origin\){transform-origin:var(--radix-dropdown-menu-content-transform-origin)}.origin-\(--radix-hover-card-content-transform-origin\){transform-origin:var(--radix-hover-card-content-transform-origin)}.origin-\(--radix-menubar-content-transform-origin\){transform-origin:var(--radix-menubar-content-transform-origin)}.origin-\(--radix-popover-content-transform-origin\){transform-origin:var(--radix-popover-content-transform-origin)}.origin-\(--radix-select-content-transform-origin\){transform-origin:var(--radix-select-content-transform-origin)}.origin-\(--radix-tooltip-content-transform-origin\){transform-origin:var(--radix-tooltip-content-transform-origin)}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-x-2{--tw-translate-x:calc(var(--spacing) * -2);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-x-px{--tw-translate-x:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-px{--tw-translate-x:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-45{rotate:45deg}.rotate-90{rotate:90deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-caret-blink{animation:1.25s ease-out infinite caret-blink}.animate-in{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.animate-pulse{animation:var(--animate-pulse)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.list-none{list-style-type:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.place-content-center{place-content:center}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-10{gap:calc(var(--spacing) * 10)}.gap-16{gap:calc(var(--spacing) * 16)}.gap-px{gap:1px}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-1>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.rounded-\[2px\]{border-radius:2px}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-none{border-radius:0}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.rounded-xl{border-radius:calc(var(--radius) + 4px)}.rounded-t-\[10px\]{border-top-left-radius:10px;border-top-right-radius:10px}.rounded-l-md{border-top-left-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px)}.rounded-tl-sm{border-top-left-radius:calc(var(--radius) - 4px)}.rounded-r-md{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-\[1\.5px\]{border-style:var(--tw-border-style);border-width:1.5px}.border-y{border-block-style:var(--tw-border-style);border-block-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\(--color-border\){border-color:var(--color-border)}.border-border,.border-border\/50{border-color:var(--border)}@supports (color:color-mix(in lab,red,red)){.border-border\/50{border-color:color-mix(in oklab,var(--border) 50%,transparent)}}.border-destructive\/50{border-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.border-destructive\/50{border-color:color-mix(in oklab,var(--destructive) 50%,transparent)}}.border-input{border-color:var(--input)}.border-ivory\/40{border-color:var(--ivory)}@supports (color:color-mix(in lab,red,red)){.border-ivory\/40{border-color:color-mix(in oklab,var(--ivory) 40%,transparent)}}.border-navy\/20{border-color:var(--navy)}@supports (color:color-mix(in lab,red,red)){.border-navy\/20{border-color:color-mix(in oklab,var(--navy) 20%,transparent)}}.border-primary,.border-primary\/50{border-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.border-primary\/50{border-color:color-mix(in oklab,var(--primary) 50%,transparent)}}.border-teal,.border-teal\/70{border-color:var(--teal)}@supports (color:color-mix(in lab,red,red)){.border-teal\/70{border-color:color-mix(in oklab,var(--teal) 70%,transparent)}}.border-transparent{border-color:#0000}.border-t-transparent{border-top-color:#0000}.border-l-transparent{border-left-color:#0000}.bg-\(--color-bg\){background-color:var(--color-bg)}.bg-accent{background-color:var(--accent)}.bg-background,.bg-background\/90{background-color:var(--background)}@supports (color:color-mix(in lab,red,red)){.bg-background\/90{background-color:color-mix(in oklab,var(--background) 90%,transparent)}}.bg-background\/95{background-color:var(--background)}@supports (color:color-mix(in lab,red,red)){.bg-background\/95{background-color:color-mix(in oklab,var(--background) 95%,transparent)}}.bg-black\/80{background-color:#000c}@supports (color:color-mix(in lab,red,red)){.bg-black\/80{background-color:color-mix(in oklab,var(--color-black) 80%,transparent)}}.bg-border{background-color:var(--border)}.bg-card{background-color:var(--card)}.bg-cream{background-color:var(--cream)}.bg-destructive,.bg-destructive\/10{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.bg-destructive\/10{background-color:color-mix(in oklab,var(--destructive) 10%,transparent)}}.bg-foreground{background-color:var(--foreground)}.bg-muted,.bg-muted\/50{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.bg-muted\/50{background-color:color-mix(in oklab,var(--muted) 50%,transparent)}}.bg-navy-deep{background-color:var(--navy-deep)}.bg-popover{background-color:var(--popover)}.bg-primary,.bg-primary\/10{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.bg-primary\/10{background-color:color-mix(in oklab,var(--primary) 10%,transparent)}}.bg-primary\/20{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.bg-primary\/20{background-color:color-mix(in oklab,var(--primary) 20%,transparent)}}.bg-secondary{background-color:var(--secondary)}.bg-teal{background-color:var(--teal)}.bg-teal-bright{background-color:var(--teal-bright)}.bg-teal\/10{background-color:var(--teal)}@supports (color:color-mix(in lab,red,red)){.bg-teal\/10{background-color:color-mix(in oklab,var(--teal) 10%,transparent)}}.bg-transparent{background-color:#0000}.fill-current{fill:currentColor}.fill-primary{fill:var(--primary)}.object-cover{object-fit:cover}.object-\[65\%_30\%\]{object-position:65% 30%}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.p-10{padding:calc(var(--spacing) * 10)}.p-\[1px\]{padding:1px}.px-\(--cell-size\){padding-inline:var(--cell-size)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-7{padding-inline:calc(var(--spacing) * 7)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-3\.5{padding-block:calc(var(--spacing) * 3.5)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-28{padding-block:calc(var(--spacing) * 28)}.pt-0{padding-top:calc(var(--spacing) * 0)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pt-32{padding-top:calc(var(--spacing) * 32)}.pr-1{padding-right:calc(var(--spacing) * 1)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-2\.5{padding-right:calc(var(--spacing) * 2.5)}.pr-8{padding-right:calc(var(--spacing) * 8)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-24{padding-bottom:calc(var(--spacing) * 24)}.pl-2{padding-left:calc(var(--spacing) * 2)}.pl-2\.5{padding-left:calc(var(--spacing) * 2.5)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-6{padding-left:calc(var(--spacing) * 6)}.pl-8{padding-left:calc(var(--spacing) * 8)}.text-center{text-align:center}.text-left{text-align:left}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.8rem\]{font-size:.8rem}.text-\[10px\]{font-size:10px}.leading-\[1\.02\]{--tw-leading:1.02;line-height:1.02}.leading-\[1\.05\]{--tw-leading:1.05;line-height:1.05}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.2em\]{--tw-tracking:.2em;letter-spacing:.2em}.tracking-\[0\.3em\]{--tw-tracking:.3em;letter-spacing:.3em}.tracking-\[0\.4em\]{--tw-tracking:.4em;letter-spacing:.4em}.tracking-\[0\.25em\]{--tw-tracking:.25em;letter-spacing:.25em}.tracking-\[0\.35em\]{--tw-tracking:.35em;letter-spacing:.35em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.text-accent-foreground{color:var(--accent-foreground)}.text-card-foreground{color:var(--card-foreground)}.text-current{color:currentColor}.text-destructive{color:var(--destructive)}.text-destructive-foreground{color:var(--destructive-foreground)}.text-foreground{color:var(--foreground)}.text-ivory,.text-ivory\/75{color:var(--ivory)}@supports (color:color-mix(in lab,red,red)){.text-ivory\/75{color:color-mix(in oklab,var(--ivory) 75%,transparent)}}.text-ivory\/90{color:var(--ivory)}@supports (color:color-mix(in lab,red,red)){.text-ivory\/90{color:color-mix(in oklab,var(--ivory) 90%,transparent)}}.text-muted-foreground{color:var(--muted-foreground)}.text-navy{color:var(--navy)}.text-navy-deep{color:var(--navy-deep)}.text-navy\/50{color:var(--navy)}@supports (color:color-mix(in lab,red,red)){.text-navy\/50{color:color-mix(in oklab,var(--navy) 50%,transparent)}}.text-navy\/80{color:var(--navy)}@supports (color:color-mix(in lab,red,red)){.text-navy\/80{color:color-mix(in oklab,var(--navy) 80%,transparent)}}.text-popover-foreground{color:var(--popover-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-teal{color:var(--teal)}.text-teal-bright{color:var(--teal-bright)}.text-teal\/30{color:var(--teal)}@supports (color:color-mix(in lab,red,red)){.text-teal\/30{color:color-mix(in oklab,var(--teal) 30%,transparent)}}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.underline-offset-4{text-underline-offset:4px}.opacity-0{opacity:0}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_0_0_1px_var\(--sidebar-border\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,var(--sidebar-border));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-0{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-ring{--tw-ring-color:var(--ring)}.ring-offset-background{--tw-ring-offset-color:var(--background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur-3xl{--tw-blur:blur(var(--blur-3xl));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[left\,right\,width\]{transition-property:left,right,width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[margin\,opacity\]{transition-property:margin,opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[width\,height\,padding\]{transition-property:width,height,padding;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.duration-1000{--tw-duration:1s;transition-duration:1s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-linear{--tw-ease:linear;transition-timing-function:linear}.fade-in-0{--tw-enter-opacity:0}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.zoom-in-95{--tw-enter-scale:.95}.\[--cell-size\:2rem\]{--cell-size:2rem}.\[writing-mode\:vertical-rl\]{writing-mode:vertical-rl}.group-focus-within\/menu-item\:opacity-100:is(:where(.group\/menu-item):focus-within *){opacity:1}@media(hover:hover){.group-hover\:translate-x-0:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:text-teal:is(:where(.group):hover *){color:var(--teal)}.group-hover\:opacity-100:is(:where(.group):hover *),.group-hover\/menu-item\:opacity-100:is(:where(.group\/menu-item):hover *){opacity:1}}.group-has-\[\[data-sidebar\=menu-action\]\]\/menu-item\:pr-8:is(:where(.group\/menu-item):has([data-sidebar=menu-action]) *){padding-right:calc(var(--spacing) * 8)}.group-data-\[collapsible\=icon\]\:-mt-8:is(:where(.group)[data-collapsible=icon] *){margin-top:calc(var(--spacing) * -8)}.group-data-\[collapsible\=icon\]\:hidden:is(:where(.group)[data-collapsible=icon] *){display:none}.group-data-\[collapsible\=icon\]\:\!size-8:is(:where(.group)[data-collapsible=icon] *){width:calc(var(--spacing) * 8)!important;height:calc(var(--spacing) * 8)!important}.group-data-\[collapsible\=icon\]\:w-\(--sidebar-width-icon\):is(:where(.group)[data-collapsible=icon] *){width:var(--sidebar-width-icon)}.group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\]:is(:where(.group)[data-collapsible=icon] *){width:calc(var(--sidebar-width-icon) + 1rem)}.group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\]:is(:where(.group)[data-collapsible=icon] *){width:calc(var(--sidebar-width-icon) + 1rem + 2px)}.group-data-\[collapsible\=icon\]\:overflow-hidden:is(:where(.group)[data-collapsible=icon] *){overflow:hidden}.group-data-\[collapsible\=icon\]\:\!p-0:is(:where(.group)[data-collapsible=icon] *){padding:calc(var(--spacing) * 0)!important}.group-data-\[collapsible\=icon\]\:\!p-2:is(:where(.group)[data-collapsible=icon] *){padding:calc(var(--spacing) * 2)!important}.group-data-\[collapsible\=icon\]\:opacity-0:is(:where(.group)[data-collapsible=icon] *){opacity:0}.group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible=offcanvas] *){right:calc(var(--sidebar-width) * -1)}.group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible=offcanvas] *){left:calc(var(--sidebar-width) * -1)}.group-data-\[collapsible\=offcanvas\]\:w-0:is(:where(.group)[data-collapsible=offcanvas] *){width:calc(var(--spacing) * 0)}.group-data-\[collapsible\=offcanvas\]\:translate-x-0:is(:where(.group)[data-collapsible=offcanvas] *){--tw-translate-x:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-data-\[focused\=true\]\/day\:relative:is(:where(.group\/day)[data-focused=true] *){position:relative}.group-data-\[focused\=true\]\/day\:z-10:is(:where(.group\/day)[data-focused=true] *){z-index:10}.group-data-\[focused\=true\]\/day\:border-ring:is(:where(.group\/day)[data-focused=true] *){border-color:var(--ring)}.group-data-\[focused\=true\]\/day\:ring-\[3px\]:is(:where(.group\/day)[data-focused=true] *){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.group-data-\[focused\=true\]\/day\:ring-ring\/50:is(:where(.group\/day)[data-focused=true] *){--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab,red,red)){.group-data-\[focused\=true\]\/day\:ring-ring\/50:is(:where(.group\/day)[data-focused=true] *){--tw-ring-color:color-mix(in oklab, var(--ring) 50%, transparent)}}.group-data-\[side\=left\]\:-right-4:is(:where(.group)[data-side=left] *){right:calc(var(--spacing) * -4)}.group-data-\[side\=left\]\:border-r:is(:where(.group)[data-side=left] *){border-right-style:var(--tw-border-style);border-right-width:1px}.group-data-\[side\=right\]\:left-0:is(:where(.group)[data-side=right] *){left:calc(var(--spacing) * 0)}.group-data-\[side\=right\]\:rotate-180:is(:where(.group)[data-side=right] *){rotate:180deg}.group-data-\[side\=right\]\:border-l:is(:where(.group)[data-side=right] *){border-left-style:var(--tw-border-style);border-left-width:1px}.group-data-\[state\=open\]\:rotate-180:is(:where(.group)[data-state=open] *){rotate:180deg}.group-data-\[variant\=floating\]\:rounded-lg:is(:where(.group)[data-variant=floating] *){border-radius:var(--radius)}.group-data-\[variant\=floating\]\:border:is(:where(.group)[data-variant=floating] *){border-style:var(--tw-border-style);border-width:1px}.group-data-\[variant\=floating\]\:shadow:is(:where(.group)[data-variant=floating] *){--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.group-\[\.toast\]\:bg-muted:is(:where(.group).toast *){background-color:var(--muted)}.group-\[\.toast\]\:bg-primary:is(:where(.group).toast *){background-color:var(--primary)}.group-\[\.toast\]\:text-muted-foreground:is(:where(.group).toast *){color:var(--muted-foreground)}.group-\[\.toast\]\:text-primary-foreground:is(:where(.group).toast *){color:var(--primary-foreground)}.group-\[\.toaster\]\:border-border:is(:where(.group).toaster *){border-color:var(--border)}.group-\[\.toaster\]\:bg-background:is(:where(.group).toaster *){background-color:var(--background)}.group-\[\.toaster\]\:text-foreground:is(:where(.group).toaster *){color:var(--foreground)}.group-\[\.toaster\]\:shadow-lg:is(:where(.group).toaster *){--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-70:is(:where(.peer):disabled~*){opacity:.7}.peer-data-\[size\=default\]\/menu-button\:top-1\.5:is(:where(.peer\/menu-button)[data-size=default]~*){top:calc(var(--spacing) * 1.5)}.peer-data-\[size\=lg\]\/menu-button\:top-2\.5:is(:where(.peer\/menu-button)[data-size=lg]~*){top:calc(var(--spacing) * 2.5)}.peer-data-\[size\=sm\]\/menu-button\:top-1:is(:where(.peer\/menu-button)[data-size=sm]~*){top:calc(var(--spacing) * 1)}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.file\:text-foreground::file-selector-button{color:var(--foreground)}.placeholder\:text-muted-foreground::placeholder{color:var(--muted-foreground)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:-inset-2:after{content:var(--tw-content);inset:calc(var(--spacing) * -2)}.after\:inset-y-0:after{content:var(--tw-content);inset-block:calc(var(--spacing) * 0)}.after\:left-1\/2:after{content:var(--tw-content);left:50%}.after\:w-1:after{content:var(--tw-content);width:calc(var(--spacing) * 1)}.after\:w-\[2px\]:after{content:var(--tw-content);width:2px}.after\:-translate-x-1\/2:after{content:var(--tw-content);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(:where(.group)[data-collapsible=offcanvas] *):after{content:var(--tw-content);left:100%}.first\:rounded-l-md:first-child{border-top-left-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px)}.first\:border-l:first-child{border-left-style:var(--tw-border-style);border-left-width:1px}.last\:rounded-r-md:last-child{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}@media(hover:hover){.hover\:-translate-y-2:hover{--tw-translate-y:calc(var(--spacing) * -2);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:border-teal:hover{border-color:var(--teal)}.hover\:border-teal-bright:hover{border-color:var(--teal-bright)}.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:bg-cream:hover{background-color:var(--cream)}.hover\:bg-destructive\/80:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/80:hover{background-color:color-mix(in oklab,var(--destructive) 80%,transparent)}}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--destructive) 90%,transparent)}}.hover\:bg-ivory:hover{background-color:var(--ivory)}.hover\:bg-muted:hover,.hover\:bg-muted\/50:hover{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-muted\/50:hover{background-color:color-mix(in oklab,var(--muted) 50%,transparent)}}.hover\:bg-primary\/80:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/80:hover{background-color:color-mix(in oklab,var(--primary) 80%,transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--primary) 90%,transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab,var(--secondary) 80%,transparent)}}.hover\:bg-teal:hover{background-color:var(--teal)}.hover\:bg-teal-deep:hover{background-color:var(--teal-deep)}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:text-foreground:hover{color:var(--foreground)}.hover\:text-muted-foreground:hover{color:var(--muted-foreground)}.hover\:text-primary-foreground:hover{color:var(--primary-foreground)}.hover\:text-teal:hover{color:var(--teal)}.hover\:text-teal-bright:hover{color:var(--teal-bright)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-100:hover{opacity:1}.hover\:shadow-\[0_0_0_1px_var\(--sidebar-accent\)\]:hover{--tw-shadow:0 0 0 1px var(--tw-shadow-color,var(--sidebar-accent));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:bg-accent:focus{background-color:var(--accent)}.focus\:text-accent-foreground:focus{color:var(--accent-foreground)}.focus\:ring-1:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-ring:focus{--tw-ring-color:var(--ring)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-1:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--ring)}.focus-visible\:ring-offset-1:focus-visible{--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:ring-offset-background:focus-visible{--tw-ring-offset-color:var(--background)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.has-focus\:border-ring:has(:focus){border-color:var(--ring)}.has-focus\:ring-\[3px\]:has(:focus){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.has-focus\:ring-ring\/50:has(:focus){--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab,red,red)){.has-focus\:ring-ring\/50:has(:focus){--tw-ring-color:color-mix(in oklab, var(--ring) 50%, transparent)}}.has-\[\:disabled\]\:opacity-50:has(:disabled){opacity:.5}.aria-disabled\:pointer-events-none[aria-disabled=true]{pointer-events:none}.aria-disabled\:opacity-50[aria-disabled=true]{opacity:.5}.aria-selected\:text-muted-foreground[aria-selected=true]{color:var(--muted-foreground)}.data-\[active\=true\]\:font-medium[data-active=true]{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}.data-\[disabled\=true\]\:pointer-events-none[data-disabled=true]{pointer-events:none}.data-\[disabled\=true\]\:opacity-50[data-disabled=true]{opacity:.5}.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion=from-end]{--tw-enter-translate-x:calc(52*var(--spacing))}.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion=from-start]{--tw-enter-translate-x:calc(52*var(--spacing)*-1)}.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion=to-end]{--tw-exit-translate-x:calc(52*var(--spacing))}.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion=to-start]{--tw-exit-translate-x:calc(52*var(--spacing)*-1)}.data-\[motion\^\=from-\]\:animate-in[data-motion^=from-]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[motion\^\=from-\]\:fade-in[data-motion^=from-]{--tw-enter-opacity:0}.data-\[motion\^\=to-\]\:animate-out[data-motion^=to-]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[motion\^\=to-\]\:fade-out[data-motion^=to-]{--tw-exit-opacity:0}.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction=vertical]{height:1px}.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction=vertical]{width:100%}.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction=vertical]{flex-direction:column}.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction=vertical]:after{content:var(--tw-content);left:calc(var(--spacing) * 0)}.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction=vertical]:after{content:var(--tw-content);height:calc(var(--spacing) * 1)}.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction=vertical]:after{content:var(--tw-content);width:100%}.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction=vertical]:after{content:var(--tw-content);--tw-translate-x:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction=vertical]:after{content:var(--tw-content);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[placeholder\]\:text-muted-foreground[data-placeholder]{color:var(--muted-foreground)}.data-\[range-end\=true\]\:rounded-md[data-range-end=true]{border-radius:calc(var(--radius) - 2px)}.data-\[range-end\=true\]\:bg-primary[data-range-end=true]{background-color:var(--primary)}.data-\[range-end\=true\]\:text-primary-foreground[data-range-end=true]{color:var(--primary-foreground)}.data-\[range-middle\=true\]\:rounded-none[data-range-middle=true]{border-radius:0}.data-\[range-middle\=true\]\:bg-accent[data-range-middle=true]{background-color:var(--accent)}.data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle=true]{color:var(--accent-foreground)}.data-\[range-start\=true\]\:rounded-md[data-range-start=true]{border-radius:calc(var(--radius) - 2px)}.data-\[range-start\=true\]\:bg-primary[data-range-start=true]{background-color:var(--primary)}.data-\[range-start\=true\]\:text-primary-foreground[data-range-start=true]{color:var(--primary-foreground)}.data-\[selected-single\=true\]\:bg-primary[data-selected-single=true]{background-color:var(--primary)}.data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single=true]{color:var(--primary-foreground)}.data-\[selected\=true\]\:rounded-none[data-selected=true]{border-radius:0}.data-\[selected\=true\]\:bg-accent[data-selected=true]{background-color:var(--accent)}.data-\[selected\=true\]\:text-accent-foreground[data-selected=true]{color:var(--accent-foreground)}.data-\[side\=bottom\]\:translate-y-1[data-side=bottom]{--tw-translate-y:calc(var(--spacing) * 1);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom]{--tw-enter-translate-y:calc(2*var(--spacing)*-1)}.data-\[side\=left\]\:-translate-x-1[data-side=left]{--tw-translate-x:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[side\=left\]\:slide-in-from-right-2[data-side=left]{--tw-enter-translate-x:calc(2*var(--spacing))}.data-\[side\=right\]\:translate-x-1[data-side=right]{--tw-translate-x:calc(var(--spacing) * 1);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[side\=right\]\:slide-in-from-left-2[data-side=right]{--tw-enter-translate-x:calc(2*var(--spacing)*-1)}.data-\[side\=top\]\:-translate-y-1[data-side=top]{--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top]{--tw-enter-translate-y:calc(2*var(--spacing))}.data-\[state\=active\]\:bg-background[data-state=active]{background-color:var(--background)}.data-\[state\=active\]\:text-foreground[data-state=active]{color:var(--foreground)}.data-\[state\=active\]\:shadow[data-state=active]{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.data-\[state\=checked\]\:translate-x-4[data-state=checked]{--tw-translate-x:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[state\=checked\]\:bg-primary[data-state=checked]{background-color:var(--primary)}.data-\[state\=checked\]\:text-primary-foreground[data-state=checked]{color:var(--primary-foreground)}.data-\[state\=closed\]\:animate-accordion-up[data-state=closed]{animation:accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=closed\]\:animate-out[data-state=closed]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=closed\]\:duration-300[data-state=closed]{--tw-duration:.3s;transition-duration:.3s}.data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity:0}.data-\[state\=closed\]\:zoom-out-95[data-state=closed]{--tw-exit-scale:.95}.data-\[state\=closed\]\:slide-out-to-bottom[data-state=closed]{--tw-exit-translate-y:100%}.data-\[state\=closed\]\:slide-out-to-left[data-state=closed]{--tw-exit-translate-x:-100%}.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed]{--tw-exit-translate-x: -50% }.data-\[state\=closed\]\:slide-out-to-right[data-state=closed]{--tw-exit-translate-x:100%}.data-\[state\=closed\]\:slide-out-to-top[data-state=closed]{--tw-exit-translate-y:-100%}.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed]{--tw-exit-translate-y: -48% }.data-\[state\=hidden\]\:animate-out[data-state=hidden]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=hidden\]\:fade-out[data-state=hidden]{--tw-exit-opacity:0}.data-\[state\=on\]\:bg-accent[data-state=on]{background-color:var(--accent)}.data-\[state\=on\]\:text-accent-foreground[data-state=on]{color:var(--accent-foreground)}.data-\[state\=open\]\:animate-accordion-down[data-state=open]{animation:accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=open\]\:animate-in[data-state=open]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=open\]\:bg-accent[data-state=open],.data-\[state\=open\]\:bg-accent\/50[data-state=open]{background-color:var(--accent)}@supports (color:color-mix(in lab,red,red)){.data-\[state\=open\]\:bg-accent\/50[data-state=open]{background-color:color-mix(in oklab,var(--accent) 50%,transparent)}}.data-\[state\=open\]\:bg-secondary[data-state=open]{background-color:var(--secondary)}.data-\[state\=open\]\:text-accent-foreground[data-state=open]{color:var(--accent-foreground)}.data-\[state\=open\]\:text-muted-foreground[data-state=open]{color:var(--muted-foreground)}.data-\[state\=open\]\:opacity-100[data-state=open]{opacity:1}.data-\[state\=open\]\:duration-500[data-state=open]{--tw-duration:.5s;transition-duration:.5s}.data-\[state\=open\]\:fade-in-0[data-state=open]{--tw-enter-opacity:0}.data-\[state\=open\]\:zoom-in-90[data-state=open]{--tw-enter-scale:.9}.data-\[state\=open\]\:zoom-in-95[data-state=open]{--tw-enter-scale:.95}.data-\[state\=open\]\:slide-in-from-bottom[data-state=open]{--tw-enter-translate-y:100%}.data-\[state\=open\]\:slide-in-from-left[data-state=open]{--tw-enter-translate-x:-100%}.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open]{--tw-enter-translate-x: -50% }.data-\[state\=open\]\:slide-in-from-right[data-state=open]{--tw-enter-translate-x:100%}.data-\[state\=open\]\:slide-in-from-top[data-state=open]{--tw-enter-translate-y:-100%}.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open]{--tw-enter-translate-y: -48% }@media(hover:hover){.data-\[state\=open\]\:hover\:bg-accent[data-state=open]:hover{background-color:var(--accent)}}.data-\[state\=open\]\:focus\:bg-accent[data-state=open]:focus{background-color:var(--accent)}.data-\[state\=selected\]\:bg-muted[data-state=selected]{background-color:var(--muted)}.data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked]{--tw-translate-x:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[state\=unchecked\]\:bg-input[data-state=unchecked]{background-color:var(--input)}.data-\[state\=visible\]\:animate-in[data-state=visible]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=visible\]\:fade-in[data-state=visible]{--tw-enter-opacity:0}@media(min-width:40rem){.sm\:mt-0{margin-top:calc(var(--spacing) * 0)}.sm\:flex{display:flex}.sm\:max-w-sm{max-width:var(--container-sm)}.sm\:flex-row{flex-direction:row}.sm\:justify-end{justify-content:flex-end}.sm\:gap-2\.5{gap:calc(var(--spacing) * 2.5)}:where(.sm\:space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)))}.sm\:rounded-lg{border-radius:var(--radius)}.sm\:text-left{text-align:left}.sm\:text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}}@media(min-width:48rem){.md\:absolute{position:absolute}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:inline-flex{display:inline-flex}.md\:h-14{height:calc(var(--spacing) * 14)}.md\:w-\[var\(--radix-navigation-menu-viewport-width\)\]{width:var(--radix-navigation-menu-viewport-width)}.md\:w-auto{width:auto}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:gap-8{gap:calc(var(--spacing) * 8)}.md\:p-10{padding:calc(var(--spacing) * 10)}.md\:p-12{padding:calc(var(--spacing) * 12)}.md\:py-40{padding-block:calc(var(--spacing) * 40)}.md\:py-44{padding-block:calc(var(--spacing) * 44)}.md\:text-right{text-align:right}.md\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.md\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.md\:text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.md\:text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.md\:text-8xl{font-size:var(--text-8xl);line-height:var(--tw-leading,var(--text-8xl--line-height))}.md\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.md\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.md\:opacity-0{opacity:0}.md\:peer-data-\[variant\=inset\]\:m-2:is(:where(.peer)[data-variant=inset]~*){margin:calc(var(--spacing) * 2)}.md\:peer-data-\[variant\=inset\]\:ml-0:is(:where(.peer)[data-variant=inset]~*){margin-left:calc(var(--spacing) * 0)}.md\:peer-data-\[variant\=inset\]\:rounded-xl:is(:where(.peer)[data-variant=inset]~*){border-radius:calc(var(--radius) + 4px)}.md\:peer-data-\[variant\=inset\]\:shadow:is(:where(.peer)[data-variant=inset]~*){--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.md\:peer-data-\[state\=collapsed\]\:peer-data-\[variant\=inset\]\:ml-2:is(:where(.peer)[data-state=collapsed]~*):is(:where(.peer)[data-variant=inset]~*){margin-left:calc(var(--spacing) * 2)}}.after\:md\:hidden:after{content:var(--tw-content)}@media(min-width:48rem){.after\:md\:hidden:after{display:none}}@media(min-width:64rem){.lg\:right-10{right:calc(var(--spacing) * 10)}.lg\:mx-0{margin-inline:calc(var(--spacing) * 0)}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:gap-8{gap:calc(var(--spacing) * 8)}.lg\:gap-24{gap:calc(var(--spacing) * 24)}.lg\:px-10{padding-inline:calc(var(--spacing) * 10)}.lg\:text-8xl{font-size:var(--text-8xl);line-height:var(--tw-leading,var(--text-8xl--line-height))}}.dark\:border-destructive:is(.dark *){border-color:var(--destructive)}.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text{fill:var(--muted-foreground)}.\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke="#ccc"]{stroke:var(--border)}@supports (color:color-mix(in lab,red,red)){.\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke="#ccc"]{stroke:color-mix(in oklab,var(--border) 50%,transparent)}}.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor{stroke:var(--border)}.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke="#fff"]{stroke:#0000}.\[\&_\.recharts-layer\]\:outline-none .recharts-layer{--tw-outline-style:none;outline-style:none}.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke="#ccc"]{stroke:var(--border)}.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector,.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor{fill:var(--muted)}.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke="#ccc"]{stroke:var(--border)}.\[\&_\.recharts-sector\]\:outline-none .recharts-sector{--tw-outline-style:none;outline-style:none}.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke="#fff"]{stroke:#0000}.\[\&_\.recharts-surface\]\:outline-none .recharts-surface{--tw-outline-style:none;outline-style:none}.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading]{padding-inline:calc(var(--spacing) * 2)}.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading]{padding-block:calc(var(--spacing) * 1.5)}.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading]{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading]{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading]{color:var(--muted-foreground)}.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group]{padding-inline:calc(var(--spacing) * 2)}.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden])~[cmdk-group]{padding-top:calc(var(--spacing) * 0)}.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg{height:calc(var(--spacing) * 5)}.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg{width:calc(var(--spacing) * 5)}.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input]{height:calc(var(--spacing) * 12)}.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item]{padding-inline:calc(var(--spacing) * 2)}.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item]{padding-block:calc(var(--spacing) * 3)}.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg{height:calc(var(--spacing) * 5)}.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg{width:calc(var(--spacing) * 5)}.\[\&_p\]\:leading-relaxed p{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_tr\]\:border-b tr{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\&_tr\:last-child\]\:border-0 tr:last-child{border-style:var(--tw-border-style);border-width:0}.\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button{border-top-left-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px)}.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){padding-right:calc(var(--spacing) * 0)}:is(.rtl\:\*\*\:\[\.rdp-button\\_next\>svg\]\:rotate-180:where(:dir(rtl),[dir=rtl],[dir=rtl] *) *):is(.rdp-button_next>svg),:is(.rtl\:\*\*\:\[\.rdp-button\\_previous\>svg\]\:rotate-180:where(:dir(rtl),[dir=rtl],[dir=rtl] *) *):is(.rdp-button_previous>svg){rotate:180deg}.\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox]{--tw-translate-y:2px;translate:var(--tw-translate-x) var(--tw-translate-y)}.\[\&\>button\]\:hidden>button{display:none}.\[\&\>span\]\:line-clamp-1>span{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.\[\&\>span\]\:text-xs>span{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\[\&\>span\]\:opacity-70>span{opacity:.7}.\[\&\>span\:last-child\]\:truncate>span:last-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.\[\&\>svg\]\:absolute>svg{position:absolute}.\[\&\>svg\]\:top-4>svg{top:calc(var(--spacing) * 4)}.\[\&\>svg\]\:left-4>svg{left:calc(var(--spacing) * 4)}.\[\&\>svg\]\:size-3\.5>svg{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.\[\&\>svg\]\:size-4>svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&\>svg\]\:h-2\.5>svg{height:calc(var(--spacing) * 2.5)}.\[\&\>svg\]\:h-3>svg{height:calc(var(--spacing) * 3)}.\[\&\>svg\]\:h-3\.5>svg{height:calc(var(--spacing) * 3.5)}.\[\&\>svg\]\:w-2\.5>svg{width:calc(var(--spacing) * 2.5)}.\[\&\>svg\]\:w-3>svg{width:calc(var(--spacing) * 3)}.\[\&\>svg\]\:w-3\.5>svg{width:calc(var(--spacing) * 3.5)}.\[\&\>svg\]\:shrink-0>svg{flex-shrink:0}.\[\&\>svg\]\:text-destructive>svg{color:var(--destructive)}.\[\&\>svg\]\:text-foreground>svg{color:var(--foreground)}.\[\&\>svg\]\:text-muted-foreground>svg{color:var(--muted-foreground)}.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div{--tw-translate-y:-3px;translate:var(--tw-translate-x) var(--tw-translate-y)}.\[\&\>svg\~\*\]\:pl-7>svg~*{padding-left:calc(var(--spacing) * 7)}.\[\&\>tr\]\:last\:border-b-0>tr:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div{rotate:90deg}.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{rotate:180deg}[data-side=left] .\[\[data-side\=left\]_\&\]\:cursor-w-resize{cursor:w-resize}[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2{right:calc(var(--spacing) * -2)}[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize,[data-side=right] .\[\[data-side\=right\]_\&\]\:cursor-e-resize{cursor:e-resize}[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2{left:calc(var(--spacing) * -2)}[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize{cursor:w-resize}[data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent,[data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent{background-color:#0000}.font-serif{font-family:var(--font-serif)}.font-sans{font-family:var(--font-sans)}.bg-grid{background-image:var(--grid-pattern);background-size:64px 64px}.bg-radial-teal{background-image:var(--gradient-radial-teal)}.text-balance{text-wrap:balance}.reveal{opacity:0;transition:opacity .9s ease-out,transform .9s ease-out;transform:translateY(24px)}.reveal.is-visible{opacity:1;transform:translateY(0)}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.animate-marquee{animation:40s linear infinite marquee}@keyframes scroll-bounce{0%,to{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(8px)}}.animate-scroll-bounce{animation:2s ease-in-out infinite scroll-bounce}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}:root{--radius:.5rem;--teal:oklch(52% .09 188);--teal-bright:oklch(66% .09 188);--teal-deep:oklch(40% .08 195);--navy:oklch(22% .035 235);--navy-deep:oklch(15% .03 235);--ivory:oklch(98.5% .006 95);--cream:oklch(96.5% .012 90);--offwhite:oklch(98.5% .006 95);--background:var(--ivory);--foreground:var(--navy-deep);--card:oklch(100% 0 0);--card-foreground:var(--navy-deep);--popover:oklch(100% 0 0);--popover-foreground:var(--navy-deep);--primary:var(--teal);--primary-foreground:oklch(100% 0 0);--secondary:var(--cream);--secondary-foreground:var(--navy-deep);--muted:var(--cream);--muted-foreground:oklch(45% .02 235);--accent:var(--teal);--accent-foreground:oklch(100% 0 0);--destructive:oklch(57.7% .245 27.325);--destructive-foreground:oklch(100% 0 0);--border:oklch(22% .035 235/.12);--input:oklch(22% .035 235/.15);--ring:var(--teal);--gradient-radial-teal:radial-gradient(ellipse at top right, var(--teal-bright), transparent 60%)}@supports (color:color-mix(in lab,red,red)){:root{--gradient-radial-teal:radial-gradient(ellipse at top right, color-mix(in oklab, var(--teal-bright) 18%, transparent), transparent 60%)}}:root{--grid-pattern:linear-gradient(to right, oklch(22% .035 235/.05) 1px, transparent 1px), linear-gradient(to bottom, oklch(22% .035 235/.05) 1px, transparent 1px)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes pulse{50%{opacity:.5}}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));filter:blur(var(--tw-exit-blur,0))}}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))))}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))))}to{height:0}}@keyframes caret-blink{0%,70%,to{opacity:1}20%,50%{opacity:0}}



/* ============================== */
/* 2. COUCHE CUSTOM (écrite main)  */
/* ============================== */
  /* ── VARIABLES ── */
  :root {
    --teal:     #28AAA7;
    --teal-lt:  #3DC8C5;
    --ambre:    #E0A24E;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* ── UTILITAIRE MANQUANT : text-ivory (sans opacité) n'était jamais généré
     par Tailwind (seule la variante /75 était utilisée ailleurs), ce qui
     laissait class="text-ivory" sans effet, texte hérité de la couleur du
     parent au lieu du blanc ivoire plein attendu. ── */
  .text-ivory { color: var(--ivory); }

  /* ── GRAIN ── */
  body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9990; opacity: .03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-size: 180px 180px; }

  /* ── CURSOR ── */
  body { cursor: none; }
  @media (max-width: 900px) { body { cursor: auto; } #cursor-dot, #cursor-ring, #cursor-label { display: none !important; } }
  #cursor-dot  { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background: var(--teal); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); }
  #cursor-ring { position: fixed; top: 0; left: 0; width: 36px; height: 36px; border: 1px solid rgba(40,170,167,.5); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); transition: width .3s, height .3s, border-color .3s; }
  #cursor-label { position: fixed; top: 0; left: 0; z-index: 9998; pointer-events: none; transform: translate(-50%,-50%) scale(.8); opacity: 0; transition: opacity .25s var(--ease-out-expo), transform .25s var(--ease-out-expo); background: var(--navy-deep); color: var(--ivory); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; padding: 8px 16px; border-radius: 999px; }
  #cursor-label.active { opacity: 1; transform: translate(-50%,-50%) scale(1); }

  /* ── SCROLL PROGRESS ── */
  #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--teal), var(--teal-bright)); z-index: 60; transition: width .1s linear; }
  @media (max-width: 900px) { #scroll-progress { display: none; } }

  /* ── BOUTONS MAGNÉTIQUES ── */
  .cta-primary, .cta-secondary { will-change: transform; transition: transform .25s var(--ease-out-expo), background-color .2s ease, border-color .3s, color .3s, box-shadow .2s ease; }

  /* ── TITRES : révélation mot à mot ── */
  .split-word { display: inline-block; opacity: 0; transform: translateY(.5em); transition: opacity .6s var(--ease-out-expo), transform .6s var(--ease-out-expo); }
  .split-word.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .split-word { opacity: 1; transform: none; } }

  /* ── SCROLL REVEAL ── */
  .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1.1s var(--ease-out-expo), transform 1.1s var(--ease-out-expo); }
  .reveal.visible { opacity: 1; transform: none; }
  .reveal-delay-1 { transition-delay: .16s; }
  .reveal-delay-2 { transition-delay: .32s; }
  .reveal-delay-3 { transition-delay: .48s; }
  .reveal-delay-4 { transition-delay: .64s; }

  /* ── VARIANTE LÉGÈRE : simple apparition, sans glissement (pour varier des
     autres sections, qui glissent vers le haut) ── */
  .reveal.reveal-fade { transform: none; transition: opacity 1.4s ease; }
  .reveal.reveal-fade.visible { transform: none; }

  /* ── VARIANTE ZOOM : légère mise à l'échelle, pour distinguer la Méthode
     des autres sections qui glissent vers le haut ── */
  .reveal.reveal-zoom { transform: scale(.9); transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo); }
  .reveal.reveal-zoom.visible { transform: scale(1); }

  /* ── MÉTHODE : succession marquée entre les 3 étapes ── */
  #method .reveal-delay-1 { transition-delay: .35s; }
  #method .reveal-delay-2 { transition-delay: .7s; }

  /* ── MÉTHODE : fil qui relie les 3 étapes, façon "fil d'Ariane" ── */
  .method-thread { display: none; position: absolute; top: 68px; left: 10%; right: 10%; height: 2px; background: var(--border); z-index: 0; overflow: hidden; }
  @media (min-width: 768px) { .method-thread { display: block; } }
  .method-thread::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--teal), var(--ambre)); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease-out-expo) .3s; }
  .method-thread.visible::before { transform: scaleX(1); }

  /* ── MÉTHODE : tag de durée, à côté du label "Étape 0X" ── */
  .method-duration { display: inline-block; font-size: .62rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 999px; padding: .2rem .65rem; vertical-align: middle; }

  /* ── MÉTHODE : livrables par étape, la flèche teal comme puce ── */
  .method-deliverables { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .6rem; }
  .method-deliverables li { font-size: .8rem; color: var(--muted-foreground); line-height: 1.5; display: flex; gap: .6rem; }
  .method-deliverables li::before { content: '→'; flex-shrink: 0; color: var(--teal); font-size: .75rem; }

  /* ── SECTION LABEL ── */
  .section-label { display: inline-flex; align-items: center; gap: .75rem; font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); }
  .section-label::before { content: ''; display: block; width: 32px; height: 1px; background: var(--teal); }

  /* ── HERO HEADLINE SLIDE UP ── */
  .hero-headline .line { display: block; overflow: hidden; }
  .hero-headline .line-inner {
    display: block;
    transform: translateY(110%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
    -webkit-mask-size: 280% 100%;
    mask-size: 280% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    animation: slideUp .9s var(--ease-out-expo) forwards, maskWipe 1.2s var(--ease-out-expo) forwards;
  }
  .hero-headline .line:nth-child(2) .line-inner { animation-delay: .12s; }
  .hero-headline .line:nth-child(3) .line-inner { animation-delay: .22s; }
  @keyframes slideUp { to { transform: translateY(0); } }
  @keyframes maskWipe { to { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
  @media (prefers-reduced-motion: reduce) { .hero-headline .line-inner { animation: none; transform: none; -webkit-mask-image: none; mask-image: none; } }

  /* ── HERO : mot qui alterne (Innovations. / Visibilité. / Croissance.), même logique qu'un mot-clé qui se relaie en fondu ── */
  .hero-word-cycle { position: relative; display: inline-block; vertical-align: bottom; }
  .hero-word-sizer { visibility: hidden; white-space: nowrap; }
  .hero-word { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transition: opacity .8s var(--ease-out-expo); }
  .hero-word.is-active { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .hero-word { transition: none; } }

  /* ── HERO BOTTOM FADE ── */
  /* opacité au repos = 1 : si l'animation ne se joue pas, le texte reste visible
     (le fondu d'entrée est purement décoratif). "both" gère l'état pendant le délai. */
  .hero-bottom { animation: simpleFadeIn 1.4s .6s ease both; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
  @keyframes simpleFadeIn { from { opacity: 0; } to { opacity: 1; } }

  /* ── HERO TAG ── */
  .hero-tag-wrap { opacity: 0; animation: fadeUp .7s .2s var(--ease-out-expo) forwards; }

  /* ── SCROLL LINE PULSE ── */

  /* ── HEADER : fond présent dès le chargement (blanc à dominante + léger
     dégradé teal), sur toutes les pages ; renforcé au scroll. ── */
  header { background: linear-gradient(112deg, rgba(255,255,255,.97) 0%, rgba(239,247,245,.93) 55%, rgba(255,255,255,.97) 100%) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(15,46,40,.06); }
  header.scrolled { background: linear-gradient(112deg, rgba(255,255,255,.99) 0%, rgba(237,246,243,.97) 55%, rgba(255,255,255,.99) 100%) !important; box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 10px 30px rgba(15,46,40,.06); }
  @media (max-width: 768px) {
    header { background: rgba(255,255,255,0.98) !important; backdrop-filter: blur(12px); padding-top: env(safe-area-inset-top); }
  }

  /* ── SERVICE CARD ARROW ── */
  /* ── EXPERTISES : halo dégradé (repris de l'ancienne section Studio) ── */
  #services {
    background-color: #14332c;
    background-image:
      radial-gradient(ellipse 900px 700px at 50% -10%, color-mix(in oklab, var(--teal-bright) 55%, transparent), transparent 62%),
      radial-gradient(ellipse 700px 600px at 12% 45%, color-mix(in oklab, var(--ambre) 16%, transparent), transparent 65%),
      radial-gradient(ellipse 800px 800px at 88% 95%, color-mix(in oklab, #0a1f1b 75%, transparent), transparent 70%);
    background-repeat: no-repeat;
  }
  /* ── EXPERTISES : chiffre fantôme (inspiré saegus.com) ── */
  .expertise-card { position: relative; overflow: hidden; box-shadow: 0 0 0 0 transparent; transition: box-shadow .7s var(--ease-out-expo), background-color .5s ease; }
  .expertise-card.visible { box-shadow: 0 0 0 1px var(--teal); }
  .expertise-ghost-num { position: absolute; top: .25rem; right: 1rem; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 5.5rem; line-height: 1; color: var(--teal); opacity: .1; pointer-events: none; user-select: none; }

  /* ── EXPERTISES (page détail) : même écriture chiffrée que la home, adaptée en ligne ── */
  .expertise-index-num { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 2.75rem; line-height: 1; color: var(--teal); opacity: .4; }

  /* ── EXPERTISES (page détail) : CTA en ligne, même flèche que les cartes de la home ── */
  .expertise-inline-cta { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.75rem; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--navy-deep); text-decoration: none; transition: color .3s; }
  .expertise-inline-cta:hover { color: var(--teal); }
  .expertise-inline-cta .arrow { display: inline-block; transition: transform .3s var(--ease-out-expo); }
  .expertise-inline-cta:hover .arrow { transform: translateX(4px); }

  /* ── EXPERTISES : Studio Design + IA Performance, fond dégradé animé ── */
  .expertise-card--alt {
    background: linear-gradient(135deg, #1c453c, #28594c, #14332c, #2f6656);
    background-size: 300% 300%;
    animation: altCardGradient 14s ease infinite;
  }
  .expertise-card--alt h3 { color: var(--ivory); }
  .expertise-card--alt p { color: color-mix(in oklab, var(--ivory) 70%, transparent); }
  .expertise-card--alt .expertise-ghost-num { color: var(--teal); opacity: .18; }
  .expertise-card--alt .service-arrow { color: var(--teal); }
  .expertise-card--alt strong.accent { color: var(--teal); }
  .expertise-card--alt.visible { box-shadow: 0 0 0 1px var(--ambre); }
  @keyframes altCardGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
  @media (prefers-reduced-motion: reduce) { .expertise-card--alt { animation: none; } }

  .service-arrow { display: inline-block; margin-top: 1rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .3s; }
  .group:hover .service-arrow { opacity: 1; transform: none; }
  .service-arrow .arrow { display: inline-block; transition: transform .3s var(--ease-out-expo); }
  .group:hover .service-arrow .arrow { transform: translateX(4px); }

  /* ── SMOOTH SCROLL ── */
  html { scroll-behavior: smooth; }

  /* ── HAMBURGER & MOBILE MENU ── */
  .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; margin-left: auto; z-index: 200; }
  .hamburger span { display: block; width: 22px; height: 1.5px; background: #1a8a75; border-radius: 2px; transition: all 0.3s ease; }
  .hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .mobile-menu { display: none; flex-direction: column; background: #f0f7f5; padding: 16px 24px 24px; position: fixed; top: 80px; left: 0; right: 0; z-index: 999; border-bottom: 0.5px solid rgba(26,138,117,0.15); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
  .mobile-menu.open { display: flex; }
  .mobile-menu a { font-size: 16px; color: #0f2e28; text-decoration: none; padding: 14px 0; border-bottom: 0.5px solid rgba(26,138,117,0.1); font-weight: 500; }
  .mobile-menu a:last-child { border-bottom: none; }
  .mobile-menu .mobile-cta { margin-top: 12px; background: #1a8a75; color: #fff; text-align: center; padding: 5px 14px; border-radius: 100px; font-weight: 600; border: none; font-size: 12px; }
  @media (max-width: 768px) { .hamburger { display: flex; } .nav-links { display: none; } header, nav { position: relative; z-index: 100; } }

  /* ── CLIENTS SECTION ── */
  .clients-section { background: #f0f7f5; padding: 72px 56px; text-align: center; border-top: 0.5px solid rgba(26,138,117,0.12); }
  .clients-intro { font-size: 18px; font-weight: 700; color: #1a8a75; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 48px; opacity: 0; animation: clientsFadeUp 0.7s cubic-bezier(0.16,1,0.3,1) forwards 0.1s; }
  .clients-viewport { overflow: hidden; max-width: 1100px; margin: 0 auto; opacity: 0; animation: clientsFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) forwards 0.4s; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .clients-track { display: flex; align-items: center; gap: 56px; width: max-content; }
  .clients-track:hover { animation-play-state: paused; }
  .client-logo { height: 70px; width: auto; opacity: 1; filter: none; flex-shrink: 0;
    /* fond blanc des logos non détourés (JPEG) neutralisé sur le fond clair de la section */
    mix-blend-mode: multiply; }
  /* logo rendu cliquable → renvoi vers le site du client */
  .client-logo-link { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none;
    transition: transform .25s cubic-bezier(0.16,1,0.3,1), opacity .25s; }
  .client-logo-link:hover { transform: translateY(-2px); opacity: 0.85; }
  .client-logo-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 6px; border-radius: 4px; }
  .client-logo:hover { opacity: 0.85; }
  @keyframes clientsFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) { .clients-track { animation: none; } }
  @media (max-width: 768px) { .clients-section { padding: 48px 24px; } .clients-track { gap: 32px; } .client-logo { height: 50px; } }

  /* ── CONFIANCE : variante agrandie (bandeau remonté), défilement simple —
     logos posés directement sur le fond, sans cadre (version d'avant). ── */
  .clients-section--xl { padding: 96px 56px; }
  .clients-section--xl .clients-intro { font-size: 22px; letter-spacing: .12em; margin-bottom: 52px; color: var(--teal-deep); }
  .clients-section--xl .clients-viewport { max-width: 1300px; }
  .clients-section--xl .clients-track { gap: 88px; align-items: center; }
  .clients-section--xl .client-logo { height: 84px; width: auto; object-fit: contain; }
  .clients-section--xl .client-logo--badge { height: 96px; }
  @media (max-width: 768px) {
    .clients-section--xl { padding: 56px 20px; }
    .clients-section--xl .clients-intro { font-size: 16px; margin-bottom: 32px; }
    .clients-section--xl .clients-track { gap: 44px; }
    .clients-section--xl .client-logo { height: 52px; }
    .clients-section--xl .client-logo--badge { height: 60px; }
  }

  /* ── MISSION SECTION ── */
  .mission-section { background: #28594c; padding: 80px 56px; position: relative; overflow: hidden; }
  .mission-velaris-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
  .mission-inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; }
  .mission-body { font-size: 28px; font-style: italic; font-weight: 600; text-align: center; color: var(--ivory); line-height: 1.7; }
  .mission-cite { display: block; margin-top: 1.5rem; text-align: center; font-style: normal; font-weight: 600; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in oklab, var(--ivory) 78%, transparent); }
  .mission-cite-role { display: block; margin-top: .25rem; font-weight: 600; font-size: .7em; letter-spacing: .1em; text-transform: none; color: color-mix(in oklab, var(--ivory) 60%, transparent); }
  @media (max-width: 768px) { .mission-section { padding: 56px 24px; } .mission-body { font-size: 22px; } .mission-cite { font-size: 13px; } }

  /* ── MISSION : reprise de l'animation de l'ancien titre « Empowering… »
     (montée + balayage diagonal d'un masque), déclenchée au scroll via .visible.
     État de repos identique aux autres .reveal du site (pas de clipping). ── */
  .mission-body.mission-reveal {
    opacity: 0;
    transform: translateY(48px);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
    -webkit-mask-size: 280% 100%;
    mask-size: 280% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    transition: opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo),
                -webkit-mask-position 1.25s var(--ease-out-expo) .1s, mask-position 1.25s var(--ease-out-expo) .1s;
  }
  .mission-body.mission-reveal.visible {
    opacity: 1;
    transform: translateY(0);
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .mission-body.mission-reveal { opacity: 1; transform: none; -webkit-mask-image: none; mask-image: none; }
  }

  /* ── 1. CONTRASTE ── */
  p, li, span.description, .subtitle { color: inherit; }

  /* ── 2. TAILLE & INTERLIGNE ── */
  p, li { font-size: 17px; line-height: 1.7; }
  h2, h3 { line-height: 1.5; }
  small, .caption { font-size: 14px; }
  @media (max-width: 768px) { p, li { font-size: 16px; line-height: 1.65; } }

  /* ── 3. ESPACEMENT ── */
  .section-title, h2 { margin-bottom: 24px; }
  @media (max-width: 768px) { section { padding-top: 64px; padding-bottom: 64px; } }

  /* ── 4. CTA PRIMARY ── */
  .cta-primary { display: inline-block; background-color: #28AAA7; color: #FFFFFF !important; font-size: 17px; font-weight: 600; padding: 16px 36px; border-radius: 6px; border: none; cursor: pointer; text-decoration: none; transition: all 0.2s ease; }
  .cta-primary:hover { background-color: #3DC8C5; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(40,170,167,0.35); }

  /* ── 5. TÉMOIGNAGES : grille (plus de carrousel). Cartes à hauteur égale,
         quote extensible → s'ajuste à la quantité de texte, signature en bas. ── */
  .testimonial-grid { display: grid; gap: 1.5rem; }
  @media (min-width: 768px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }
  .testimonial-card2 { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--teal); padding: 2rem 1.9rem; transition: box-shadow .3s var(--ease-out-expo), transform .3s var(--ease-out-expo); }
  .testimonial-card2:hover { box-shadow: 0 16px 40px rgba(15, 46, 40, .08); transform: translateY(-3px); }
  .testimonial-card2 blockquote { flex: 1; margin: 0 0 1.5rem; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.12rem; line-height: 1.55; color: var(--navy); border-left: 2px solid var(--ambre); padding-left: 1.1rem; }
  .testimonial-card2 figcaption { padding-top: 1.1rem; border-top: 1px solid var(--border); }
  .testimonial-name { font-size: .85rem; font-weight: 600; color: var(--navy-deep); }
  .testimonial-role { font-size: .75rem; color: var(--muted-foreground); margin-top: .2rem; }
  .testimonial-link { display: inline-block; margin-top: .9rem; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); text-decoration: none; transition: color .3s; }
  .testimonial-link:hover { color: var(--teal-deep); }

  /* ============================== */
  /* 3. REFONTE, retours cliente    */
  /* ============================== */

  /* ── ACCESSIBILITÉ : réduction des animations ── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
  }

  /* ── GRAS DE MISE EN VALEUR (positionnement & textes) ── */
  strong.accent { color: var(--teal); font-weight: 600; }

  /* ── FIL CONDUCTEUR : réapparition du quadrillage ── */
  .bg-grid-ghost { position: absolute; inset: 0; background-image: var(--grid-pattern); background-size: 64px 64px; opacity: .5; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); pointer-events: none; }

  /* ── PARALLAX LÉGER (hero) ── */
  .blob-float { animation: blobFloat 14s ease-in-out infinite; will-change: transform; }
  @keyframes blobFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-24px, 28px) scale(1.05); } }
  [data-parallax] { will-change: transform; }

  /* ── HERO : respiration éditoriale (plus d'air avant le titre) ── */
  #hero > .relative.mx-auto { padding-top: 128px; position: relative; z-index: 1; }
  @media (min-width: 768px) and (min-height: 760px) { #hero > .relative.mx-auto { padding-top: 168px; } }
  @media (min-width: 1024px) and (min-height: 820px) { #hero > .relative.mx-auto { padding-top: 200px; } }

  /* ── HERO : halo ambre, chaleur discrète en coin ── */
  #hero::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--ambre) 35%, transparent) 0%, transparent 70%);
    animation: ambreBreath 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
  }
  @keyframes ambreBreath { 0%, 100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }
  @media (prefers-reduced-motion: reduce) { #hero::after { animation: none; } }

  /* ── HERO : chiffres clés en ambre ── */
  #hero .stat-num { color: var(--teal); font-variant-numeric: tabular-nums; }

  /* ── HERO : repère de scroll, discret, aligné sur la charte teal ── */
  .hero-scroll-cue { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: .5rem; text-decoration: none; color: var(--muted-foreground); z-index: 1; }
  @media (min-width: 768px) and (min-height: 760px) { .hero-scroll-cue { display: flex; } }
  .hero-scroll-cue-label { font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; }
  .hero-scroll-cue-arrow { font-size: 1.05rem; color: var(--teal); transition: color .3s, transform .3s var(--ease-out-expo); animation: heroCueBob 2.4s ease-in-out infinite; }
  .hero-scroll-cue:hover .hero-scroll-cue-arrow { color: var(--teal-deep); transform: translateY(3px); }
  @keyframes heroCueBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
  @media (prefers-reduced-motion: reduce) { .hero-scroll-cue-arrow { animation: none; } }

  /* ── MISSION : respiration accrue ── */
  .mission-section { padding: 128px 56px; }
  @media (max-width: 768px) { .mission-section { padding: 72px 24px 80px; } }
  .mission-body { font-size: 30px; max-width: 780px; margin-left: auto; margin-right: auto; }
  @media (max-width: 768px) { .mission-body { font-size: 23px; } }

  /* ── ANCRES : compensation du header fixe (h-20 = 80px) ── */
  #apercu-cas-clients, #audit, #message { scroll-margin-top: 96px; }


  /* ── STAT HOVER (micro-interaction) ── */
  .stat-num { display: inline-block; transition: transform .35s var(--ease-out-expo), color .35s; }
  .stat-block:hover .stat-num, .stat-num:hover { transform: translateY(-3px); }

  /* ── CTA SECONDAIRE (Contactez-nous) ── */
  .cta-secondary { display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; padding: 14px 32px; font-size: .875rem; letter-spacing: .02em; border: 1px solid rgba(255,255,255,.4); color: var(--ivory); text-decoration: none; transition: all .3s var(--ease-out-expo); }
  .cta-secondary:hover { border-color: var(--teal-bright); color: var(--teal-bright); transform: translateY(-2px); }
  .cta-secondary.on-light { border-color: rgba(20,40,45,.2); color: var(--navy-deep); }
  .cta-secondary.on-light:hover { border-color: var(--teal); color: var(--teal); }
  .cta-primary .arrow, .cta-secondary .arrow { display: inline-block; transition: transform .3s var(--ease-out-expo); }
  .cta-primary:hover .arrow, .cta-secondary:hover .arrow { transform: translateX(5px); }

  /* ── CAS CLIENTS : carrousel avec navigation ── */
  .cc-eyebrow-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
  .cc-nav { display: flex; gap: .6rem; }
  .cc-nav-btn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--navy-deep); cursor: pointer; transition: all .3s var(--ease-out-expo); }
  .cc-nav-btn:hover:not(:disabled) { background: var(--teal); border-color: var(--teal); color: #fff; transform: translateY(-2px); }
  .cc-nav-btn:disabled { opacity: .35; cursor: default; }
  .cc-track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: none; }
  .cc-track::-webkit-scrollbar { display: none; }
  .cc-card { scroll-snap-align: start; flex: 0 0 auto; width: min(360px, 82vw); }
  .cc-card.cc-featured { width: min(560px, 88vw); }
  .cc-dots { display: flex; gap: .5rem; justify-content: center; margin-top: 2rem; }
  .cc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: all .3s; }
  .cc-dot.active { width: 22px; border-radius: 3px; background: var(--teal); }
  .cc-tag { display: inline-flex; align-items: center; gap: .5rem; font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--teal); }

  /* ── CAS CLIENTS : cartes avec visuel de couverture (différencie des autres
     encadrés, comble le "c'est vide"). Si l'image manque, un dégradé de
     marque (--cc) reste affiché à la place. ── */
  .cc-card--img { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); overflow: hidden; text-decoration: none; transition: transform .5s var(--ease-out-expo), box-shadow .5s var(--ease-out-expo), border-color .5s; }
  .cc-card--img:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: 0 24px 50px rgba(15, 46, 40, .12); }
  .cc-card-media { position: relative; display: block; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--cc, var(--teal)), var(--navy-deep)); overflow: hidden; }
  .cc-card-media > img:not(.cc-card-logo) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out-expo); }
  .cc-card--img:hover .cc-card-media > img:not(.cc-card-logo) { transform: scale(1.05); }
  .cc-card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 30, 25, .5), transparent 55%); }
  .cc-card-logo { position: absolute; left: 16px; bottom: 13px; z-index: 2; height: 24px; width: auto; max-width: 118px; filter: brightness(0) invert(1); opacity: .96; }
  .cc-card-body { display: block; padding: 1.6rem 1.6rem 1.75rem; }
  .cc-card-stat { display: block; margin-bottom: .5rem; }
  .cc-card-text { display: block; font-size: .85rem; line-height: 1.6; color: var(--muted-foreground); margin-bottom: 1rem; }
  .cc-card-text strong { color: var(--navy-deep); }
  .cc-card-link { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); transition: color .3s; }
  .cc-card--img:hover .cc-card-link { color: var(--teal-deep); }

  /* ── Visuel de couverture, page liste des cas clients : contour net, pas de débord ── */
  .cc-list-cover { display: block; width: 100%; margin: 0 0 1.75rem; height: 190px; object-fit: cover; object-position: center; background: #eef2f0; border: 1px solid var(--border); border-radius: 2px; }
  /* ── Visuel de couverture, page individuelle d'un cas client ── */
  .case-cover { display: block; width: 100%; margin-top: 2.5rem; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; background: #eef2f0; border: 1px solid var(--border); }

  /* ============================================================ */
  /* PROJETS — enrichissement des pages détail (Solutions → …)     */
  /* couleur, filigrane, encart aperçu, galerie livrables,         */
  /* résultats rythmés (chiffres · pictos · bullets).              */
  /* ============================================================ */
  .case-enrich { position: relative; overflow: hidden; }
  .case-enrich > .mx-auto { position: relative; z-index: 1; }
  .case-enrich::before {
    content: attr(data-watermark);
    position: absolute; right: -3%; top: 50%; transform: translateY(-50%);
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: clamp(7rem, 22vw, 19rem); line-height: 1;
    color: rgba(29, 138, 117, .06);
    pointer-events: none; user-select: none; white-space: nowrap; z-index: 0;
  }
  .case-enrich-blob {
    position: absolute; width: min(520px, 60vw); height: min(520px, 60vw);
    border-radius: 50%; background: radial-gradient(circle, rgba(61, 200, 197, .16), transparent 68%);
    filter: blur(6px); pointer-events: none; z-index: 0;
  }
  .case-enrich-blob--tl { top: -14%; left: -12%; }
  .case-enrich-blob--br { bottom: -18%; right: -10%; background: radial-gradient(circle, rgba(232, 177, 92, .14), transparent 68%); }

  /* titres de section renforcés */
  .case-h2 { font-family: 'Cormorant Garamond', serif; font-weight: 700;
    font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.08; letter-spacing: -.01em;
    color: var(--navy-deep); }
  .case-h2 .accent { color: var(--teal); font-style: italic; }
  .case-enrich .section-label { font-weight: 700; }

  /* Solutions — cartes légèrement rythmées */
  .case-solutions-grid { display: grid; gap: 1.1rem; }
  @media (min-width: 820px) { .case-solutions-grid { grid-template-columns: repeat(12, 1fr); } }
  .case-solution { background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--teal);
    border-radius: 4px; padding: 1.9rem 1.8rem; }
  @media (min-width: 820px) {
    .case-solution { grid-column: span 6; }
    .case-solution:last-child:nth-child(odd) { grid-column: span 12; }
  }
  .case-solution h3 { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.5rem;
    color: var(--navy-deep); margin-bottom: .7rem; }
  .case-solution p { font-size: .9rem; line-height: 1.65; color: var(--muted-foreground); }

  /* Encart « aperçu du projet » (avant Résultats) */
  .case-preview { display: grid; gap: 2rem; align-items: center;
    background: linear-gradient(135deg, #0c2a22, #0a231d); color: var(--ivory);
    border-radius: 8px; padding: clamp(1.6rem, 4vw, 3rem);
    box-shadow: 0 30px 60px rgba(10, 30, 25, .22); }
  @media (min-width: 880px) { .case-preview { grid-template-columns: 1.05fr 1fr; gap: 3rem; } }
  .case-preview-media { position: relative; border-radius: 6px; overflow: hidden; background: #eef2f0;
    aspect-ratio: 16 / 9; border: 1px solid rgba(255, 255, 255, .12); }
  .case-preview-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .case-preview-media.is-empty { display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .05); border: 1px dashed rgba(255, 255, 255, .3); }
  .case-preview-media.is-empty::after { content: 'Aperçu à venir'; font-size: .72rem; letter-spacing: .14em;
    text-transform: uppercase; color: color-mix(in oklab, var(--ivory) 65%, transparent); }
  .case-preview-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--teal-bright); }
  .case-preview h3 { font-family: 'Cormorant Garamond', serif; font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2rem); color: var(--ivory); margin: .55rem 0 .8rem; }
  .case-preview p { font-size: .93rem; line-height: 1.65; color: color-mix(in oklab, var(--ivory) 82%, transparent); }
  .case-preview-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.3rem; }
  .case-preview-tags span { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
    padding: .35rem .75rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
    color: color-mix(in oklab, var(--ivory) 80%, transparent); }

  /* Galerie livrables — emplacements à compléter avec les visuels */
  .case-deliverables { margin-top: 2.75rem; }
  .case-deliverables-head { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--teal-deep); margin-bottom: 1.1rem; }
  .case-deliverables-grid { display: grid; gap: 1rem; grid-template-columns: repeat(1, 1fr); }
  @media (min-width: 560px) { .case-deliverables-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 760px) { .case-deliverables-grid { grid-template-columns: repeat(3, 1fr); } }
  .case-slot { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden;
    background: #fff; border: 1px solid var(--border); }
  .case-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .case-slot--empty { border: 1px dashed color-mix(in oklab, var(--teal) 45%, var(--border));
    background: color-mix(in oklab, var(--teal) 5%, #fff); display: flex; align-items: center; justify-content: center; }
  .case-slot--empty::after { content: 'Visuel à venir'; font-size: .68rem; letter-spacing: .12em;
    text-transform: uppercase; color: color-mix(in oklab, var(--teal-deep) 70%, transparent); text-align: center; padding: 0 .5rem; }

  /* Résultats — rythme, chiffres, pictogrammes, bullet points */
  .case-results-grid { display: grid; gap: 1.15rem; }
  @media (min-width: 780px) { .case-results-grid { grid-template-columns: repeat(6, 1fr); align-items: start; } }
  .case-result { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--teal);
    border-radius: 4px; padding: 1.8rem 1.7rem; }
  @media (min-width: 780px) {
    .case-result { grid-column: span 2; }
    .case-result--wide { grid-column: span 3; }
    .case-result--full { grid-column: span 6; }
  }
  .case-result-ico { width: 44px; height: 44px; border-radius: 50%; margin-bottom: 1rem;
    background: color-mix(in oklab, var(--teal) 12%, transparent); color: var(--teal-deep);
    display: flex; align-items: center; justify-content: center; }
  .case-result-ico svg { width: 22px; height: 22px; }
  .case-result-num { display: block; font-family: 'Cormorant Garamond', serif; font-weight: 700;
    font-size: 2.7rem; line-height: 1; color: var(--teal); margin-bottom: .5rem; }
  .case-result h3 { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.3rem;
    color: var(--navy-deep); margin-bottom: .5rem; }
  .case-result p { font-size: .85rem; line-height: 1.6; color: var(--muted-foreground); }
  .case-result ul { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
  .case-result li { font-size: .84rem; line-height: 1.5; color: var(--muted-foreground); display: flex; gap: .55rem; }
  .case-result li::before { content: '—'; color: var(--teal); font-weight: 700; flex-shrink: 0; }

  /* ── ÉQUIPE : mise en page humaine et asymétrique ── */
  .team-row { display: grid; gap: 3rem; align-items: center; }
  @media (min-width: 1024px) { .team-row { grid-template-columns: 5fr 7fr; gap: 5rem; } .team-row.reverse { grid-template-columns: 7fr 5fr; } .team-row.reverse .team-photo { order: 2; } .team-row.reverse .team-text { order: 1; } }
  .team-photo-wrap { position: relative; }
  .team-photo { position: relative; z-index: 1; overflow: hidden; aspect-ratio: 4/5; border: 1px solid var(--teal); }
  .team-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out-expo), filter .8s; filter: grayscale(.15); }
  .team-row:hover .team-photo img { transform: scale(1.03); filter: grayscale(0); }
  .team-role-tag { position: absolute; z-index: 2; bottom: -14px; right: -14px; background: var(--teal); color: #fff; padding: 10px 18px; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
  .team-quote { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--navy); border-left: 2px solid var(--teal); padding-left: 1.5rem; }

  .collective-band { position: relative; background: var(--cream); border: 1px solid var(--border); padding: 56px 40px; }
  @media (min-width: 768px) { .collective-band { padding: 72px 64px; } }
  .collective-band-grid { display: grid; gap: 2.5rem; }
  @media (min-width: 900px) { .collective-band-grid { grid-template-columns: 1fr 1fr 1fr; } }


  /* ── CONTACT : distinction audit / message ── */
  .contact-option-card { position: relative; border: 1px solid var(--border); background: var(--card); padding: 32px; transition: all .4s var(--ease-out-expo); }
  .contact-option-card.is-primary { border-color: var(--teal); background: color-mix(in oklab, var(--teal) 5%, var(--card)); }
  .contact-option-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(15,46,40,.08); }

  /* ── FOOTER SIMPLIFIÉ ── */
  .site-footer { border-top: 1px solid var(--border); background: var(--navy-deep); color: var(--ivory); }
  .site-footer-inner { max-width: 80rem; margin: 0 auto; padding: 64px 24px 40px; display: grid; gap: 3rem; }
  @media (min-width: 768px) { .site-footer-inner { padding: 72px 40px 40px; grid-template-columns: 1.3fr 1fr; align-items: start; } }
  .site-footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .site-footer-brand img { filter: brightness(0) invert(1); opacity: .92; width: auto; max-width: 240px; flex-shrink: 0; }
  .site-footer-tagline { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.15rem; line-height: 1.5; color: rgba(255,255,255,.75); max-width: 30rem; }
  .site-footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
  .site-footer-heading { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-bright); margin-bottom: 1rem; }
  .site-footer-col { display: flex; flex-direction: column; gap: .65rem; }
  .site-footer-link { color: rgba(255,255,255,.7); font-size: .875rem; text-decoration: none; transition: color .3s; width: fit-content; }
  .site-footer-link:hover { color: var(--teal-bright); }
  .site-footer-copy { max-width: 80rem; margin: 0 auto; padding: 24px 24px 32px; border-top: 1px solid rgba(255,255,255,.08); font-size: .72rem; color: rgba(255,255,255,.4); }
  @media (min-width: 768px) { .site-footer-copy { padding: 24px 40px 32px; } }

  /* ================================================================ */
  /* 4. CORRECTIF, classes Tailwind absentes de l'export statique.     */
  /*    Constat : cet export ne contient AUCUNE variante :hover,        */
  /*    :focus ni group-hover (16 classes utilisées partout dans le     */
  /*    site (cartes, boutons, liens) sans exception), ainsi qu'une   */
  /*    partie des utilitaires d'espacement et de grille responsive.    */
  /*    Résultat concret avant ce correctif : aucun effet de survol,    */
  /*    de lift, d'ombre ou de focus ne s'appliquait nulle part sur le  */
  /*    site déjà en ligne, un facteur probable du ressenti « statique */
  /*    et froid » signalé par la cliente. Complété ici à l'identique   */
  /*    des valeurs Tailwind standard (spacing unit = .25rem).          */
  /* ================================================================ */

  /* ── ÉTATS INTERACTIFS (hover / focus / group-hover) ── */
  .hover\:text-teal:hover { color: var(--teal); }
  .hover\:text-teal-deep:hover { color: var(--teal-deep); }
  .hover\:text-teal-bright:hover { color: var(--teal-bright); }
  .hover\:text-ivory:hover { color: var(--ivory); }
  .hover\:border-teal:hover { border-color: var(--teal); }
  .hover\:border-teal-bright:hover { border-color: var(--teal-bright); }
  .hover\:bg-cream:hover { background-color: var(--cream); }
  .hover\:bg-ivory:hover { background-color: var(--ivory); }
  .hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
  .hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
  .hover\:-translate-y-1:hover { transform: translateY(calc(var(--spacing) * -1)); }
  .hover\:-translate-y-2:hover { transform: translateY(calc(var(--spacing) * -2)); }
  .group:hover .group-hover\:text-teal { color: var(--teal); }
  .group:hover .group-hover\:text-teal-deep { color: var(--teal-deep); }
  .focus\:border-teal:focus { border-color: var(--teal); }
  .focus\:outline-none:focus { outline: none; }
  .underline { text-decoration-line: underline; }

  /* ── ESPACEMENTS MANQUANTS (échelle Tailwind, unit = .25rem) ── */
  .mb-2 { margin-bottom: .5rem; }
  .mb-14 { margin-bottom: 3.5rem; }
  .mb-16 { margin-bottom: 4rem; }
  .mt-14 { margin-top: 3.5rem; }
  .pt-2 { padding-top: .5rem; }
  .pt-10 { padding-top: 2.5rem; }
  .pt-40 { padding-top: 10rem; }
  .pb-12 { padding-bottom: 3rem; }
  .pb-16 { padding-bottom: 4rem; }
  .pb-20 { padding-bottom: 5rem; }
  .pl-0 { padding-left: 0; }
  .py-0 { padding-top: 0; padding-bottom: 0; }
  .py-16 { padding-top: 4rem; padding-bottom: 4rem; }
  .py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .gap-12 { gap: 3rem; }
  .gap-x-8 { column-gap: 2rem; }
  .gap-y-2 { row-gap: .5rem; }
  .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: .5rem; }
  .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: .75rem; }
  .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
  .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }

  /* ── LEADING / TAILLE MANQUANTS ── */
  .leading-\[1\.08\] { line-height: 1.08; }
  .leading-\[1\.1\] { line-height: 1.1; }
  .leading-\[1\.15\] { line-height: 1.15; }
  .leading-snug { line-height: 1.375; }

  /* ── COULEURS AVEC OPACITÉ MANQUANTES ── */
  .text-ivory\/50 { color: color-mix(in oklab, var(--ivory) 50%, transparent); }
  .text-ivory\/65 { color: color-mix(in oklab, var(--ivory) 65%, transparent); }
  .text-ivory\/70 { color: color-mix(in oklab, var(--ivory) 70%, transparent); }
  .border-teal\/40 { border-color: color-mix(in oklab, var(--teal) 40%, transparent); }

  /* ── RESPONSIVE : sm (min-width:40rem) ── */
  @media (min-width: 40rem) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* ── RESPONSIVE : md (min-width:48rem) ── */
  @media (min-width: 48rem) {
    .md\:gap-16 { gap: 4rem; }
    .md\:justify-self-end { justify-self: end; }
    .md\:p-8 { padding: 2rem; }
    .md\:pb-16 { padding-bottom: 4rem; }
    .md\:pb-20 { padding-bottom: 5rem; }
    .md\:pb-24 { padding-bottom: 6rem; }
    .md\:pb-32 { padding-bottom: 8rem; }
    .md\:pt-48 { padding-top: 12rem; }
    .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
    .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
    .md\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
    .md\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
    .md\:py-36 { padding-top: 9rem; padding-bottom: 9rem; }
    .md\:text-base { font-size: 1rem; line-height: 1.5rem; }
    .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  }

  /* ── RESPONSIVE : lg (min-width:64rem) ── */
  @media (min-width: 64rem) {
    .lg\:col-span-4 { grid-column: span 4 / span 4; }
    .lg\:col-span-5 { grid-column: span 5 / span 5; }
    .lg\:col-span-7 { grid-column: span 7 / span 7; }
    .lg\:col-span-8 { grid-column: span 8 / span 8; }
    .lg\:gap-10 { gap: 2.5rem; }
    .lg\:gap-16 { gap: 4rem; }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .lg\:text-7xl { font-size: 4.5rem; line-height: 1; }
  }

  /* ============================== */
  /* 5. PAGES MASTERMIND & STARTUP   */
  /* ============================== */

  /* ── TEAL BRUME : fond teinté clair pour panneaux dédiés ── */
  .teal-brume { background: color-mix(in oklab, var(--teal) 7%, var(--ivory)); }
  .teal-brume-border { border: 1px solid color-mix(in oklab, var(--teal) 20%, transparent); }

  /* ── LISTE À PUCES CERCLE (format / comment ça marche) ── */
  .icon-list { display: flex; flex-direction: column; gap: 0; }
  .icon-list-item { display: grid; grid-template-columns: 56px 1fr; gap: 1.75rem; padding: 2rem 0; border-top: 1px solid var(--border); }
  .icon-list-item:last-child { border-bottom: 1px solid var(--border); }
  .icon-circle { width: 56px; height: 56px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; flex-shrink: 0; }
  .icon-list-item h3 { margin-bottom: .5rem; }

  /* ── CHECKLIST (pour qui) ── */
  .check-list { display: flex; flex-direction: column; gap: 1.25rem; }
  .check-list li { display: flex; align-items: flex-start; gap: 1rem; list-style: none; }
  .check-list li::before { content: '✓'; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in oklab, var(--teal) 14%, transparent); color: var(--teal); font-size: .8rem; display: flex; align-items: center; justify-content: center; margin-top: 2px; }

  /* ── BLOC ACCENT GAUCHE (pourquoi cognizance) ── */
  .accent-block { border-left: 3px solid var(--teal); padding: .25rem 0 .25rem 1.75rem; }

  /* ── PANNEAU CHIFFRE (le gap) ── */
  .stat-split { display: grid; gap: 2.5rem; align-items: stretch; }
  @media (min-width: 900px) { .stat-split { grid-template-columns: 1.2fr 1fr; gap: 0; } }
  .stat-split-figure { display: flex; flex-direction: column; justify-content: center; padding: 3rem; text-align: center; }
  .stat-split-figure .big-num { font-family: 'Cormorant Garamond', serif; font-size: 4rem; line-height: 1.05; color: var(--teal); }
  @media (min-width: 768px) { .stat-split-figure .big-num { font-size: 5rem; } }

  /* ── TIMELINE HORIZONTALE (format startup) ── */
  .h-timeline { display: grid; gap: 2rem; position: relative; }
  @media (min-width: 900px) { .h-timeline { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
  .h-timeline-step { position: relative; padding-top: 1.75rem; }
  .h-timeline-step::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--border); }
  .h-timeline-step::after { content: ''; position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); }
  .h-timeline-step .h-timeline-label { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); margin-bottom: .5rem; display: block; }

  /* ── GRILLE EXPERTISES NUMÉROTÉE (variante bordure encre) ── */
  .expertise-tile { background: var(--card); border: 1px solid var(--border); border-top: 2px solid var(--navy-deep); padding: 2rem; transition: all .4s var(--ease-out-expo); }
  .expertise-tile:hover { border-top-color: var(--teal); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(15,46,40,.06); }

  /* ── VERBATIM PLACEHOLDER (exemples à remplacer) ── */

  /* ── NOTE INTERNE (mentions légales : champs en attente d'info client) ── */
  .legal-notice { border-left: 3px solid var(--teal); background: var(--cream); padding: 20px 24px; }
  .legal-notice-label { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 8px; }
  .legal-notice p:last-child { font-size: .9rem; color: var(--navy); margin: 0; }

  /* ── BADGE SECTEUR (cas clients) : catégorie mise en avant, cf. Saegus ── */
  .sector-badge { display: inline-block; border: 1px solid color-mix(in oklab, var(--teal) 30%, transparent); background: color-mix(in oklab, var(--teal) 6%, transparent); padding: 5px 12px; border-radius: 3px; }
  .results-count { display: inline-flex; align-items: center; gap: .5em; }
  .results-count strong { color: var(--teal-deep); font-weight: 700; }

  /* ============================== */
  /* 6. NAV, "Programmes" (MasterMind / Startups) — deux encadrés carrés, couleur dédiée par programme */
  /* ============================== */

  .nav-programs-pair { display: flex; align-items: center; gap: 2px; }
  .nav-program-box { display: inline-flex; align-items: center; font-size: .78rem; font-weight: 600; letter-spacing: .02em; padding: 9px 18px; border-radius: 0; text-decoration: none; transition: transform .25s var(--ease-out-expo), background-color .25s, box-shadow .25s; }
  .nav-program-box--mastermind { background: var(--teal); color: #fff; }
  .nav-program-box--mastermind:hover { background: var(--teal-deep); transform: translateY(-2px); }
  .nav-program-box--startup { background: var(--navy-deep); color: var(--teal-bright); }
  .nav-program-box--startup:hover { background: #000; transform: translateY(-2px); }

  /* ── mobile : mêmes encadrés, empilés pleine largeur ── */
  .mobile-programs-pair { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 14px; }
  .nav-program-box--mobile { width: 100%; justify-content: center; padding: 14px 16px; font-size: .85rem; }

  /* ============================================================ */
  /* 7. ACCUEIL — MÉTHODE v5 : fond VERT retrouvé + encadrés BLANCS,  */
  /*    disposés HORIZONTALEMENT. Étape 1 ouverte ; une flèche ouvre  */
  /*    l'étape 2, puis l'étape 3. Sans JS / mobile / reduced-motion :*/
  /*    les 3 encadrés sont ouverts (cf. main.js).                    */
  /* ============================================================ */

  .method-v5 { background: linear-gradient(165deg, #0c2a22 0%, #10362c 45%, #0a231d 100%); color: var(--ivory); }
  .method-v5-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .method-v5-bg::before { content: ''; position: absolute; top: -30%; left: 28%; width: 55vw; height: 55vw; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, #1FA588 20%, transparent), transparent 66%); filter: blur(10px); animation: methodBlob 34s ease-in-out infinite; }
  @keyframes methodBlob { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.12); } }
  @media (prefers-reduced-motion: reduce) { .method-v5-bg::before { animation: none; } }

  .method-v5-accent { color: var(--teal-bright); }
  .method-v5-intro { color: color-mix(in oklab, var(--ivory) 78%, transparent); }
  .method-v5-intro strong { color: var(--ivory); font-weight: 600; }

  .method-v5-steps { position: relative; display: grid; gap: 1.75rem; }
  @media (min-width: 900px) { .method-v5-steps { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; align-items: stretch; } }

  .method-v5-step { position: relative; height: 100%; background: #fff; border-radius: 6px; padding: 2rem 1.9rem 2.2rem; box-shadow: 0 18px 44px rgba(0, 0, 0, .22); transition: opacity .4s var(--ease-out-expo); }
  .method-v5-num { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--teal); color: #fff; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.35rem; margin-bottom: 1rem; position: relative; z-index: 1; }
  .method-v5-step h3 { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.5rem; line-height: 1.15; color: var(--teal-deep); margin-bottom: .6rem; }
  @media (min-width: 768px) { .method-v5-step h3 { font-size: 1.8rem; } }
  .method-v5-body > p { font-size: .9rem; line-height: 1.6; color: var(--muted-foreground); }
  .method-v5-body > p strong { color: var(--teal); font-weight: 700; }
  .method-v5-list { list-style: none; margin: 1.1rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .5rem; }
  .method-v5-list li { font-size: .82rem; line-height: 1.5; color: var(--muted-foreground); display: flex; gap: .6rem; }
  .method-v5-list li::before { content: '—'; flex-shrink: 0; color: var(--teal); font-weight: 700; }

  /* état fermé (ajouté par main.js pour les étapes 2 & 3) */
  .method-v5-step.is-closed { opacity: .5; }
  .method-v5-step.is-closed .method-v5-body { display: none; }
  .method-v5-step.is-closed h3 { margin-bottom: 0; }

  /* flèche « ouvrir l'étape suivante » — désactivée : les 3 encadrés sont toujours ouverts */
  .method-v5-next { display: none !important; }

  .method-v5-cta-row { margin-top: 3rem; text-align: center; }
  .method-v5-cta { display: inline-flex; align-items: center; gap: .5rem; background: #fff; color: var(--teal-deep); font-weight: 700; font-size: .95rem; padding: 14px 30px; border-radius: 999px; text-decoration: none; transition: color .3s, transform .3s var(--ease-out-expo), box-shadow .3s; }
  .method-v5-cta:hover { color: #0c2a22; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0, 0, 0, .28); }
  .method-v5-cta .arrow { display: inline-block; transition: transform .3s var(--ease-out-expo); }
  .method-v5-cta:hover .arrow { transform: translateX(4px); }

  /* ============================================================ */
  /* 8. PAGE EXPERTISES — sections empilées plein cadre.           */
  /*    Chaque expertise = un panneau qui se fixe puis se fait     */
  /*    recouvrir par le suivant au défilement (« la page qui      */
  /*    disparaît »). Un FOND différent par expertise (--exp-bg) ; */
  /*    accents uniformes teal (plus de code couleur « IA »).      */
  /* ============================================================ */

  .exp-page { background-color: #0b241f; color: var(--ivory); }
  .exp-page .site-footer--compact { background: #071a16; }

  /* ── Hero de page ── */
  .exp-hero { position: relative; padding: 10rem 0 4rem; overflow: hidden; background: linear-gradient(180deg, #0b241f, #103a31); }
  @media (min-width: 768px) { .exp-hero { padding: 12rem 0 5rem; } }
  .exp-hero h1 { color: var(--ivory); font-weight: 400; }
  .exp-hero p { color: color-mix(in oklab, var(--ivory) 78%, transparent); }
  .exp-hero .section-label { color: var(--teal-bright); }
  .exp-hero .section-label::before { background: var(--teal-bright); }
  .exp-hero .italic { color: var(--teal-bright); font-style: italic; }
  .exp-hero strong.accent { color: var(--teal-bright); }

  /* ── Pile de panneaux ── */
  .exp-stack { position: relative; }
  .exp-panel { position: sticky; top: 0; min-height: 82vh; display: flex; align-items: center; padding: 6rem 0; background: var(--exp-bg, #0c2f27); color: var(--ivory); border-top: 1px solid rgba(255, 255, 255, .08); }
  .exp-panel::before { content: attr(data-ghost); position: absolute; right: 4%; bottom: -.12em; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22vw; line-height: 1; color: rgba(255, 255, 255, .045); pointer-events: none; user-select: none; white-space: nowrap; }
  @media (max-width: 900px) {
    .exp-panel { position: static; min-height: 0; padding: 4.5rem 0; }
    .exp-panel::before { font-size: 32vw; right: -2%; }
  }

  .exp-panel-inner { display: grid; gap: 2.5rem; width: 100%; position: relative; z-index: 1; }
  @media (min-width: 1024px) { .exp-panel-inner { grid-template-columns: 4fr 8fr; gap: 4rem; align-items: start; } }

  .exp-block-label { display: inline-flex; align-items: center; gap: .7rem; font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-bright); margin-bottom: 1.4rem; }
  .exp-block-label::before { content: ''; width: 30px; height: 1px; background: var(--teal-bright); }
  .exp-panel h2 { color: var(--ivory); font-weight: 400; margin-bottom: 1.1rem; }
  .exp-block-intro { color: color-mix(in oklab, var(--ivory) 78%, transparent); }
  .exp-block-quote { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--teal-bright); border-left: 2px solid color-mix(in oklab, var(--teal-bright) 55%, transparent); padding-left: 1.1rem; margin: 1.25rem 0; }
  .exp-block-cta { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.9rem; font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--ivory); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--teal-bright) 60%, transparent); padding-bottom: .3rem; transition: color .3s, border-color .3s; }
  .exp-block-cta:hover { color: var(--teal-bright); border-color: var(--teal-bright); }
  .exp-block-cta .arrow { transition: transform .3s var(--ease-out-expo); }
  .exp-block-cta:hover .arrow { transform: translateX(4px); }

  .exp-cards { display: grid; gap: 1.25rem; }
  @media (min-width: 640px) { .exp-cards { grid-template-columns: repeat(2, 1fr); } }
  .exp-card { position: relative; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); padding: 1.7rem 1.55rem; border-radius: 4px; transition: transform .45s var(--ease-out-expo), background-color .45s; }
  .exp-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .09); }
  .exp-card h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.15rem; color: var(--ivory); margin-bottom: .55rem; }
  .exp-card p { font-size: .85rem; line-height: 1.6; color: color-mix(in oklab, var(--ivory) 66%, transparent); }

  /* ── CTA final : fond sombre ── */
  .exp-page .cta-final-dark { background: #071a16; }

  /* ── EXPERTISES : rappel « Notre méthode » — section fixe, sans animation ── */
  .method-v5--flat { background: #0a231d; border-top: 1px solid rgba(255,255,255,.08); }
  .method-v5--flat .method-v5-steps { align-items: stretch; }
  .method-v5--flat .method-v5-step { transition: none; }
  .method-v5--flat .method-v5-step h3 { margin-bottom: .6rem; }

  /* ============================================================ */
  /* 9. ACCUEIL — HÉRO RÉAGENCÉ                                    */
  /*    - titre : effet "shimmer" (portage CSS à l'identique du   */
  /*      composant React shimmer-text : balayage d'un dégradé    */
  /*      clair clippé sur le texte, sweep -100%→250%, 1.5s,      */
  /*      delay 1.5s, pause 1.5s, ease linear, en boucle).        */
  /*    - chiffres retirés du héros → description mise en avant   */
  /*      avec un mot qui alterne en couleur.                     */
  /*    - chiffres déplacés dans une section dédiée (voir 10).    */
  /* ============================================================ */

  .shimmer-text {
    --shimmer-contrast: rgba(255, 255, 255, .6);
    -webkit-text-fill-color: transparent;
    background-color: currentColor;
    background-image: linear-gradient(to right, currentColor 0%, var(--shimmer-contrast) 40%, var(--shimmer-contrast) 60%, currentColor 100%);
    -webkit-background-clip: text;
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 50% 200%;
    background-position: 250% 0;
    animation: shimmerText 3s linear 1.5s infinite;
  }
  @keyframes shimmerText {
    0%   { background-position: -100% 0; }
    50%  { background-position: 250% 0; }
    100% { background-position: 250% 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .shimmer-text { animation: none; -webkit-text-fill-color: currentColor; background-image: none; }
  }

  /* ── HÉRO : description désormais élément focal ── */
  /* description héros : graisse légère pour bien la distinguer du titre serif */
  .hero-lede { font-size: 1.15rem; font-weight: 300; max-width: 620px; color: var(--navy); }
  @media (min-width: 768px) { .hero-lede { font-size: 1.42rem; line-height: 1.6; } }
  .hero-lede strong.accent { font-weight: 600; }
  /* le mot qui alterne : un seul mot rendu en flux normal (display:inline),
     les autres display:none → espacement strictement identique aux autres mots */
  .hero-lede .hero-word-cycle { display: inline; position: static; vertical-align: baseline; }
  /* tous les mots du cycle : même couleur, plus marquée que le reste de la phrase */
  .hero-lede .hero-word,
  .hero-lede .hero-word:nth-child(2),
  .hero-lede .hero-word:nth-child(3) { display: none; position: static; opacity: 1; white-space: normal; color: var(--teal-deep); font-weight: 700; }
  .hero-lede .hero-word.is-active { display: inline-block; animation: heroWordSwap .4s var(--ease-out-expo) both; }
  @keyframes heroWordSwap { from { opacity: 0; transform: translateY(.18em); } to { opacity: 1; transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) { .hero-lede .hero-word.is-active { animation: none; } }

  /* ============================================================ */
  /* 10. ACCUEIL — SECTION "CHIFFRES CLÉS"                         */
  /*     Bandeau sombre dédié, juste avant les cas clients :      */
  /*     compteurs animés (logique main.js réutilisée via         */
  /*     .stat-num) + liseré teal qui se trace sous chaque nombre */
  /*     + halo flottant.                                          */
  /* ============================================================ */

  .stats-band-grid { display: grid; gap: 2.25rem; }
  @media (min-width: 768px) { .stats-band-grid { grid-template-columns: repeat(3, 1fr); gap: 0; } }
  .stat-card { position: relative; padding: 1.25rem 0; }
  @media (min-width: 768px) {
    .stat-card { padding: .5rem 3rem; }
    .stat-card + .stat-card { border-left: 1px solid rgba(255, 255, 255, .14); }
    .stat-card:first-child { padding-left: 0; }
  }
  .stat-card-num { font-size: 3rem; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  @media (min-width: 768px) { .stat-card-num { font-size: 4.25rem; } }
  .stat-card-label { margin-top: .9rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: color-mix(in oklab, var(--ivory) 62%, transparent); max-width: 24ch; }

  /* ── variante centrée (accueil) : un accent de couleur par chiffre (--sc)
     pour bien les distinguer sur le fond sombre ── */
  .stats-band--center .stats-band-grid { justify-items: center; }
  .stats-band--center .stat-card { text-align: center; padding: 1.25rem 1.5rem; }
  @media (min-width: 768px) {
    .stats-band--center .stat-card { padding: .5rem 2.5rem; }
    .stats-band--center .stat-card + .stat-card { border-left: 1px solid rgba(255, 255, 255, .12); }
  }
  .stats-band--center .stat-card-num { color: var(--sc, var(--teal-bright)); }
  .stats-band--center .stat-card-num::after { content: ''; display: block; width: 40px; height: 3px; margin: .85rem auto 0; background: var(--sc, var(--teal-bright)); border-radius: 2px; }
  .stats-band--center .stat-card-label { margin: .8rem auto 0; color: color-mix(in oklab, var(--ivory) 74%, transparent); }

  /* CTA sous les chiffres : fond vert, texte blanc */
  .stats-band-cta-row { text-align: center; margin-top: 3.5rem; }
  .stats-band-cta { display: inline-flex; align-items: center; gap: .55rem; background: var(--teal); border: 1px solid var(--teal); color: #ffffff; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 14px 30px; border-radius: 999px; text-decoration: none; transition: background-color .3s, border-color .3s, transform .3s var(--ease-out-expo); }
  .stats-band-cta:hover { background: var(--teal-deep); border-color: var(--teal-deep); transform: translateY(-2px); }
  .stats-band-cta .arrow { display: inline-block; transition: transform .3s var(--ease-out-expo); }
  .stats-band-cta:hover .arrow { transform: translateX(4px); }

  /* ============================================================ */
  /* 11. CTA AUDIT ≠ FOOTER                                        */
  /*     - la section "Réservez votre audit" prend un fond vert    */
  /*       dégradé (distinct du footer) et une hauteur réduite.    */
  /*     - le footer devient compact : logo + @cognizance +        */
  /*       liens en petit + "© 2026 Cognizance", nettement séparé. */
  /* ============================================================ */

  .cta-audit { background: linear-gradient(160deg, #124034 0%, #0e332a 45%, #16493c 100%); border-top: 1px solid rgba(255, 255, 255, .06); }

  .site-footer--compact { background: #071a16; border-top: 1px solid rgba(61, 200, 197, .22); }
  .site-footer--compact .site-footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding: 36px 40px; grid-template-columns: none; max-width: 80rem; }
  .site-footer--compact .site-footer-brand { flex-direction: row; align-items: center; gap: .75rem; }
  .site-footer--compact .site-footer-brand img { height: 62px; width: auto; max-width: 260px; filter: brightness(0) invert(1); opacity: .95; }
  .site-footer--compact .site-footer-handle { display: none; }
  .site-footer--compact .site-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.4rem; margin-left: auto; }
  .site-footer--compact .site-footer-links a { font-size: .78rem; color: rgba(255, 255, 255, .58); text-decoration: none; transition: color .3s; }
  .site-footer--compact .site-footer-links a:hover { color: var(--teal-bright); }
  .site-footer--compact .site-footer-mail { font-size: .78rem; color: rgba(255, 255, 255, .58); }
  .site-footer--compact .site-footer-lk-link { display: inline-flex; align-items: center; }
  .site-footer--compact .site-footer-lk { height: 17px; width: 17px; opacity: .62; transition: opacity .3s; }
  .site-footer--compact .site-footer-lk-link:hover .site-footer-lk { opacity: 1; }
  .site-footer--compact .site-footer-copy { max-width: none; margin: 0; padding: 13px 40px 18px; border-top: 1px solid rgba(255, 255, 255, .06); font-size: .7rem; color: rgba(255, 255, 255, .38); }
  .site-footer--compact .site-footer-blurb { max-width: 80rem; margin: 0 auto; padding: 20px 40px 4px;
    border-top: 1px solid rgba(255, 255, 255, .06); font-size: .82rem; line-height: 1.65; color: rgba(255, 255, 255, .5); }
  .site-footer--compact .site-footer-blurb + .site-footer-copy { border-top: 0; }
  @media (max-width: 768px) {
    .site-footer--compact .site-footer-inner { padding: 22px 24px; }
    .site-footer--compact .site-footer-links { margin-left: 0; width: 100%; }
    .site-footer--compact .site-footer-copy { padding: 12px 24px 18px; }
    .site-footer--compact .site-footer-blurb { padding: 18px 24px 4px; }
  }


  /* ============================================================ */
  /* 12. PAGE À PROPOS — emplacements images + animations légères  */
  /* ============================================================ */

  /* Emplacements images (placeholders) : l'image apparaît dès que le fichier
     existe (onload), sinon un cadre pointillé « Visuel à venir » reste affiché. */
  .img-slot { position: relative; display: block; overflow: hidden; border-radius: 2px; background: color-mix(in oklab, var(--teal) 4%, var(--cream)); }
  .img-slot::after { content: attr(data-hint); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-foreground); border: 1px dashed color-mix(in oklab, var(--teal) 32%, var(--border)); pointer-events: none; }
  .img-slot img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
  .img-slot.is-filled::after { display: none; }
  .img-slot--wide { aspect-ratio: 16 / 7; }
  .img-slot--tall { aspect-ratio: 4 / 5; }
  @media (max-width: 767px) { .img-slot--wide { aspect-ratio: 16 / 10; } .img-slot--tall { aspect-ratio: 4 / 4; } }
  .reveal.img-slot { transform: translateY(28px) scale(.985); }
  .reveal.img-slot.visible { transform: none; }

  /* Méthode À propos : numéro en contour qui se remplit à l'apparition */
  .apropos-num { color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklab, var(--teal) 55%, transparent); transition: color .9s var(--ease-out-expo) .15s, -webkit-text-stroke-color .9s var(--ease-out-expo) .15s; }
  .reveal.visible .apropos-num { color: var(--teal); -webkit-text-stroke-color: transparent; }
  @media (prefers-reduced-motion: reduce) { .apropos-num { color: var(--teal); -webkit-text-stroke-color: transparent; } }


  /* ============================================================ */
  /* 13. PAGES MASTERMIND & STARTUPS — refonte immersive          */
  /*     Deux identités distinctes sur les mêmes fondations       */
  /*     (header, footer, .reveal, curseur, boutons magnétiques). */
  /*     MasterMind = cohorte éditoriale chaude : accent AMBRE     */
  /*       sur fond vert profond, sérif, accordéon de thématiques. */
  /*     Startups   = tempo cinétique : accent TEAL ÉLECTRIQUE,    */
  /*       libellés mono, signal animé, timeline + tuiles.         */
  /* ============================================================ */

    /* ─────────────  13.A  MASTERMIND  ─────────────
     Page CLAIRE qui respire : héros vert dramatique, puis corps
     lumineux (dégradés doux, cartes blanches colorées), et deux
     blocs verts de respiration (partenariats + CTA).
     Accent signature : AMBRE. Emplacements images à remplir plus tard. */

  .mm-page {
    --mm: #E0A24E;
    --mm-lt: #F1C889;
    --mm-deep: #a9691f;
    /* fond plat : les dégradés lourds + background-attachment:fixed (repaint à
       chaque frame de scroll) ont été retirés — la profondeur passe désormais
       par les sections elles-mêmes. */
    background: var(--ivory);
    color: var(--navy-deep);
  }
  .mm-page .site-footer--compact { background: #061713; }

  .mm-eyebrow {
    display: inline-flex; align-items: center; gap: .7rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
    color: var(--mm-deep);
  }
  .mm-eyebrow::before { content: ''; width: 32px; height: 1px; background: currentColor; }
  .mm-eyebrow--center { justify-content: center; }
  .mm-eyebrow--center::after { content: ''; width: 32px; height: 1px; background: currentColor; }

  /* ── HERO (reste vert, volontairement contrasté avec le corps clair) ── */
  .mm-hero { position: relative; overflow: hidden; padding: 11rem 0 5rem; min-height: 90vh; display: flex; align-items: center;
    background: linear-gradient(165deg, #0c2a22 0%, #10362c 48%, #0a231d 100%); color: var(--ivory); }
  @media (min-width: 768px) { .mm-hero { padding: 13rem 0 6rem; } }
  .mm-hero-bg { position: absolute; inset: 0; pointer-events: none; }
  .mm-hero-blob { position: absolute; border-radius: 50%; filter: blur(30px); opacity: .5;
    will-change: transform; transform: translateZ(0); }
  /* mmDrift = translation seule (pas de scale : éviter le re-raster du flou à chaque frame) */
  .mm-hero-blob--1 { width: 40vw; height: 40vw; left: -8vw; top: -12vw; background: radial-gradient(circle, color-mix(in oklab, var(--mm) 42%, transparent), transparent 66%); animation: mmDrift 44s ease-in-out infinite; }
  .mm-hero-blob--2 { width: 36vw; height: 36vw; right: -8vw; bottom: -16vw; background: radial-gradient(circle, color-mix(in oklab, var(--teal-bright) 36%, transparent), transparent 68%); animation: mmDrift 56s ease-in-out infinite reverse; }
  .mm-hero-grid { position: absolute; inset: 0; background-image: var(--grid-pattern); background-size: 64px 64px; opacity: .22;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 78%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 78%); }
  @keyframes mmFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(38px, -30px) scale(1.12); } }
  @keyframes mmDrift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(34px, -26px, 0); } }
  @media (prefers-reduced-motion: reduce) { .mm-hero-blob { animation: none; } }

  .mm-hero-inner { position: relative; display: grid; gap: 3rem; align-items: center; width: 100%; }
  @media (min-width: 1024px) { .mm-hero-inner { grid-template-columns: 1.05fr .95fr; gap: 4.5rem; } }

  .mm-hero-text > * { animation: mmHeroIn .8s var(--ease-out-expo) both; }
  .mm-hero-text > *:nth-child(1) { animation-delay: .05s; }
  .mm-hero-text > *:nth-child(2) { animation-delay: .14s; }
  .mm-hero-text > *:nth-child(3) { animation-delay: .23s; }
  .mm-hero-text > *:nth-child(4) { animation-delay: .32s; }
  @keyframes mmHeroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .mm-hero-text > * { animation: none; } }

  .mm-hero-title {
    font-family: 'Cormorant Garamond', serif; font-weight: 600; color: var(--ivory);
    font-size: clamp(2.4rem, 5.4vw, 4.3rem); line-height: 1.05; letter-spacing: -.01em;
    margin: 1.6rem 0 1.4rem;
  }
  .mm-underline { position: relative; white-space: nowrap; font-style: italic; color: var(--mm); }
  .mm-underline::after { content: ''; position: absolute; left: 0; right: 0; bottom: .06em; height: .13em; background: color-mix(in oklab, var(--mm) 55%, transparent); border-radius: 2px; transform: scaleX(0); transform-origin: left; animation: mmUnderline 1s var(--ease-out-expo) .85s forwards; }
  @keyframes mmUnderline { to { transform: scaleX(1); } }
  @media (prefers-reduced-motion: reduce) { .mm-underline::after { transform: scaleX(1); animation: none; } }
  .mm-hero-lede { font-size: 1.12rem; line-height: 1.7; color: color-mix(in oklab, var(--ivory) 88%, transparent); max-width: 40ch; }
  @media (min-width: 768px) { .mm-hero-lede { font-size: 1.24rem; } }
  .mm-hero-sub { margin-top: 1.1rem; font-size: .98rem; line-height: 1.75; color: color-mix(in oklab, var(--ivory) 64%, transparent); max-width: 48ch; }
  .mm-hero-sub strong { color: color-mix(in oklab, var(--ivory) 92%, transparent); font-weight: 600; }

  .mm-hero-figure { position: relative; }
  .mm-hero-frame { position: relative; overflow: hidden; border-radius: 6px; aspect-ratio: 4 / 4.6; box-shadow: 0 40px 90px rgba(0, 0, 0, .45); }
  .mm-hero-frame::before { content: ''; position: absolute; inset: 0; z-index: 2; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); pointer-events: none; }
  .mm-hero-frame img { width: 100%; height: 100%; object-fit: cover; }
  .mm-hero-figure::after { content: ''; position: absolute; top: 18px; left: 18px; right: -18px; bottom: -18px; border: 1px solid var(--mm); z-index: -1; border-radius: 6px; }
  @media (max-width: 1023px) { .mm-hero-figure::after { right: 0; bottom: -14px; } }
  .mm-hero-figcaption { margin-top: 1.5rem; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 2.1rem; color: var(--mm); }

  .mm-scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: .4rem; text-decoration: none; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in oklab, var(--ivory) 55%, transparent); }
  @media (min-width: 768px) and (min-height: 740px) { .mm-scroll-cue { display: flex; } }
  .mm-scroll-cue-arrow { font-size: 1rem; color: var(--mm); animation: mmBob 2.4s ease-in-out infinite; }
  @keyframes mmBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
  @media (prefers-reduced-motion: reduce) { .mm-scroll-cue-arrow { animation: none; } }

  /* ── boutons ── */
  .mm-btn { display: inline-flex; align-items: center; gap: .55rem; font-size: .86rem; font-weight: 700; letter-spacing: .03em; padding: 15px 30px; border-radius: 10px; text-decoration: none; transition: transform .28s var(--ease-out-expo), background-color .25s, color .25s, box-shadow .25s; }
  .mm-btn .arrow { display: inline-block; transition: transform .3s var(--ease-out-expo); }
  .mm-btn:hover .arrow { transform: translateX(4px); }
  .mm-btn--white { background: #fff; color: #0c2a22; box-shadow: 0 14px 34px rgba(0, 0, 0, .22); }
  .mm-btn--white:hover { background: var(--mm-lt); color: #231402; transform: translateY(-2px); box-shadow: 0 20px 44px rgba(224, 162, 78, .34); }
  .mm-btn--lg { padding: 18px 38px; font-size: .95rem; }
  .mm-hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }

  /* ── chapô : présentation du format, dissociée du hero ── */
  .mm-intro-band { padding: 3.5rem 0; border-block: 1px solid var(--border);
    background: linear-gradient(180deg, color-mix(in oklab, var(--mm) 8%, var(--cream)), color-mix(in oklab, var(--teal) 6%, var(--cream))); }
  @media (min-width: 768px) { .mm-intro-band { padding: 4.75rem 0; } }
  .mm-intro-lead { font-family: 'Cormorant Garamond', serif; font-weight: 500;
    font-size: clamp(1.35rem, 2.7vw, 1.95rem); line-height: 1.5; letter-spacing: -.005em;
    color: var(--navy-deep); text-align: center; text-wrap: balance; }
  .mm-intro-lead strong { color: var(--mm-deep); font-weight: 600; }

  /* ── sections ── */
  .mm-section { position: relative; padding: 5.5rem 0; }
  @media (min-width: 768px) { .mm-section { padding: 7rem 0; } }
  .mm-section--band { background: linear-gradient(180deg, color-mix(in oklab, var(--mm) 8%, var(--cream)), color-mix(in oklab, var(--teal) 6%, var(--cream))); border-block: 1px solid var(--border); }
  .mm-section--themes { background: linear-gradient(180deg, var(--ivory) 0%, color-mix(in oklab, var(--teal) 6%, var(--cream)) 45%, color-mix(in oklab, var(--mm) 6%, var(--ivory)) 100%); border-block: 1px solid var(--border); }
  .mm-section--partners { background: linear-gradient(165deg, #0c2a22 0%, #10362c 55%, #0a231d 100%); color: var(--ivory); }
  .mm-section-head { max-width: 62ch; margin-bottom: 3rem; }
  .mm-section-head--center { margin-inline: auto; text-align: center; }
  .mm-block-label { display: inline-flex; align-items: center; gap: .7rem; font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--mm-deep); margin-bottom: 1.2rem; }
  .mm-block-label::before { content: ''; width: 26px; height: 2px; background: currentColor; }
  .mm-section-head--center .mm-block-label { justify-content: center; }
  .mm-h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: var(--navy-deep); font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
  .mm-section--themes .mm-h2 { max-width: 26ch; margin-inline: auto; }
  .mm-section-intro { margin-top: 1.1rem; font-size: 1.02rem; line-height: 1.75; color: var(--navy); }
  .mm-section-head--center .mm-section-intro { margin-inline: auto; max-width: 60ch; }
  .mm-section--partners .mm-block-label { color: var(--mm); }
  .mm-section--partners .mm-h2 { color: var(--ivory); }
  .mm-section--partners .mm-section-intro { color: color-mix(in oklab, var(--ivory) 74%, transparent); }

  /* ── LES THÉMATIQUES : grille de cartes blanches, un dégradé par sujet ── */
  .mm-themes { display: grid; gap: 1.5rem; }
  @media (min-width: 700px) { .mm-themes { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .mm-themes { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }
  .mm-theme { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 2.1rem 1.8rem 1.9rem; box-shadow: 0 1px 2px rgba(15, 46, 40, .04); transition: transform .5s var(--ease-out-expo), box-shadow .5s var(--ease-out-expo), border-color .5s; }
  .mm-theme::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--t1), var(--t2)); }
  .mm-theme::after { content: ''; position: absolute; right: -44px; top: -44px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, var(--t1), transparent 70%); opacity: .12; transition: opacity .55s, transform .7s var(--ease-out-expo); }
  .mm-theme:hover { transform: translateY(-6px); box-shadow: 0 28px 54px rgba(15, 46, 40, .13); border-color: color-mix(in oklab, var(--t1) 45%, var(--border)); }
  .mm-theme:hover::after { opacity: .24; transform: scale(1.18); }
  .mm-theme-num { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 2.4rem; line-height: 1; display: block; margin-bottom: .55rem; background: linear-gradient(120deg, var(--t1), var(--t2)); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: mmNumShift 7s ease infinite; }
  @keyframes mmNumShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
  @media (prefers-reduced-motion: reduce) { .mm-theme-num { animation: none; } }
  .mm-theme h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--navy-deep); margin-bottom: .5rem; line-height: 1.2; }
  .mm-theme p { font-size: .92rem; line-height: 1.65; color: var(--muted-foreground); }

  /* ── POUR QUI ── */
  .mm-forwho { display: grid; gap: 2.5rem; }
  @media (min-width: 1024px) { .mm-forwho { grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: center; } }
  .mm-forwho-text { display: flex; flex-direction: column; gap: 2rem; }
  .mm-forwho-list { display: flex; flex-direction: column; }
  .mm-forwho-list li { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.15rem 0; border-top: 1px solid var(--border); font-size: 1.05rem; line-height: 1.6; color: var(--navy); transition: padding-left .35s var(--ease-out-expo), color .35s; }
  .mm-forwho-list li:last-child { border-bottom: 1px solid var(--border); }
  .mm-forwho-list li:hover { padding-left: .5rem; color: var(--navy-deep); }
  .mm-forwho-list li::before { content: ''; flex-shrink: 0; width: 10px; height: 10px; margin-top: .5rem; border-radius: 50%; background: var(--mm); box-shadow: 0 0 0 4px color-mix(in oklab, var(--mm) 20%, transparent); }
  .mm-forwho .img-slot { border-radius: 12px; }

  /* ── NOTRE APPROCHE ── */
  .mm-approach { display: grid; gap: 2rem; }
  @media (min-width: 900px) { .mm-approach { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
  .mm-approach-card { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 2.5rem 2.1rem; box-shadow: 0 1px 2px rgba(15, 46, 40, .04); transition: transform .45s var(--ease-out-expo), box-shadow .45s; }
  .mm-approach-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--t1, var(--mm)), var(--t2, var(--mm-lt))); }
  .mm-approach-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(15, 46, 40, .12); }
  .mm-approach-kicker { font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mm-deep); }
  .mm-approach-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: var(--navy-deep); margin: .7rem 0 .6rem; }
  .mm-approach-card p { font-size: .9rem; line-height: 1.65; color: var(--muted-foreground); }
  .mm-approach-card--figure { background: linear-gradient(150deg, color-mix(in oklab, var(--mm) 16%, var(--card)), var(--card) 62%); }
  .mm-approach-num { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 3.2rem; line-height: 1; color: var(--mm-deep); display: block; }
  .mm-approach-num .stat-num { font-variant-numeric: tabular-nums; }
  .mm-approach-figure-slot { margin-top: 1.75rem; border-radius: 14px; }

  /* ── PARTENARIATS (bloc vert de respiration) ── */
  .mm-partners-grid { display: grid; gap: 2.5rem; }
  @media (min-width: 1024px) { .mm-partners-grid { grid-template-columns: 1fr .9fr; gap: 4rem; } }
  .mm-partners-text p { font-size: 1rem; line-height: 1.8; color: color-mix(in oklab, var(--ivory) 74%, transparent); margin-bottom: 1.1rem; }
  .mm-partners-text strong { color: var(--ivory); font-weight: 600; }
  .mm-partner-card { background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12); padding: 2rem 1.9rem 1.9rem; border-radius: 10px; }
  .mm-partner-kicker { font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--mm); }
  .mm-partner-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--ivory); margin: .6rem 0 .7rem; }
  .mm-partner-card p { font-size: .92rem; line-height: 1.7; color: color-mix(in oklab, var(--ivory) 70%, transparent); margin-bottom: 1.4rem; }
  .mm-partner-card .img-slot { background: rgba(255, 255, 255, .05); border-radius: 8px; }
  .mm-partner-card .img-slot::after { color: color-mix(in oklab, var(--ivory) 55%, transparent); border-color: color-mix(in oklab, var(--mm) 40%, rgba(255, 255, 255, .2)); }

  /* ── CTA final (bloc vert, bouton blanc) ── */
  .mm-cta { position: relative; overflow: hidden; padding: 6.5rem 0 7.5rem; text-align: center; color: var(--ivory);
    background: linear-gradient(160deg, #124034 0%, #0e332a 45%, #16493c 100%); }
  .mm-cta-bg { position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 700px 420px at 50% 120%, color-mix(in oklab, var(--mm) 30%, transparent), transparent 70%); }
  .mm-cta-bg::before { content: ''; position: absolute; width: 46vw; height: 46vw; left: -10vw; top: -20vw; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--teal-bright) 24%, transparent), transparent 68%); animation: mmFloat 34s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { .mm-cta-bg::before { animation: none; } }
  .mm-cta-title { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: var(--ivory); font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.1; margin: 1.4rem auto 1.1rem; max-width: 20ch; }
  .mm-cta-text { font-size: 1.05rem; line-height: 1.75; color: color-mix(in oklab, var(--ivory) 74%, transparent); max-width: 52ch; margin: 0 auto 2rem; }


  /* ============================================================ */
  /* MASTERMIND — harmonisation visuelle (P: moins de dégradés     */
  /* concurrents, palette resserrée teal + ambre)                  */
  /* ============================================================ */

  /* Fonds de section : quatre mécanismes distincts (pas la même forme
     redéclinée en couleur) — dégradé doux, bloc géométrique, trame de
     points, filigrane typographique. Les cadres (cartes) ne changent pas. */

  .mm-section--themes, .mm-section--forwho, .mm-section--approach, .mm-section--verbatims {
    border-block: 1px solid var(--border);
  }

  /* Thématiques : dégradé atmosphérique vertical, sans forme ni texture. */
  .mm-section--themes {
    background: linear-gradient(180deg, var(--ivory) 0%, color-mix(in oklab, var(--teal) 9%, var(--ivory)) 100%);
  }

  /* Pour qui : bloc géométrique ambre en diagonale — angle net, pas de flou. */
  .mm-section--forwho {
    background:
      linear-gradient(115deg, transparent 52%, color-mix(in oklab, var(--mm) 20%, transparent) 78%, color-mix(in oklab, var(--mm) 26%, transparent) 100%),
      var(--cream);
  }

  /* Notre approche : trame de points façon carnet/méthode, monochrome. */
  .mm-section--approach {
    background-color: var(--cream);
    background-image: radial-gradient(color-mix(in oklab, var(--navy) 30%, transparent) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
  }

  /* Ils ont participé : filigrane typographique (guillemet géant), rien d'autre. */
  .mm-section--verbatims {
    position: relative;
    overflow: hidden;
    background: var(--ivory);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .mm-section--verbatims::before {
    content: '\201C';
    position: absolute;
    top: 1.25rem; left: 50%; transform: translateX(-50%);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 8rem;
    line-height: 1;
    color: color-mix(in oklab, var(--mm-deep) 22%, transparent);
    pointer-events: none;
    z-index: 0;
  }
  .mm-section--verbatims > * { position: relative; z-index: 1; }
  .mm-intro-band {
    background-color: color-mix(in oklab, var(--teal) 7%, var(--cream));
    background-image: radial-gradient(ellipse 620px 300px at 50% 0%, color-mix(in oklab, var(--teal) 9%, transparent), transparent 72%);
    background-repeat: no-repeat;
  }

  /* Profondeur des cartes : ombre portée franche + léger reflet haut. */
  .mm-theme, .mm-approach-card, .mm-verbatim {
    box-shadow: 0 2px 4px rgba(15, 46, 40, .05), 0 22px 48px -14px rgba(15, 46, 40, .18);
  }
  .mm-theme::after { pointer-events: none; }
  .mm-theme, .mm-approach-card {
    background-image: linear-gradient(180deg, color-mix(in oklab, #fff 55%, transparent), transparent 42%);
  }
  .mm-forwho-tile { box-shadow: 0 2px 4px rgba(15, 46, 40, .05), 0 18px 40px -16px rgba(15, 46, 40, .16); }

  /* Cartes thématiques : plus d'arc-en-ciel — rotation teal / ambre. */
  .mm-theme { --t1: var(--teal); --t2: var(--teal-bright); }
  .mm-theme:nth-child(2n) { --t1: var(--mm); --t2: var(--mm-lt); }
  .mm-theme::before { background: var(--t1); }
  .mm-theme::after { background: radial-gradient(circle, var(--t1), transparent 70%); }
  .mm-theme:hover { border-color: color-mix(in oklab, var(--t1) 45%, var(--border)); }

  /* Cartes « Notre approche » : même logique, filet latéral sobre. */
  .mm-approach-card { --t1: var(--teal); --t2: var(--teal-bright); }
  .mm-approach-card:nth-child(2) { --t1: var(--mm); --t2: var(--mm-lt); }
  .mm-approach-card:nth-child(3) { --t1: var(--teal-deep); --t2: var(--teal); }
  .mm-approach-card::before { background: var(--t1); }

  /* ── POUR QUI : tuiles colorées ── */
  .mm-forwho-grid { display: grid; gap: 1.25rem; margin-top: 3rem; }
  @media (min-width: 680px) { .mm-forwho-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
  .mm-forwho-tile { position: relative; overflow: hidden; background: var(--card); border-radius: 14px; padding: 2.1rem 1.8rem 1.9rem;
    border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(15, 46, 40, .04); transition: transform .4s var(--ease-out-expo), box-shadow .4s, border-color .4s; }
  .mm-forwho-tile::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--teal); }
  .mm-forwho-tile--b::before { background: var(--mm); }
  .mm-forwho-tile:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(15, 46, 40, .12); border-color: color-mix(in oklab, var(--teal) 35%, var(--border)); }
  .mm-forwho-tile--b:hover { border-color: color-mix(in oklab, var(--mm) 40%, var(--border)); }
  .mm-forwho-tile-num { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.9rem; line-height: 1; color: var(--teal-deep); }
  .mm-forwho-tile--b .mm-forwho-tile-num { color: var(--mm-deep); }
  .mm-forwho-tile h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: var(--navy-deep); margin: .6rem 0 .5rem; line-height: 1.2; }
  .mm-forwho-tile p { font-size: .92rem; line-height: 1.6; color: var(--navy); }
  .mm-forwho-cta { margin-top: 2.75rem; text-align: center; }

  /* ── bouton plein (sur fond clair) ── */
  .mm-btn--fill { background: var(--teal-deep); color: #fff; box-shadow: 0 14px 34px rgba(12, 42, 34, .22); }
  .mm-btn--fill:hover { background: var(--teal); color: #fff; transform: translateY(-2px); box-shadow: 0 20px 44px rgba(12, 42, 34, .3); }

  /* ── VERBATIMS (clair) ── */
  .mm-verbatims { display: grid; gap: 1.5rem; }
  @media (min-width: 800px) { .mm-verbatims { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } }
  .mm-verbatim { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 2.1rem 2rem 1.9rem; }
  .mm-verbatim blockquote { font-family: 'Cormorant Garamond', serif; font-size: 1.28rem; line-height: 1.5; color: var(--navy-deep); margin: 0 0 1.3rem; }
  .mm-verbatim figcaption { display: flex; align-items: center; gap: .9rem; }
  .mm-verbatim-avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: color-mix(in oklab, var(--teal) 16%, transparent); color: var(--teal-deep); font-weight: 700; font-size: .9rem; }
  .mm-verbatim-meta { display: flex; flex-direction: column; }
  .mm-verbatim-name { font-weight: 700; font-size: .9rem; color: var(--navy-deep); }
  .mm-verbatim-role { font-size: .8rem; color: var(--muted-foreground); }

  /* ── VILLAGE BY CA : mis en avant ── */
  .mm-partners-lead { max-width: 62ch; font-size: 1.05rem; line-height: 1.8; color: color-mix(in oklab, var(--ivory) 78%, transparent); margin-bottom: 2.75rem; }
  .mm-partners-lead--center { margin-inline: auto; text-align: center; }
  .mm-partners-lead strong { color: var(--ivory); font-weight: 600; }
  .mm-village { display: grid; gap: 2rem; align-items: center; background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; padding: clamp(1.8rem, 4vw, 3rem); }
  @media (min-width: 860px) { .mm-village { grid-template-columns: auto 1fr; gap: 3.5rem; } }
  .mm-village-logo { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 14px; padding: 1.6rem; }
  .mm-village-logo img { width: 220px; max-width: 46vw; height: auto; display: block; }
  .mm-village-body h3 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--ivory); margin: .55rem 0 .8rem; }
  .mm-village-body p { font-size: .98rem; line-height: 1.75; color: color-mix(in oklab, var(--ivory) 74%, transparent); }
  .mm-village-body strong { color: var(--ivory); font-weight: 600; }

  .mm-village-people { display: grid; gap: 1.5rem; margin-top: 1.75rem; }
  @media (min-width: 800px) { .mm-village-people { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } }
  .mm-verbatim--dark { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); }
  .mm-verbatim--dark blockquote { color: var(--ivory); font-size: 1.2rem; }
  .mm-verbatim--dark .mm-verbatim-name { color: var(--ivory); }
  .mm-verbatim--dark .mm-verbatim-role { color: var(--mm); }
  .mm-verbatim-photo { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 1.1rem; }
  .mm-verbatim-photo.img-slot::after { font-size: .5rem; letter-spacing: .06em; text-align: center; padding: .2rem; }
  .mm-verbatim--dark figcaption { flex-direction: column; align-items: flex-start; gap: .1rem; }

  /* ============================================================ */
  /* MASTERMIND — déclinaison de la charte : cartes cohérentes     */
  /* avec le reste du site, accents teal/ambre, titres en gras.    */
  /* ============================================================ */

  /* Thématiques : titres renforcés en gras, accent en gras dans le texte. */
  .mm-theme h3 { font-weight: 700; }
  .mm-theme p strong { color: var(--navy-deep); font-weight: 600; }
  .mm-intro-accent { color: var(--teal-deep); font-weight: 700; }

  /* Notre approche : numéro discret dans le coin de la carte (le filet latéral reste). */
  .mm-approach { counter-reset: mmapp; }
  .mm-approach-card { counter-increment: mmapp; }
  .mm-approach-card::after {
    content: counter(mmapp, decimal-leading-zero);
    position: absolute; top: 1.5rem; right: 1.7rem;
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.7rem; line-height: 1;
    color: color-mix(in oklab, var(--t1) 60%, var(--muted-foreground));
  }

  /* Verbatims clients : guillemet en exergue, carte alignée quelle que soit la longueur du texte. */
  .mm-verbatim { display: flex; flex-direction: column; }
  .mm-verbatim::before { content: '\201C'; font-family: 'Cormorant Garamond', serif; display: block;
    font-size: 2.4rem; line-height: .7; color: var(--mm); margin-bottom: .5rem; }
  .mm-verbatim blockquote { flex: 1 0 auto; }
  .mm-verbatim figcaption { margin-top: 1.4rem; }

  /* ─────────────  13.B  STARTUPS  ───────────── */
  .su-page {
    --su: #24D3C7;
    --su-lt: #45EFE2;
    background: var(--ivory);
    color: var(--navy-deep);
  }
  .su-page ::selection { background: color-mix(in oklab, var(--su) 30%, transparent); }

  .su-eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-deep); }
  .su-eyebrow--center { justify-content: center; }
  .su-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--su); flex-shrink: 0; animation: suPulse 2.4s ease-out infinite; }
  @keyframes suPulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--su) 55%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
  @media (prefers-reduced-motion: reduce) { .su-dot { animation: none; } }

  /* ── HERO ── */
  .su-hero { position: relative; overflow: hidden; padding: 11rem 0 5rem; background: linear-gradient(180deg, #06201c 0%, #0a2a24 55%, #0c3029 100%); color: var(--ivory); }
  @media (min-width: 768px) { .su-hero { padding: 13rem 0 6.5rem; } }
  .su-hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
  .su-hero-bg::before { content: ''; position: absolute; inset: 0; background-image: var(--grid-pattern); background-size: 52px 52px; opacity: .16;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
  .su-signal { position: absolute; left: 0; right: 0; bottom: 8%; width: 100%; height: min(42vh, 320px); }
  .su-signal path { fill: none; stroke: color-mix(in oklab, var(--su) 70%, transparent); stroke-width: 2; vector-effect: non-scaling-stroke; }
  .su-signal path:nth-child(1) { opacity: .32; }
  .su-signal path:nth-child(2) { stroke-dasharray: 14 460; animation: suTrace 4.6s linear infinite; filter: drop-shadow(0 0 6px color-mix(in oklab, var(--su) 60%, transparent)); }
  @keyframes suTrace { from { stroke-dashoffset: 474; } to { stroke-dashoffset: 0; } }
  @media (prefers-reduced-motion: reduce) { .su-signal path:nth-child(2) { animation: none; stroke-dasharray: none; opacity: .5; } }
  .su-hero-glow { position: absolute; width: 60vw; height: 60vw; left: 50%; top: -30vw; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--su) 22%, transparent), transparent 66%); filter: blur(20px); pointer-events: none; }

  .su-hero-inner { position: relative; }
  .su-hero-inner > * { animation: suHeroIn .8s var(--ease-out-expo) both; }
  .su-hero-inner > *:nth-child(1) { animation-delay: .04s; }
  .su-hero-inner > *:nth-child(2) { animation-delay: .12s; }
  .su-hero-inner > *:nth-child(3) { animation-delay: .2s; }
  .su-hero-inner > *:nth-child(4) { animation-delay: .28s; }
  .su-hero-inner > *:nth-child(5) { animation-delay: .36s; }
  .su-hero-inner > *:nth-child(6) { animation-delay: .44s; }
  @keyframes suHeroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .su-hero-inner > * { animation: none; } }

  .su-hero-title { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: var(--ivory); font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.04; letter-spacing: -.015em; margin: 1.6rem 0 1.4rem; max-width: 18ch; }
  .su-hl { font-style: italic; color: var(--su); }
  .su-hero-lede { font-size: 1.12rem; line-height: 1.7; color: color-mix(in oklab, var(--ivory) 86%, transparent); max-width: 56ch; }
  @media (min-width: 768px) { .su-hero-lede { font-size: 1.22rem; } }
  .su-hero-sub { margin-top: 1.1rem; font-size: .98rem; line-height: 1.75; color: color-mix(in oklab, var(--ivory) 62%, transparent); max-width: 60ch; }
  .su-hero-sub strong { color: var(--su); font-weight: 600; }
  .su-hero-meta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
  .su-chip { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: 8px 14px; border: 1px solid color-mix(in oklab, var(--ivory) 22%, transparent); border-radius: 999px; color: color-mix(in oklab, var(--ivory) 78%, transparent); }
  .su-chip--strong { background: var(--su); border-color: var(--su); color: #04211d; font-weight: 700; }
  .su-hero-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

  /* ── boutons ── */
  .su-btn { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-mono); font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 15px 28px; border-radius: 6px; text-decoration: none; transition: transform .28s var(--ease-out-expo), background-color .25s, color .25s, border-color .25s, box-shadow .25s; }
  .su-btn .arrow { display: inline-block; transition: transform .3s var(--ease-out-expo); }
  .su-btn:hover .arrow { transform: translateX(4px); }
  .su-btn--solid { background: var(--su); color: #04211d; }
  .su-btn--solid:hover { background: var(--su-lt); transform: translateY(-2px); box-shadow: 0 14px 34px color-mix(in oklab, var(--su) 40%, transparent); }
  .su-btn--ghost { border: 1px solid color-mix(in oklab, currentColor 26%, transparent); color: inherit; }
  .su-btn--ghost:hover { border-color: var(--su); color: var(--su); }
  .su-btn--lg { padding: 18px 34px; font-size: .82rem; }

  /* ── sections génériques ── */
  .su-section { position: relative; padding: 5.5rem 0; }
  @media (min-width: 768px) { .su-section { padding: 7rem 0; } }
  .su-section--dark { background: var(--navy-deep); color: var(--ivory); }
  .su-section--proof { background: var(--cream); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .su-section-head { max-width: 58ch; margin-bottom: 3rem; }
  .su-block-label { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 1.1rem; }
  .su-block-label::before { content: ''; width: 22px; height: 2px; background: var(--su); }
  .su-block-label--light { color: color-mix(in oklab, var(--ivory) 70%, transparent); }
  .su-h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: var(--navy-deep); font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.14; letter-spacing: -.01em; }
  .su-h2--light { color: var(--ivory); }
  .su-body { margin-top: 1rem; font-size: 1.02rem; line-height: 1.78; color: var(--navy); }
  .su-body--light { color: color-mix(in oklab, var(--ivory) 74%, transparent); }

  /* ── le gap ── */
  .su-gap { position: relative; padding: 5.5rem 0; background: var(--ivory); border-bottom: 1px solid var(--border); }
  @media (min-width: 768px) { .su-gap { padding: 7rem 0; } }
  .su-gap-grid { display: grid; gap: 2.5rem; align-items: center; }
  @media (min-width: 900px) { .su-gap-grid { grid-template-columns: 1.3fr 1fr; gap: 4rem; } }
  .su-gap-figure { position: relative; padding: 2.5rem; border: 1px solid var(--border); border-left: 3px solid var(--su); background: linear-gradient(180deg, color-mix(in oklab, var(--su) 6%, var(--card)), var(--card)); text-align: center; }
  .su-gap-num { font-family: 'Cormorant Garamond', serif; font-size: clamp(3rem, 7vw, 4.6rem); line-height: 1; color: var(--teal-deep); }
  .su-gap-num .stat-num { font-variant-numeric: tabular-nums; }
  .su-gap-figure p { margin-top: 1rem; font-size: .92rem; line-height: 1.6; color: var(--muted-foreground); max-width: 34ch; margin-inline: auto; }

  /* ── pourquoi Cognizance ── */
  .su-why { display: grid; gap: 1.5rem; }
  @media (min-width: 900px) { .su-why { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
  .su-why-item { padding-left: 1.5rem; border-left: 2px solid var(--su); }
  .su-why-item h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; color: var(--navy-deep); margin-bottom: .5rem; }
  .su-why-item p { font-size: .9rem; line-height: 1.7; color: var(--muted-foreground); }
  .su-section--dark .su-why-item h3 { color: var(--ivory); }
  .su-section--dark .su-why-item p { color: color-mix(in oklab, var(--ivory) 66%, transparent); }

  /* ── tuiles d'expertise (clic pour déplier) ── */
  .su-tiles { display: grid; gap: 1px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); }
  @media (min-width: 640px) { .su-tiles { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .su-tiles { grid-template-columns: repeat(3, 1fr); } }
  .su-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1.9rem 1.7rem; background: var(--navy-deep); border: none; text-align: left; cursor: pointer; color: var(--ivory); transition: background-color .35s; }
  .su-tile:hover { background: #0f2f2a; }
  .su-tile-idx { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--su); }
  .su-tile-name { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; line-height: 1.2; }
  .su-tile-body { font-size: .86rem; line-height: 1.6; color: color-mix(in oklab, var(--ivory) 62%, transparent); overflow: hidden; }
  .su-tiles.is-enhanced .su-tile-body { max-height: 0; opacity: 0; margin-top: 0; transition: max-height .45s var(--ease-out-expo), opacity .35s, margin-top .45s; }
  .su-tiles.is-enhanced .su-tile.is-open .su-tile-body { max-height: 240px; opacity: 1; margin-top: .2rem; }
  .su-tile.is-open { background: #103029; }
  .su-tile::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--su); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out-expo); }
  .su-tile.is-open::after { transform: scaleX(1); }

  /* ── timeline (activation progressive au scroll) ── */
  .su-timeline { position: relative; display: grid; gap: 2rem; }
  @media (min-width: 900px) { .su-timeline { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
  .su-timeline-rail { position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: var(--border); display: none; overflow: hidden; }
  @media (min-width: 900px) { .su-timeline-rail { display: block; } }
  .su-timeline-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: linear-gradient(90deg, var(--su), var(--teal-deep)); transition: width 1.2s var(--ease-out-expo); }
  .su-tl-step { position: relative; padding-top: 1.8rem; }
  .su-tl-step::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--border); }
  @media (min-width: 900px) { .su-tl-step::before { display: none; } }
  .su-tl-node { position: absolute; top: -4px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 2px solid var(--muted-foreground); transition: background-color .4s, border-color .4s, box-shadow .4s; }
  .su-timeline.is-enhanced .su-tl-step { opacity: .42; transition: opacity .5s var(--ease-out-expo); }
  .su-timeline.is-enhanced.is-active .su-tl-step { opacity: 1; }
  .su-tl-step.is-lit .su-tl-node { background: var(--su); border-color: var(--su); box-shadow: 0 0 0 5px color-mix(in oklab, var(--su) 22%, transparent); }
  .su-tl-label { display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: .5rem; }
  .su-tl-step h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; color: var(--navy-deep); margin-bottom: .4rem; }
  .su-tl-step p { font-size: .86rem; line-height: 1.65; color: var(--muted-foreground); }
  .su-tl-step a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; }

  /* ── preuve par l'exemple ── */
  .su-proof-card { display: grid; text-decoration: none; background: var(--card); border: 1px solid var(--border); overflow: hidden; transition: transform .5s var(--ease-out-expo), box-shadow .5s, border-color .5s; }
  @media (min-width: 900px) { .su-proof-card { grid-template-columns: 5fr 7fr; } }
  .su-proof-card:hover { transform: translateY(-4px); border-color: var(--su); box-shadow: 0 24px 50px rgba(15, 46, 40, .12); }
  .su-proof-media { position: relative; overflow: hidden; background: var(--navy-deep); aspect-ratio: 4 / 3; }
  @media (min-width: 900px) { .su-proof-media { aspect-ratio: auto; } }
  .su-proof-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out-expo); }
  .su-proof-card:hover .su-proof-media img { transform: scale(1.04); }
  .su-proof-body { padding: 2.5rem 2.25rem; }
  .su-proof-body h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; color: var(--navy-deep); margin: .5rem 0 .8rem; }
  .su-proof-body p { font-size: .95rem; line-height: 1.7; color: var(--navy); margin-bottom: 1.2rem; }
  .su-proof-link { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-deep); }
  .su-proof-link .arrow { transition: transform .3s var(--ease-out-expo); }
  .su-proof-card:hover .su-proof-link .arrow { transform: translateX(4px); }

  /* ── CTA final ── */
  .su-cta { position: relative; overflow: hidden; padding: 6.5rem 0 7.5rem; text-align: center; background: linear-gradient(180deg, #0a2a24, #071d19); color: var(--ivory); }
  .su-cta-bg { position: absolute; inset: 0; pointer-events: none; }
  .su-cta-title { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.1; margin: 1.4rem auto 1.1rem; max-width: 20ch; color: var(--ivory); }
  .su-cta-text { font-size: 1.04rem; line-height: 1.75; color: color-mix(in oklab, var(--ivory) 72%, transparent); max-width: 56ch; margin: 0 auto 2rem; }
  .su-cta-note { margin-top: 1.4rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in oklab, var(--ivory) 45%, transparent); }

  /* ancres pages programmes : compensation du header fixe */
  #thematiques, #format { scroll-margin-top: 96px; }


  /* ============================================================ */
  /* 14. PAGE LE COLLECTIF (ex À propos) — héros à dégradé animé,   */
  /*     accents verts (plus de fond craie), liste déroulante des   */
  /*     profils, mur de portraits qui apparaît au défilement       */
  /*     (N&B → couleur au survol), méthode sur bloc vert.          */
  /* ============================================================ */

  /* ── HÉROS : fond dégradé animé (blobs qui dérivent + voile rotatif) ── */
  .about-hero { background: linear-gradient(180deg, #f4faf8 0%, #eef6f3 55%, #f5faf8 100%); }
  .about-hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
  .about-hero-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .6; will-change: transform; }
  .about-hero-blob.b1 { width: 48vw; height: 48vw; left: -8vw; top: -16vw; background: radial-gradient(circle, #7fd4c9, transparent 68%); animation: abDrift1 26s ease-in-out infinite; }
  .about-hero-blob.b2 { width: 42vw; height: 42vw; right: -10vw; top: -8vw; background: radial-gradient(circle, #a9c8f0, transparent 70%); opacity: .5; animation: abDrift2 34s ease-in-out infinite; }
  .about-hero-blob.b3 { width: 46vw; height: 46vw; left: 16vw; bottom: -28vw; background: radial-gradient(circle, #e6c79a, transparent 72%); opacity: .45; animation: abDrift3 30s ease-in-out infinite; }
  .about-hero-sheen { position: absolute; inset: -45%; background: conic-gradient(from 0deg, transparent, rgba(47,176,166,.12), transparent 42%, rgba(120,180,235,.09), transparent 72%, transparent); animation: abSpin 52s linear infinite; }
  .about-hero-grain { position: absolute; inset: 0; opacity: .04; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 170px 170px; }
  @keyframes abDrift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(6vw, 4vw) scale(1.12); } 66% { transform: translate(-3vw, 7vw) scale(.95); } }
  @keyframes abDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-7vw, 6vw) scale(1.15); } }
  @keyframes abDrift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(5vw, -5vw) scale(1.1); } 80% { transform: translate(-4vw, 3vw) scale(.96); } }
  @keyframes abSpin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .about-hero-blob, .about-hero-sheen { animation: none; } }

  /* ── NOTRE APPROCHE : accent vert, plus de fond craie ── */
  .apropos-approach-body { margin-top: 1.75rem; border-left: 2px solid var(--teal); padding-left: 1.4rem; }
  .apropos-approach-body p { font-size: 1.02rem; }

  /* ── Liste déroulante des profils mobilisés (<details> natif), accent vert ── */
  .apropos-roles { margin-top: 2rem; max-width: 640px; border: 1px solid color-mix(in oklab, var(--teal) 26%, var(--border)); border-left: 3px solid var(--teal); border-radius: 8px; background: color-mix(in oklab, var(--teal) 4%, var(--card)); overflow: hidden; }
  .apropos-roles > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem; font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; color: var(--navy-deep); transition: color .3s; }
  .apropos-roles > summary::-webkit-details-marker { display: none; }
  .apropos-roles > summary:hover { color: var(--teal-deep); }
  .apropos-roles > summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--teal); transition: transform .35s var(--ease-out-expo); }
  .apropos-roles[open] > summary::after { transform: rotate(45deg); }
  .apropos-roles-list { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0 1.4rem 1.4rem; }
  .apropos-roles[open] .apropos-roles-list { animation: apRolesIn .4s var(--ease-out-expo); }
  @keyframes apRolesIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .apropos-roles-list li { font-size: .82rem; padding: .42rem .95rem; border-radius: 999px; color: var(--teal-deep); background: color-mix(in oklab, var(--teal) 9%, transparent); border: 1px solid color-mix(in oklab, var(--teal) 24%, transparent); }
  @media (prefers-reduced-motion: reduce) { .apropos-roles[open] .apropos-roles-list { animation: none; } }

  /* ── MUR DE PORTRAITS : bloc sombre, apparition au défilement, N&B → couleur ── */
  .apropos-people-section { background: var(--navy-deep); padding: 5.5rem 0; overflow: hidden; }
  @media (min-width: 768px) { .apropos-people-section { padding: 7.5rem 0; } }
  .apropos-people { display: grid; gap: 2.25rem 1.5rem; }
  @media (min-width: 560px) { .apropos-people { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .apropos-people { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
  .apropos-person { margin: 0; }
  .apropos-person.reveal { transform: translateY(52px) scale(.955); transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo); }
  .apropos-person.reveal.visible { transform: none; }
  @media (min-width: 1000px) {
    .apropos-person.reveal:nth-child(even) { transform: translateY(84px) scale(.955); }
    .apropos-person.reveal:nth-child(even).visible { transform: translateY(30px); }
  }
  .apropos-person-photo { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: #0a1f1b; }
  .apropos-person-photo--empty { display: flex; align-items: center; justify-content: center;
    border: 1px dashed color-mix(in oklab, var(--teal-bright) 34%, rgba(255, 255, 255, .18)); }
  .apropos-person-photo-hint { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
    color: color-mix(in oklab, var(--ivory) 48%, transparent); }
  .apropos-person-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out-expo); }
  .apropos-person:hover .apropos-person-photo img { transform: scale(1.05); }
  /* apparition : volet qui se lève sur la photo + léger balayage lumineux */
  .apropos-person.reveal .apropos-person-photo img { clip-path: inset(0 0 100% 0); transition: transform .9s var(--ease-out-expo), clip-path 1.05s var(--ease-out-expo); }
  .apropos-person.reveal.visible .apropos-person-photo img { clip-path: inset(0 0 0 0); }
  /* balayage lumineux retiré à la demande */
  .apropos-person-photo::before { display: none; }
  .apropos-person-photo::after { content: ''; position: absolute; inset: 0; z-index: 3; border: 0 solid var(--teal-bright); transition: border-width .35s var(--ease-out-expo); pointer-events: none; }
  .apropos-person:hover .apropos-person-photo::after { border-width: 3px; }
  .apropos-person figcaption { margin-top: 1rem; }
  .apropos-person-name { display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; line-height: 1.2; color: var(--ivory); }
  .apropos-person-name .pn-last { color: var(--teal-bright); }
  .apropos-person-role { display: block; margin-top: .35rem; font-size: .8rem; line-height: 1.5; color: color-mix(in oklab, var(--ivory) 58%, transparent); }
  @media (prefers-reduced-motion: reduce) {
    .apropos-person:hover .apropos-person-photo img { transform: none; }
    .apropos-person.reveal .apropos-person-photo img { clip-path: none; }
  }

  /* ── MUR DE PORTRAITS : défilement horizontal continu ── */
  .apropos-people-viewport { overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .apropos-people--marquee { display: flex; flex-wrap: nowrap; gap: 2rem; width: max-content;
    grid-template-columns: none; animation: marquee 52s linear infinite; }
  .apropos-people--marquee:hover { animation-play-state: paused; }
  .apropos-people--marquee .apropos-person { flex: 0 0 clamp(190px, 22vw, 264px); margin: 0; }
  @media (prefers-reduced-motion: reduce) {
    .apropos-people--marquee { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
    .apropos-people--marquee .apropos-person[aria-hidden="true"] { display: none; }
  }

  /* ── En-tête du mur de portraits (aperçu du collectif) ── */
  .apropos-people-head { max-width: 46rem; margin-bottom: 3rem; }
  .apropos-people-kicker { display: inline-flex; align-items: center; gap: .7rem; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-bright); margin-bottom: 1.1rem; }
  .apropos-people-kicker::before { content: ''; width: 28px; height: 1px; background: var(--teal-bright); }
  .apropos-people-title { font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.15; color: var(--ivory); }
  .apropos-people-intro { margin-top: 1rem; font-size: 1rem; line-height: 1.7; color: color-mix(in oklab, var(--ivory) 66%, transparent); }

  /* ── "Notre approche" en grand titre ── */
  .apropos-bigtitle { font-weight: 600; letter-spacing: -.015em; margin-bottom: .5rem; }

  /* ── PROFILS MOBILISÉS : bande défilante d'encadrés, pop-up au clic ── */
  .apropos-profiles { margin-top: 3.5rem; padding: 2.5rem 0 2.75rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--teal) 5%, var(--cream)); overflow: hidden; }
  .apropos-profiles-label { max-width: 80rem; margin: 0 auto 1.4rem; padding: 0 1.5rem; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-deep); }
  .apropos-profiles-viewport { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .apropos-profiles-track { display: flex; gap: 1rem; width: max-content; animation: apProfiles 36s linear infinite; }
  .apropos-profiles-track:hover { animation-play-state: paused; }
  @keyframes apProfiles { to { transform: translateX(-50%); } }
  .apropos-profile { flex-shrink: 0; display: inline-flex; align-items: center; gap: .65rem; padding: .85rem 1.6rem; border: 1px solid color-mix(in oklab, var(--teal) 30%, transparent); border-radius: 999px; background: var(--card); color: var(--navy-deep); font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; cursor: pointer; transition: transform .3s var(--ease-out-expo), border-color .3s, background-color .3s, box-shadow .3s; }
  .apropos-profile::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
  .apropos-profile:hover { transform: translateY(-3px); border-color: var(--teal); background: color-mix(in oklab, var(--teal) 8%, var(--card)); box-shadow: 0 12px 28px rgba(15, 46, 40, .1); }
  @media (prefers-reduced-motion: reduce) {
    .apropos-profiles-track { animation: none; flex-wrap: wrap; width: auto; max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; justify-content: center; }
  }

  /* ── POP-UP profil ── */
  .apropos-pop-backdrop { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(10, 26, 22, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; }
  .apropos-pop-backdrop.is-open { opacity: 1; }
  .apropos-pop { position: relative; width: 100%; max-width: 420px; background: var(--card); border-radius: 10px; border-top: 3px solid var(--teal); padding: 2.4rem 2rem 2rem; box-shadow: 0 40px 90px rgba(0, 0, 0, .32); transform: translateY(16px) scale(.97); transition: transform .35s var(--ease-out-expo); }
  .apropos-pop-backdrop.is-open .apropos-pop { transform: none; }
  .apropos-pop-close { position: absolute; top: .7rem; right: 1rem; background: none; border: none; font-size: 1.7rem; line-height: 1; color: var(--muted-foreground); cursor: pointer; transition: color .2s; }
  .apropos-pop-close:hover { color: var(--navy-deep); }
  .apropos-pop-title { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; color: var(--teal-deep); margin-bottom: .55rem; }
  .apropos-pop-text { font-size: .95rem; line-height: 1.6; color: var(--navy); }

  /* ── NOTRE MÉTHODE : bloc vert, cartes blanches (rappel de l'accueil) ── */
  .apropos-method { position: relative; overflow: hidden; padding: 5rem 0; color: var(--ivory);
    background: linear-gradient(165deg, #0c2a22 0%, #10362c 50%, #0a231d 100%); }
  @media (min-width: 768px) { .apropos-method { padding: 7rem 0; } }
  .apropos-method-bg { position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 820px 520px at 82% -4%, color-mix(in oklab, var(--teal-bright) 18%, transparent), transparent 66%); }
  .apropos-method-label { display: inline-flex; align-items: center; gap: .7rem; font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-bright); margin-bottom: 1.2rem; }
  .apropos-method-label::before { content: ''; width: 30px; height: 1px; background: var(--teal-bright); }
  .apropos-method-h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.15; color: var(--ivory); }
  .apropos-method-h2 .italic { color: var(--teal-bright); font-style: italic; }
  .apropos-method-card { background: #fff; border-radius: 6px; padding: 2rem 1.8rem; box-shadow: 0 18px 44px rgba(0, 0, 0, .22); }
  .apropos-num-dark { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 3rem; line-height: 1; margin-bottom: 1rem; color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklab, var(--teal) 58%, transparent); transition: color .9s var(--ease-out-expo) .1s, -webkit-text-stroke-color .9s var(--ease-out-expo) .1s; }
  .reveal.visible .apropos-num-dark { color: var(--teal); -webkit-text-stroke-color: transparent; }
  @media (prefers-reduced-motion: reduce) { .apropos-num-dark { color: var(--teal); -webkit-text-stroke-color: transparent; } }
  .apropos-method-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: var(--teal-deep); margin-bottom: .5rem; }
  .apropos-method-card p { font-size: .9rem; line-height: 1.65; color: var(--muted-foreground); }

  /* ── Objectif de la méthode (phrase mise en avant) ── */
  .apropos-objective { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.4; color: var(--navy-deep); border-left: 2px solid var(--teal); padding-left: 1.1rem; }
  .apropos-objective strong { font-style: normal; font-weight: 600; color: var(--teal); }
  .apropos-objective--dark { color: var(--ivory); border-left-color: var(--teal-bright); }
  .apropos-objective--dark strong { color: var(--teal-bright); }

  /* ── Bloc « Un pilotage dans la durée » (continu, distinct des 3 étapes) ── */
  .apropos-pilotage { margin-top: 1.5rem; display: grid; gap: .75rem; padding: 1.9rem 2rem; border: 1px solid var(--border); border-left: 3px solid var(--ambre); background: color-mix(in oklab, var(--ambre) 5%, var(--card)); border-radius: 2px; }
  @media (min-width: 768px) { .apropos-pilotage { grid-template-columns: 15rem 1fr; align-items: center; gap: 2.5rem; padding: 2.1rem 2.4rem; } }
  .apropos-pilotage h3 { margin: 0; color: var(--navy-deep); font-family: 'Cormorant Garamond', serif; }
  .apropos-pilotage p { color: var(--muted-foreground); }
  .apropos-pilotage--dark { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .14); border-left-color: var(--ambre); }
  .apropos-pilotage--dark h3 { color: var(--ivory); }
  .apropos-pilotage--dark p { color: color-mix(in oklab, var(--ivory) 70%, transparent); }

  /* correctif ordre cascade : lg:grid-cols-3 doit primer sur sm:grid-cols-2 (redéfini plus haut) */
  @media (min-width: 64rem) { .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


  /* ============================================================ */
  /* 15. PAGE CONTACT — formulaire simple dans une carte « verre » */
  /* ============================================================ */
  .contact-wrap { position: relative; overflow: hidden; padding: 2.5rem 0 6rem; }
  @media (min-width: 768px) { .contact-wrap { padding: 3.5rem 0 8rem; } }
  .contact-wrap-bg { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, var(--ivory) 0%, color-mix(in oklab, var(--teal) 8%, var(--cream)) 100%); }
  .contact-wrap-bg::before, .contact-wrap-bg::after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px); }
  .contact-wrap-bg::before { width: 42vw; height: 42vw; left: -10vw; top: -6vw; background: radial-gradient(circle, #7fd4c9, transparent 68%); opacity: .5; }
  .contact-wrap-bg::after { width: 38vw; height: 38vw; right: -12vw; bottom: -12vw; background: radial-gradient(circle, #a9c8f0, transparent 70%); opacity: .4; }

  .contact-glass { position: relative; z-index: 1; display: grid; gap: 2.5rem; padding: 2rem 1.75rem;
    border-radius: 16px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 30px 80px rgba(15, 46, 40, .12); }
  @media (min-width: 900px) { .contact-glass { grid-template-columns: 1.3fr .9fr; gap: 3.5rem; padding: 3rem 3.25rem; } }

  .contact-form { display: flex; flex-direction: column; gap: 1.2rem; }
  .contact-field label { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-deep); margin-bottom: .5rem; }
  .contact-field input, .contact-field textarea { width: 100%; border: 1px solid color-mix(in oklab, var(--teal) 22%, var(--border)); background: rgba(255, 255, 255, .72); padding: .85rem 1rem; font-size: .92rem; font-family: inherit; color: var(--navy); border-radius: 6px; transition: border-color .25s, box-shadow .25s, background-color .25s; }
  .contact-field input::placeholder, .contact-field textarea::placeholder { color: color-mix(in oklab, var(--navy) 45%, transparent); }
  .contact-field input:focus, .contact-field textarea:focus { outline: none; border-color: var(--teal); background: #fff; box-shadow: 0 0 0 3px color-mix(in oklab, var(--teal) 18%, transparent); }
  .contact-field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
  .contact-submit { align-self: flex-start; margin-top: .4rem; }

  .contact-aside h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; color: var(--navy-deep); margin-bottom: 1.4rem; }
  .contact-aside-row { margin-bottom: 1.5rem; }
  .contact-aside-row:last-child { margin-bottom: 0; }
  .contact-aside-row .k { display: block; margin-bottom: .4rem; font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-deep); }
  .contact-aside-row a { font-size: .98rem; color: var(--navy-deep); text-decoration: none; transition: color .25s; }
  .contact-aside-row a:hover { color: var(--teal); }
  .contact-hours span { display: block; font-size: .92rem; color: var(--navy); line-height: 1.75; }
  .contact-social { display: inline-flex; align-items: center; gap: .55rem; }
  .contact-social img { width: 18px; height: 18px; filter: invert(1) brightness(.35); opacity: .8; }
  .contact-social:hover img { opacity: 1; }

  /* ============================================================ */
  /* 16. PAGE STARTUPS v2 — nouveau contenu "page expert"         */
  /*     (identité conservée : teal électrique, mono, signal).    */
  /* ============================================================ */

  /* ── VOTRE SITUATION : les questions récurrentes ── */
  .su-questions { margin-top: 2.5rem; border: 1px solid var(--border); border-left: 3px solid var(--su); border-radius: 8px; padding: 2rem 2.25rem 2.25rem; background: linear-gradient(180deg, color-mix(in oklab, var(--su) 5%, var(--card)), var(--card)); }
  .su-questions-lead { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 1.1rem; }
  .su-questions ul { display: flex; flex-direction: column; }
  .su-questions li { display: flex; gap: .9rem; padding: .85rem 0; border-top: 1px solid var(--border); font-size: 1rem; line-height: 1.55; color: var(--navy-deep); }
  .su-questions li:first-child { border-top: none; }
  .su-questions li::before { content: counter(su-q, decimal-leading-zero); counter-increment: su-q; font-family: var(--font-mono); font-size: .78rem; color: var(--su); flex-shrink: 0; padding-top: .15rem; }
  .su-questions ul { counter-reset: su-q; }
  .su-questions-foot { margin-top: 1.4rem; font-size: 1.02rem; line-height: 1.6; color: var(--navy); }
  .su-questions-foot strong { color: var(--teal-deep); font-weight: 600; }

  /* ── CE QUE NOUS FAISONS : 4 blocs numérotés ── */
  .su-do { display: grid; gap: 1px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); }
  @media (min-width: 800px) { .su-do { grid-template-columns: repeat(2, 1fr); } }
  .su-do-card { position: relative; padding: 2.4rem 2.1rem; background: var(--navy-deep); color: var(--ivory); transition: background-color .35s; }
  .su-do-card:hover { background: #0f2f2a; }
  .su-do-idx { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--su); }
  .su-do-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; color: var(--ivory); margin: .5rem 0 .8rem; }
  .su-do-lead { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.08rem; line-height: 1.4; color: var(--su); margin-bottom: .7rem; }
  .su-do-card > p:not(.su-do-lead) { font-size: .9rem; line-height: 1.65; color: color-mix(in oklab, var(--ivory) 66%, transparent); }
  .su-do-card::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--su); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out-expo); }
  .su-do-card:hover::after { transform: scaleX(1); }

  /* ── POURQUOI : variante 4 colonnes ── */
  @media (min-width: 640px) { .su-why--4 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .su-why--4 { grid-template-columns: repeat(4, 1fr); } }

  /* ── PARTENAIRE ÉCOSYSTÈME : bande teal claire, centrée ── */
  .su-eco { position: relative; padding: 4.5rem 0; text-align: center; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in oklab, var(--su) 7%, var(--cream)), color-mix(in oklab, var(--su) 4%, var(--ivory))); }
  @media (min-width: 768px) { .su-eco { padding: 5.5rem 0; } }
  .su-eco .su-block-label { margin-bottom: 1.2rem; }
  .su-eco .su-h2 { max-width: 22ch; margin: 0 auto 1rem; }

  /* Écosystème : titre accentué, texte renforcé, logo partenaire mis en avant. */
  .su-eco-title strong { font-weight: 700; color: var(--navy-deep); }
  .su-accent-teal { color: var(--teal); }
  .su-eco-lead { margin-inline: auto; max-width: 54ch; }
  .su-eco-lead strong { color: var(--navy-deep); font-weight: 600; }

  .su-eco-partner {
    position: relative;
    margin: 2.75rem auto 0;
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.25rem 2rem 1.9rem;
    background: #fff;
    border: 1px solid color-mix(in oklab, var(--teal) 32%, var(--border));
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(15, 46, 40, .05), 0 22px 48px -18px rgba(15, 46, 40, .22);
    transition: transform .45s var(--ease-out-expo), box-shadow .45s;
  }
  .su-eco-partner::before {
    content: '';
    position: absolute;
    z-index: 0;
    width: 190px; height: 190px;
    top: 34px; left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--teal) 34%, transparent), transparent 68%);
    filter: blur(26px);
    animation: suEcoPulse 6s ease-in-out infinite;
  }
  .su-eco-partner > * { position: relative; z-index: 1; }
  .su-eco-partner:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(15, 46, 40, .05), 0 30px 60px -18px rgba(15, 46, 40, .3); }
  @keyframes suEcoPulse {
    0%, 100% { opacity: .5; transform: translateX(-50%) scale(1); }
    50% { opacity: .85; transform: translateX(-50%) scale(1.09); }
  }
  @media (prefers-reduced-motion: reduce) { .su-eco-partner::before { animation: none; } }
  .su-eco-partner-kicker {
    font-family: var(--font-mono);
    font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--teal);
  }
  .su-eco-partner-logo { display: flex; justify-content: center; }
  .su-eco-partner img { height: 132px; width: auto; display: block; }
  @media (max-width: 640px) { .su-eco-partner img { height: 104px; } }
  .su-eco-partner figcaption { display: flex; flex-direction: column; gap: .25rem; }
  .su-eco-partner-name { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 700; color: var(--teal); }
  .su-eco-partner-role { font-size: .82rem; line-height: 1.5; color: var(--muted-foreground); }

  /* ── TIMELINE : 3 étapes ── */
  @media (min-width: 900px) { .su-timeline--3 { grid-template-columns: repeat(3, 1fr); } }

  /* ============================================================ */
  /* 17. COHÉRENCE TYPOGRAPHIQUE — MasterMind & Startups alignés   */
  /*     sur le reste du site : même sérif (Cormorant) en graisse  */
  /*     normale, aucune police monospace, mêmes graisses de       */
  /*     libellés que .section-label.                              */
  /* ============================================================ */
  .mm-hero-title, .mm-h2, .mm-cta-title,
  .mm-theme h3, .mm-approach-card h3, .mm-partner-card h3,
  .su-hero-title, .su-h2, .su-cta-title, .su-do-card h3, .su-tl-step h3,
  .su-why-item h3, .su-tile-name, .su-proof-body h3, .su-do-lead {
    font-weight: 400;
  }
  .su-eyebrow, .su-block-label, .su-chip, .su-btn, .su-tl-label,
  .su-proof-link, .su-cta-note, .su-do-idx, .su-questions-lead,
  .su-tile-idx, .su-questions li::before {
    font-family: var(--font-sans);
  }
  .mm-eyebrow, .mm-block-label, .mm-approach-kicker, .mm-partner-kicker,
  .mm-theme-num { font-weight: 500; }

  /* ============================================================ */
  /* 18. HOME — HERO ANIMÉ + COULEUR, TEXTES FIGÉS, TÉMOIGNAGES   */
  /*     (itération P15)                                          */
  /* ============================================================ */

  /* ── TEXTES FIGÉS : sections dont le texte ne doit plus s'animer
     (méthode, chiffres, témoignages, CTA audit). On neutralise à la
     fois le scroll-reveal et la révélation mot à mot. ── */
  .is-static { opacity: 1 !important; transform: none !important; animation: none !important; }
  .is-static .split-word { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* ── HERO : le quadrillage reste, mais il respire (léger glissement
     en diagonale) et se teinte de teal. ── */
  .hero-grid {
    background-image:
      linear-gradient(to right, color-mix(in oklab, var(--teal) 12%, transparent) 1px, transparent 1px),
      linear-gradient(to bottom, color-mix(in oklab, var(--teal) 12%, transparent) 1px, transparent 1px);
    background-size: 64px 64px;
    animation: heroGridDrift 26s linear infinite;
    will-change: background-position;
  }
  @keyframes heroGridDrift {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 64px 64px, 64px 64px; }
  }

  /* ── HERO : aurore de couleur, teal + ambre, dérive lente en fond. ── */
  .hero-aurora {
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(38% 44% at 22% 30%, color-mix(in oklab, var(--teal-bright) 34%, transparent) 0%, transparent 70%),
      radial-gradient(34% 40% at 78% 24%, color-mix(in oklab, var(--ambre) 26%, transparent) 0%, transparent 72%),
      radial-gradient(46% 50% at 62% 82%, color-mix(in oklab, var(--teal) 24%, transparent) 0%, transparent 75%);
    filter: blur(34px);
    opacity: .55;
    animation: heroAurora 20s ease-in-out infinite alternate;
    will-change: transform;
  }
  @keyframes heroAurora {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
    50%  { transform: translate3d(3%, 2%, 0) scale(1.08); }
    100% { transform: translate3d(-2%, 3%, 0) scale(1.04); }
  }

  /* ── HERO : deuxième halo flottant, en ambre, coin bas-gauche. ── */
  .hero-blob-ambre {
    left: -140px;
    bottom: -120px;
    width: 460px;
    height: 460px;
    z-index: 0;
    background: color-mix(in oklab, var(--ambre) 16%, transparent);
    animation-duration: 17s;
    animation-direction: alternate;
  }

  /* ── HERO : titre qui monte en fondu au chargement. ── */
  .hero-headline--in { opacity: 0; transform: translateY(26px); animation: heroHeadlineIn 1s .35s var(--ease-out-expo) forwards; }
  @keyframes heroHeadlineIn { to { opacity: 1; transform: none; } }

  /* ── HERO : "Innovations." — dégradé teal → ambre qui balaie le mot. ── */
  .hero-accent-shine {
    background: linear-gradient(100deg, var(--teal) 0%, var(--teal-bright) 30%, var(--teal-deep) 50%, var(--teal-bright) 70%, var(--teal) 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: heroAccentShine 7s ease-in-out infinite;
  }
  @keyframes heroAccentShine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

  /* ── HERO : trait du libellé de section qui s'étire. ── */
  .hero--animated .section-label::before { animation: heroLabelLine 1.1s .2s var(--ease-out-expo) both; }
  @keyframes heroLabelLine { from { width: 0; } to { width: 32px; } }

  @media (prefers-reduced-motion: reduce) {
    .hero-grid, .hero-aurora, .hero-blob-ambre, .hero-headline--in,
    .hero-accent-shine, .hero--animated .section-label::before { animation: none !important; }
    .hero-headline--in { opacity: 1; transform: none; }
    .hero-accent-shine { -webkit-text-fill-color: currentColor; color: var(--teal); }
  }

  /* ── TÉMOIGNAGES : refonte "plus pro" — cartes claires, sobres,
     glyphe de citation, monogramme client, hiérarchie nette. ── */
  .testimonials-eyebrow {
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 1rem;
  }
  .testimonial-grid--pro { gap: 1.5rem; }
  @media (min-width: 768px) { .testimonial-grid--pro { gap: 1.75rem; } }

  .testimonial-card3 {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2.5rem 2rem 1.75rem;
    box-shadow: 0 1px 2px rgba(15, 46, 40, .04);
    transition: box-shadow .35s var(--ease-out-expo), transform .35s var(--ease-out-expo), border-color .35s var(--ease-out-expo);
  }
  .testimonial-card3:hover {
    transform: translateY(-4px);
    border-color: color-mix(in oklab, var(--teal) 45%, transparent);
    box-shadow: 0 22px 50px rgba(15, 46, 40, .12);
  }
  .testimonial-quote-mark {
    position: absolute;
    top: .55rem;
    left: 1.4rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 4.5rem;
    line-height: 1;
    color: color-mix(in oklab, var(--teal) 22%, transparent);
    pointer-events: none;
  }
  .testimonial-card3 blockquote {
    flex: 1;
    margin: 0 0 1.75rem;
    position: relative;
    z-index: 1;
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--navy);
  }
  .testimonial-card3 figcaption {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
  }
  .testimonial-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in oklab, var(--teal) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--teal) 28%, transparent);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--teal-deep);
  }
  .testimonial-meta { display: flex; flex-direction: column; gap: .15rem; }
  .testimonial-card3 .testimonial-name { font-size: .9rem; font-weight: 600; color: var(--navy-deep); }
  .testimonial-card3 .testimonial-role { font-size: .75rem; color: var(--muted-foreground); }
  .testimonial-card3 .testimonial-link {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    display: block;
  }

  /* ============================================================ */
  /* 19. EXPERTISES — HERO GIF + HEADERS FIGÉS + COULEURS CHARTE  */
  /*     (itération P16)                                          */
  /* ============================================================ */

  /* ── HEADERS FIGÉS (tout le site) : un conteneur .is-static neutralise
     le scroll-reveal ET la révélation mot à mot de ses descendants. ── */
  .is-static .reveal { opacity: 1 !important; transform: none !important; }
  .is-static .reveal.visible { opacity: 1 !important; transform: none !important; }

  /* Héros à animation d'entrée CSS propre (MasterMind, Startups, Le collectif) */
  .mm-hero-text > *, .su-hero-inner > *,
  .mm-hero .reveal, .su-hero .reveal, .about-hero .reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* ── EXPERTISES : hero remplacé par le GIF, texte centré. ── */
  .exp-hero--gif {
    display: flex;
    align-items: center;
    min-height: 82vh;
    padding: 9rem 0 5rem;
    background: #0b241f; /* fond charte pendant le chargement du GIF */
  }
  .exp-hero--gif .exp-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }
  .exp-hero--gif .exp-hero-media img,
  .exp-hero--gif .exp-hero-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .exp-hero--gif::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(8, 26, 22, .74) 0%,
      rgba(8, 26, 22, .5) 42%,
      rgba(8, 26, 22, .88) 100%);
  }
  .exp-hero--gif .exp-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
  }
  .exp-hero--gif .exp-hero-content h1 {
    margin-left: auto;
    margin-right: auto;
    max-width: 20ch;
  }
  .exp-hero--gif .exp-hero-lede {
    margin-left: auto;
    margin-right: auto;
    max-width: 44rem;
  }
  .exp-hero--gif .exp-hero-content .section-label::before { display: none; }

  /* ── STUDIO DESIGN : signature ambre (couleur secondaire de la charte) ── */
  #studio-design .exp-block-label { color: var(--teal-bright); }
  #studio-design .exp-block-label::before { background: var(--teal-bright); }
  #studio-design .exp-block-cta { border-bottom-color: color-mix(in oklab, var(--teal-bright) 60%, transparent); }
  #studio-design .exp-block-cta:hover { color: var(--teal-bright); border-color: var(--teal-bright); }
  #studio-design .exp-card { border-color: color-mix(in oklab, var(--teal-bright) 24%, transparent); }
  #studio-design .exp-card h3 { color: color-mix(in oklab, var(--teal-bright) 90%, var(--ivory)); }
  #studio-design .exp-card:hover { background: color-mix(in oklab, var(--teal-bright) 10%, transparent); }
  #studio-design::before { color: color-mix(in oklab, var(--teal-bright) 10%, transparent); }
  #studio-design::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(60% 60% at 78% 18%, color-mix(in oklab, var(--ambre) 16%, transparent) 0%, transparent 70%);
  }

  /* ── IA PERFORMANCE : signature teal vif + trame "tech" ── */
  #ia-performance .exp-block-label { color: var(--teal-bright); }
  #ia-performance .exp-block-label::before { background: var(--teal-bright); }
  #ia-performance .exp-block-cta { border-bottom-color: color-mix(in oklab, var(--teal-bright) 65%, transparent); }
  #ia-performance .exp-block-cta:hover { color: var(--teal-bright); border-color: var(--teal-bright); }
  #ia-performance .exp-card { border-color: color-mix(in oklab, var(--teal-bright) 28%, transparent); }
  #ia-performance .exp-card h3 { color: var(--teal-bright); }
  #ia-performance .exp-card:hover { background: color-mix(in oklab, var(--teal-bright) 12%, transparent); }
  #ia-performance::before { color: color-mix(in oklab, var(--teal-bright) 9%, transparent); }
  #ia-performance::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(color-mix(in oklab, var(--teal-bright) 7%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in oklab, var(--teal-bright) 7%, transparent) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 78%);
    mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 78%);
  }

  /* ============================================================ */
  /* 20. SURTITRES SANS TRAIT + PALETTE DE CHARTE ÉTENDUE (P17)   */
  /* ============================================================ */

  /* Palette de charte (nommée par la cliente) */
  :root {
    --pal-teal:       #29ABA7;
    --pal-teal-deep:  #0B3B39;
    --pal-teal-mist:  #DCEEEC;
    --pal-paper:      #F6F3ED;
    --pal-chalk:      #E9E4D6;
    --pal-amber:      #E0A24E;
    --pal-coral:      #D96F5B;
    --pal-taupe:      #767A72;
  }

  /* ── SURTITRES : on supprime tous les « traits » et on donne du poids
     aux libellés (ce sont eux les vrais titres de section). ── */
  .section-label::before,
  .exp-block-label::before,
  .exp-hero .section-label::before,
  .mm-eyebrow::before, .mm-eyebrow--center::after,
  .mm-block-label::before,
  .su-block-label::before,
  .apropos-people-kicker::before,
  .apropos-method-label::before,
  .hero--animated .section-label::before {
    content: none !important;
    display: none !important;
  }

  .section-label {
    gap: 0;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--pal-teal-deep);
  }
  @media (min-width: 768px) { .section-label { font-size: .95rem; } }

  .exp-block-label {
    gap: 0;
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: .1em;
    margin-bottom: 1rem;
  }
  .exp-hero--gif .exp-hero-content .section-label {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .3em;
    color: var(--teal-bright);
  }
  .apropos-people-kicker,
  .apropos-method-label,
  .mm-block-label,
  .su-block-label,
  .mm-eyebrow { gap: 0; font-weight: 700; }
  .apropos-people-kicker, .apropos-method-label { font-size: .9rem; letter-spacing: .14em; }

  /* ============================================================ */
  /* 21. PAGE CAS CLIENTS — identité propre (chaud / « dossiers ») */
  /* ============================================================ */
  .cc-page { background: var(--pal-paper); }
  .cc-page .bg-background,
  .cc-page section.bg-background { background: var(--pal-paper) !important; }

  /* Hero : plus de quadrillage, bandeau craie, accent corail */
  .cc-hero { background: linear-gradient(180deg, var(--pal-chalk) 0%, var(--pal-paper) 100%); border-bottom: 1px solid color-mix(in oklab, var(--pal-taupe) 32%, transparent); }
  .cc-hero .bg-grid { display: none !important; }
  .cc-hero .section-label { color: var(--pal-teal-deep); }
  .cc-hero h1 .italic { color: var(--teal) !important; }
  .cc-hero p { color: var(--pal-taupe); }
  .cc-hero p.text-navy-deep { color: var(--navy-deep); }
  .cc-hero::after {
    content: '';
    position: absolute;
    width: 34vw; height: 34vw; min-width: 320px; min-height: 320px;
    right: -10vw; top: -14vw;
    border-radius: 50%;
    filter: blur(70px);
    background: radial-gradient(circle, color-mix(in oklab, var(--pal-teal) 38%, transparent), transparent 70%);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
  }
  .cc-hero > .is-static { position: relative; z-index: 1; }

  /* Cas à la une : bandeau craie distinct + formes statiques + étiquette corail */
  .cc-page .cc-featured { background: var(--pal-chalk) !important; position: relative; overflow: hidden; }
  .cc-page .cc-featured::before {
    content: '';
    position: absolute;
    width: 26vw; height: 26vw; min-width: 260px; min-height: 260px;
    right: -8vw; top: -12vw;
    border-radius: 50%;
    filter: blur(60px);
    background: radial-gradient(circle, color-mix(in oklab, var(--pal-coral) 42%, transparent), transparent 70%);
    opacity: .55;
    pointer-events: none;
  }
  .cc-page .cc-featured > * { position: relative; z-index: 1; }
  .cc-page .team-photo { border-color: var(--pal-teal-deep); }
  .cc-page .team-role-tag { background: var(--pal-coral); }
  .cc-page .team-row h2 { color: var(--pal-teal-deep) !important; font-weight: 700; }
  .cc-page .team-row .text-muted-foreground { color: var(--navy-deep) !important; }
  .cc-page .team-row .text-teal { color: var(--pal-teal-deep) !important; }
  .cc-page strong.accent { color: var(--pal-teal-deep); }

  /* Liste : cartes « dossier » numérotées, bord taupe, survol corail */
  .cc-page .results-count { color: var(--pal-taupe); }
  .cc-page .results-count strong { color: var(--pal-teal-deep); }
  .cc-page .grid.reveal-stagger { counter-reset: ccnum; }
  .cc-page .grid.reveal-stagger > a {
    counter-increment: ccnum;
    position: relative;
    background: #fff !important;
    border: 1px solid color-mix(in oklab, var(--pal-taupe) 28%, transparent) !important;
    border-radius: 2px;
  }
  .cc-page .grid.reveal-stagger > a::before { content: none; display: none; }
  .cc-page .grid.reveal-stagger > a:hover {
    border-color: var(--pal-coral) !important;
    box-shadow: 0 20px 46px rgba(118, 122, 114, .24) !important;
  }
  .cc-page .grid.reveal-stagger > a h2 { color: var(--pal-teal-deep) !important; font-weight: 700; }
  .cc-page .grid.reveal-stagger > a .text-teal { color: var(--pal-teal-deep) !important; }
  .cc-page .grid.reveal-stagger > a .text-muted-foreground { color: var(--navy-deep) !important; }
  .cc-page .cc-list-cover { background: #fff; border-color: color-mix(in oklab, var(--pal-taupe) 24%, transparent); }

  /* ============================================================ */
  /* 22. PAGE LE COLLECTIF — identité propre (chaud, éditorial)   */
  /* ============================================================ */
  .co-page { background: var(--pal-paper); }
  .co-page .bg-background,
  .co-page section.bg-background { background: var(--pal-paper) !important; }
  .co-page strong.accent { color: var(--pal-teal-deep); }
  .co-page .section-label { color: var(--pal-taupe); }

  /* Hero : papier chaud, halos ambre / taupe / corail (fini le bleu) */
  .co-page .about-hero { background: linear-gradient(180deg, var(--pal-chalk) 0%, var(--pal-paper) 58%, var(--pal-chalk) 100%); }
  .co-page .about-hero-blob.b1 { background: radial-gradient(circle, color-mix(in oklab, var(--teal-bright) 55%, transparent), transparent 68%); opacity: .5; }
  .co-page .about-hero-blob.b2 { background: radial-gradient(circle, color-mix(in oklab, var(--pal-taupe) 52%, transparent), transparent 70%); opacity: .4; }
  .co-page .about-hero-blob.b3 { background: radial-gradient(circle, color-mix(in oklab, var(--pal-teal-deep) 48%, transparent), transparent 72%); opacity: .4; }
  .co-page .about-hero-sheen { background: conic-gradient(from 0deg, transparent, color-mix(in oklab, var(--teal-bright) 14%, transparent), transparent 42%, color-mix(in oklab, var(--pal-taupe) 10%, transparent), transparent 72%, transparent); }
  .co-page .about-hero h1 .italic { color: var(--teal) !important; }

  /* Notre approche */
  .co-page .apropos-approach-body { border-left-color: var(--teal-bright); }
  .co-page .apropos-bigtitle { color: var(--pal-teal-deep); }
  .co-page .apropos-profiles { background: var(--pal-chalk); border-color: color-mix(in oklab, var(--pal-taupe) 26%, transparent); }
  .co-page .apropos-profiles-label { color: var(--pal-taupe); }
  .co-page .apropos-profile { border-color: color-mix(in oklab, var(--pal-taupe) 32%, transparent); }
  .co-page .apropos-profile::before { background: var(--teal-bright); }
  .co-page .apropos-profile:hover { border-color: var(--teal-bright); background: color-mix(in oklab, var(--teal-bright) 12%, #fff); box-shadow: 0 12px 28px rgba(140, 130, 114, .18); }

  /* Mur de portraits : teal profond de la charte (au lieu du navy accueil) */
  .co-page .apropos-people-section { background: var(--pal-teal-deep); }
  .co-page .apropos-people-kicker { color: var(--teal-bright); }
  .co-page .apropos-person-name .pn-last { color: var(--teal-bright); }
  .co-page .apropos-person-photo::after { border-color: var(--teal-bright); }
  .co-page .apropos-person-photo::before { background: linear-gradient(115deg, transparent 40%, color-mix(in oklab, var(--teal-bright) 40%, transparent) 50%, transparent 60%); }

  /* Notre méthode : bloc teal profond + accents ambre / corail */
  .co-page .apropos-method { background: linear-gradient(165deg, #0b3b39 0%, #0e4744 50%, #082e2c 100%); }
  .co-page .apropos-method-bg { background: radial-gradient(ellipse 820px 520px at 82% -4%, color-mix(in oklab, var(--teal-bright) 16%, transparent), transparent 66%); }
  .co-page .apropos-method-label { color: var(--teal-bright); }
  .co-page .apropos-method-h2 .italic { color: var(--teal-bright); }
  .co-page .apropos-num-dark { -webkit-text-stroke-color: color-mix(in oklab, var(--teal-bright) 60%, transparent); }
  .co-page .reveal.visible .apropos-num-dark,
  .co-page .apropos-num-dark { color: var(--teal-bright); }
  .co-page .apropos-method-card h3 { color: var(--pal-teal-deep); }
  .co-page .apropos-objective--dark { border-left-color: var(--teal-bright); }
  .co-page .apropos-objective--dark strong { color: var(--teal-bright); }
  .co-page .apropos-pilotage--dark { border-left-color: var(--pal-teal-deep); }

  /* ── NOTRE PHILOSOPHIE : mot de la fondatrice ── */
  .apropos-philo-quote { max-width: 62rem; margin: 0 0 3rem; padding-left: 1.5rem;
    border-left: 2px solid color-mix(in oklab, var(--teal-bright) 55%, transparent); }
  .apropos-philo-quote blockquote { margin: 0 0 1.2rem; font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.2rem, 2.4vw, 1.55rem); line-height: 1.5;
    color: color-mix(in oklab, var(--ivory) 90%, transparent); }
  .apropos-philo-quote blockquote:last-of-type { margin-bottom: 1.4rem; }
  .apropos-philo-quote figcaption { font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--ivory); }
  .apropos-philo-quote figcaption span { display: block; font-weight: 400; letter-spacing: 0;
    color: color-mix(in oklab, var(--ivory) 55%, transparent); margin-top: .15rem; }

  /* ============================================================ */
  /* 23. COLLECTIF SANS ANIMATION D'IMAGES + RENDU BLOG (P18)     */
  /* ============================================================ */

  /* NB : le gel des images du Collectif a été retiré en P19 —
     les portraits sont de nouveau animés (voir §24). */

  /* ============================================================ */
  /* BLOG — pages d'article : couleur, image de couverture, relief */
  /* ============================================================ */
  .blog-post-hero { background:
    linear-gradient(165deg, color-mix(in oklab, var(--teal) 11%, var(--cream)) 0%,
                            color-mix(in oklab, var(--ambre) 9%, var(--cream)) 100%) !important; }
  .blog-post-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: var(--grid-pattern); background-size: 60px 60px; opacity: .55;
    -webkit-mask-image: radial-gradient(ellipse 82% 70% at 50% 26%, #000, transparent 82%);
    mask-image: radial-gradient(ellipse 82% 70% at 50% 26%, #000, transparent 82%); }
  .blog-post-hero > div { position: relative; z-index: 1; }
  .blog-post-hero .text-teal { color: var(--teal-deep); }

  .blog-post-cover { display: block; width: 100%; margin-top: 2rem; aspect-ratio: 16 / 8;
    object-fit: cover; border-radius: 8px; background: #eef2f0;
    box-shadow: 0 26px 60px -18px rgba(15, 46, 40, .3); }

  .blog-post article { position: relative; background:
    radial-gradient(ellipse 620px 360px at 100% 0, color-mix(in oklab, var(--teal) 7%, transparent), transparent 70%),
    radial-gradient(ellipse 520px 380px at 0 82%, color-mix(in oklab, var(--ambre) 6%, transparent), transparent 72%),
    var(--background); }
  .blog-post article h2 { position: relative; padding-left: 1.05rem; margin-top: 2.6rem !important; }
  .blog-post article h2::before { content: ''; position: absolute; left: 0; top: .18em; bottom: .18em;
    width: 4px; border-radius: 2px; background: linear-gradient(180deg, var(--teal), var(--ambre)); }
  .blog-post article > p:first-of-type { font-size: 1.08rem; color: var(--navy-deep); }
  .blog-post article > p:first-of-type strong { color: var(--teal-deep); }
  .blog-post article ul li strong { color: var(--teal-deep); }

  /* ============================================================ */
  /* RENDU BLOG — traitement éditorial, distinct de l'accueil     */
  /* ============================================================ */
  .blog-page { background: var(--pal-teal-mist); }
  .blog-page .bg-background,
  .blog-page section.bg-background { background: var(--pal-teal-mist) !important; }

  /* En-tête BLOG : bloc sombre teal profond, nettement distinct de la
     section d'articles (qui, elle, reste claire). */
  .blog-page .blog-hero { background: linear-gradient(160deg, #0b3b39 0%, #0e4744 55%, #08302e 100%); border-bottom: 0; }
  .blog-page .blog-hero .bg-grid {
    display: block !important;
    opacity: 1 !important;
    background-image:
      linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px) !important;
  }
  .blog-page .blog-hero .section-label { color: var(--pal-amber); }
  .blog-page .blog-hero h1 { color: var(--ivory); }
  .blog-page .blog-hero h1 .italic { color: var(--teal-bright) !important; }

  /* Grille d'articles : fiches « revue » numérotées, filet teal à gauche */
  .blog-page .grid.reveal-stagger { counter-reset: blognum; gap: 1.25rem; }
  @media (min-width: 768px) { .blog-page .grid.reveal-stagger { gap: 1.5rem 1.75rem; } }
  .blog-page .grid.reveal-stagger > a {
    counter-increment: blognum;
    position: relative;
    background: #fff !important;
    border: 0 !important;
    border-left: 4px solid var(--pal-teal-deep) !important;
    border-radius: 0 !important;
    padding-right: 3.5rem !important;
    transition: transform .4s var(--ease-out-expo), box-shadow .4s var(--ease-out-expo), border-color .4s !important;
  }
  .blog-page .grid.reveal-stagger > a::before {
    content: "N°" counter(blognum, decimal-leading-zero);
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    letter-spacing: .04em;
    color: color-mix(in oklab, var(--pal-teal-deep) 55%, transparent);
  }
  .blog-page .grid.reveal-stagger > a:hover {
    transform: translateX(6px) !important;
    border-left-width: 8px !important;
    border-left-color: var(--teal) !important;
    box-shadow: 0 18px 40px rgba(11, 59, 57, .14) !important;
  }
  .blog-page .grid.reveal-stagger > a .text-teal { color: var(--pal-teal-deep) !important; }
  .blog-page .grid.reveal-stagger > a h2 { color: var(--pal-teal-deep) !important; transition: color .3s; }
  .blog-page .grid.reveal-stagger > a:hover h2 { color: var(--teal) !important; }
  .blog-page .grid.reveal-stagger > a .text-muted-foreground { color: var(--pal-taupe) !important; }
  .blog-page .grid.reveal-stagger > a span:last-child .arrow,
  .blog-page .grid.reveal-stagger > a span:last-child { transition: color .3s; }

  /* ============================================================ */
  /* 24. P19 — MASTERMIND logo Village, BLOG couvertures,         */
  /*     COLLECTIF (header + images + sections recolorées),       */
  /*     STARTUP (header centré, Format, Ce que nous faisons,     */
  /*     bloc « mêmes questions »).                               */
  /* ============================================================ */

  /* ── MASTERMIND : logo du Village by CA ── */
  .mm-partner-logo {
    background: #fff;
    border-radius: 10px;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 7;
  }
  .mm-partner-logo img { width: auto; height: 100%; max-height: 118px; max-width: 68%; object-fit: contain; }

  /* ── BLOG : image de couverture en tête de fiche ── */
  .blog-page .blog-cover {
    display: block;
    width: calc(100% + 4rem);
    margin: -2rem -2rem 1.5rem -2rem;
    height: 210px;
    object-fit: cover;
    background: #fff;
    border-bottom: 1px solid color-mix(in oklab, var(--pal-teal-deep) 15%, transparent);
  }
  @media (min-width: 768px) {
    .blog-page .blog-cover { width: calc(100% + 5rem); margin: -2.5rem -2.5rem 1.75rem -2.5rem; }
  }
  .blog-page .grid.reveal-stagger > a { padding-right: 2rem !important; overflow: hidden; }
  @media (min-width: 768px) { .blog-page .grid.reveal-stagger > a { padding-right: 2.5rem !important; } }
  .blog-page .grid.reveal-stagger > a::before {
    top: 0;
    left: 0;
    right: auto;
    padding: .5rem .62rem;
    background: var(--pal-teal-deep);
    color: #fff;
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
  }

  /* ── LE COLLECTIF : header retravaillé et centré ── */
  .co-page .about-hero { text-align: center; background: linear-gradient(180deg, var(--pal-paper) 0%, #fff 46%, var(--pal-teal-mist) 100%); }
  .co-page .about-hero .is-static > h1 { margin-inline: auto; }
  .co-page .about-hero .is-static > div { margin-inline: auto; max-width: 44rem; }
  .co-page .about-hero .section-label { color: var(--pal-amber); }
  .co-page .about-hero-blob.b1 { background: radial-gradient(circle, color-mix(in oklab, var(--pal-amber) 46%, transparent), transparent 68%); opacity: .4; }
  .co-page .about-hero-blob.b2 { background: radial-gradient(circle, color-mix(in oklab, var(--pal-teal) 42%, transparent), transparent 70%); opacity: .34; }
  .co-page .about-hero-blob.b3 { background: radial-gradient(circle, color-mix(in oklab, var(--pal-taupe) 40%, transparent), transparent 72%); opacity: .3; }

  /* ── LE COLLECTIF : les portraits sont de nouveau animés + reflet ambré ── */
  .co-page .apropos-person-photo::before {
    background: linear-gradient(115deg, transparent 40%, color-mix(in oklab, var(--pal-amber) 42%, transparent) 50%, transparent 60%) !important;
    display: block !important;
  }
  .co-page .apropos-person-photo::after { border-color: var(--pal-amber); }
  .co-page .apropos-person-name .pn-last { color: var(--pal-amber); }

  /* ── Section « Un aperçu du collectif » : reste sombre, touche d'ambre légère ── */
  .co-page .apropos-people-section {
    background: linear-gradient(165deg, #0b3b39 0%, #0e4744 55%, #093230 100%);
    position: relative;
  }
  .co-page .apropos-people-section > * { position: relative; z-index: 1; }
  .co-page .apropos-people-section::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(52% 46% at 12% 0%, color-mix(in oklab, var(--pal-amber) 13%, transparent), transparent 70%);
  }
  .co-page .apropos-people-kicker { color: var(--pal-amber); }

  /* ── Section « Notre méthode » : passe en clair, accents ambre ── */
  .co-page .apropos-method { background: linear-gradient(180deg, var(--pal-teal-mist) 0%, var(--pal-paper) 100%); color: var(--navy-deep); }
  .co-page .apropos-method-bg { background: radial-gradient(ellipse 780px 480px at 84% -6%, color-mix(in oklab, var(--pal-amber) 13%, transparent), transparent 66%); }
  .co-page .apropos-method-label { color: var(--pal-taupe); }
  .co-page .apropos-method-h2 { color: var(--pal-teal-deep); }
  .co-page .apropos-method-h2 .italic { color: var(--pal-amber); }
  .co-page .apropos-method-card {
    background: #fff;
    border: 1px solid color-mix(in oklab, var(--pal-teal-deep) 12%, transparent);
    border-top: 3px solid var(--pal-amber);
    box-shadow: 0 14px 34px rgba(11, 59, 57, .1);
  }
  .co-page .apropos-method-card h3 { color: var(--pal-teal-deep); }
  .co-page .apropos-num-dark,
  .co-page .reveal.visible .apropos-num-dark {
    color: var(--pal-amber);
    -webkit-text-stroke-color: transparent;
  }
  .co-page .apropos-objective--dark { color: var(--navy-deep); border-left-color: var(--pal-amber); }
  .co-page .apropos-objective--dark strong { color: var(--pal-teal-deep); }
  .co-page .apropos-pilotage--dark {
    background: color-mix(in oklab, var(--pal-amber) 7%, #fff);
    border-color: color-mix(in oklab, var(--pal-taupe) 24%, transparent);
    border-left-color: var(--pal-amber);
  }
  .co-page .apropos-pilotage--dark h3 { color: var(--pal-teal-deep); }
  .co-page .apropos-pilotage--dark p { color: var(--pal-taupe); }

  /* ── STARTUP : header centré ── */
  .su-hero { text-align: center; }
  .su-hero-inner--center { display: flex; flex-direction: column; align-items: center; }
  .su-hero-inner--center .su-hero-title { margin-inline: auto; max-width: 22ch; }
  .su-hero-inner--center .su-hero-lede,
  .su-hero-inner--center .su-hero-sub { margin-inline: auto; }
  .su-hero-inner--center .su-hero-meta,
  .su-hero-inner--center .su-hero-cta-row { justify-content: center; }

  /* ── STARTUP : « Le format » — petite animation ── */
  #format .su-h2 { position: relative; display: inline-block; }
  #format .su-h2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.4rem;
    height: 3px;
    background: linear-gradient(90deg, var(--su), var(--pal-amber));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s var(--ease-out-expo) .15s;
  }
  #format .su-section-head.reveal.visible .su-h2::after { transform: scaleX(1); }
  #format [data-su-timeline].is-enhanced .su-tl-step {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s var(--ease-out-expo), transform .6s var(--ease-out-expo);
  }
  #format [data-su-timeline].is-enhanced .su-tl-step.is-lit { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    #format .su-h2::after { transition: none; transform: scaleX(1); }
    #format [data-su-timeline].is-enhanced .su-tl-step { opacity: 1; transform: none; }
  }

  /* ── STARTUP : « Ce que nous faisons » — encadrés plus clairs que la section ── */
  .su-section--dark .su-do { background: transparent; border: 0; gap: 1.1rem; }
  @media (min-width: 800px) { .su-section--dark .su-do { gap: 1.25rem; } }
  .su-section--dark .su-do-card {
    background: color-mix(in oklab, var(--su) 9%, #10302a);
    border: 1px solid color-mix(in oklab, var(--su) 26%, transparent);
    border-radius: 12px;
  }
  .su-section--dark .su-do-card:hover { background: color-mix(in oklab, var(--su) 14%, #123730); }
  .su-section--dark .su-do-card::after { display: none; }

  /* ── STARTUP : « À ce stade, les mêmes questions reviennent » — retravaillé, centré ── */
  .su-questions {
    border: 0;
    border-radius: 18px;
    background: linear-gradient(180deg, var(--pal-teal-mist), #fff);
    padding: 2.75rem 2.5rem;
    text-align: center;
    box-shadow: 0 16px 44px rgba(11, 59, 57, .08);
  }
  .su-questions-lead { font-size: .8rem; letter-spacing: .14em; color: var(--pal-taupe); margin-bottom: 0; }
  /* Questions : liste verticale, une par ligne, numérotée 1 → 6, alignée. */
  .su-questions ul { counter-reset: su-q; display: flex; flex-direction: column; gap: .7rem;
    margin: 1.75rem auto 0; max-width: 640px; text-align: left; }
  .su-questions li {
    display: flex;
    gap: 1rem;
    border: 1px solid color-mix(in oklab, var(--pal-teal-deep) 14%, transparent);
    border-radius: 12px;
    background: #fff;
    padding: 1rem 1.2rem;
    align-items: baseline;
    font-size: 1.02rem;
    line-height: 1.5;
  }
  .su-questions li:first-child { border-top: 1px solid color-mix(in oklab, var(--pal-teal-deep) 14%, transparent); }
  .su-questions li::before {
    content: counter(su-q) ".";
    counter-increment: su-q;
    flex-shrink: 0;
    width: 1.5rem;
    text-align: right;
    font-family: var(--font-mono);
    font-size: .95rem;
    font-weight: 700;
    color: var(--pal-amber);
  }
  .su-questions-foot { margin-top: 1.9rem; font-size: 1.05rem; }
  .su-questions-foot strong { color: var(--pal-teal-deep); }

  /* ============================================================ */
  /* 25. P20 — blog (n° retirés), contact (header refait),        */
  /*     startup (titres centrés, « Expertise »).                 */
  /* ============================================================ */

  /* ── BLOG : suppression des pastilles « N°01 » sur les fiches ── */
  .blog-page .grid.reveal-stagger > a::before { content: none !important; display: none !important; }
  .blog-page .grid.reveal-stagger > a { padding-right: 2rem !important; }
  @media (min-width: 768px) { .blog-page .grid.reveal-stagger > a { padding-right: 2.5rem !important; } }

  /* ── CONTACT : header refait — « Contact » en très grand, halo doux ── */
  .contact-hero { background: linear-gradient(160deg, #0b3b39 0%, #0e4744 55%, #08302e 100%); }
  .contact-hero-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(55% 65% at 88% -5%, color-mix(in oklab, var(--teal-bright) 22%, transparent), transparent 62%),
      radial-gradient(45% 55% at -5% 105%, color-mix(in oklab, var(--pal-amber) 14%, transparent), transparent 68%);
  }
  .contact-hero h1 { letter-spacing: -.02em; color: var(--ivory); }
  .contact-hero p { color: color-mix(in oklab, var(--ivory) 74%, transparent); }

  /* ── STARTUP : tous les titres de section centrés ── */
  .su-page .su-section-head { text-align: center; margin-left: auto; margin-right: auto; }
  .su-page .su-section-head .su-block-label { justify-content: center; }
  .su-page .su-section-head .su-h2,
  .su-page .su-section-head .su-body { margin-left: auto; margin-right: auto; }

  /* ── STARTUP : grand titre « Expertise » ── */
  .su-h2--big { font-size: clamp(2.6rem, 6.5vw, 4.6rem); line-height: 1.05; }

  /* ============================================================ */
  /* 26. P21 — MasterMind figé & cadres retravaillés, POUR QUI,   */
  /*     logo Village, blog (images), collectif (ombre).          */
  /* ============================================================ */

  /* ── MASTERMIND : page figée (les cadres gardent leurs survols) ── */
  .mm-page .reveal, .mm-page .reveal.visible { opacity: 1 !important; transform: none !important; }
  .mm-page .mm-hero-figure { opacity: 1 !important; transform: none !important; }
  .mm-page .mm-underline::after { animation: none !important; transform: scaleX(1) !important; }
  .mm-hero-blob--1, .mm-hero-blob--2 { animation: none !important; }
  .mm-cta-bg::before { animation: none !important; }

  /* ── MASTERMIND : cadres « thématiques » retravaillés (sans numéro) ── */
  .mm-theme-num { display: none !important; }
  .mm-theme { padding-top: 2rem; }
  .mm-theme::after { display: none; }            /* halo circulaire retiré : plus net */
  .mm-theme::before { height: 3px; }
  .mm-theme:hover { transform: translateY(-4px); }

  /* ── MASTERMIND : « POUR QUI ? » retravaillé — sans visuel, sans puces ── */
  .mm-forwho { display: block; max-width: 60rem; margin-inline: auto; }
  .mm-forwho-text { text-align: center; align-items: stretch; gap: 1.5rem; }
  .mm-forwho-text .mm-section-intro { max-width: 46rem; margin-inline: auto; }
  .mm-forwho-list { display: grid; gap: .8rem; margin-top: .25rem; width: 100%; }
  @media (min-width: 700px) { .mm-forwho-list { grid-template-columns: 1fr 1fr; gap: .9rem 1.25rem; } }
  .mm-forwho-list li {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    padding: 1.1rem 1.3rem;
    font-size: 1rem;
    transition: border-color .35s var(--ease-out-expo), transform .35s var(--ease-out-expo);
  }
  .mm-forwho-list li::before { display: none !important; }
  .mm-forwho-list li:last-child { border-bottom: 1px solid var(--border); }
  .mm-forwho-list li:hover { padding-left: 1.3rem; transform: translateY(-2px); border-color: color-mix(in oklab, var(--mm) 45%, var(--border)); color: var(--navy-deep); }

  /* ── MASTERMIND : logo du Village ajusté avec le texte de la carte ── */
  .mm-partner-logo {
    aspect-ratio: auto;
    display: inline-flex;
    width: auto;
    padding: .9rem;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  }
  .mm-partner-logo img { width: 108px; height: 108px; max-width: 108px; max-height: 108px; }

  /* ── BLOG : cadrage des couvertures dans les fiches ── */
  .blog-page .blog-cover {
    height: 200px;
    object-fit: cover;
    object-position: center top;
    background: var(--pal-teal-mist);
  }

  /* ── LE COLLECTIF : suppression des ombres ── */
  .co-page .apropos-method-card,
  .co-page .apropos-method-card:hover,
  .co-page .apropos-profile,
  .co-page .apropos-profile:hover,
  .co-page .apropos-pilotage,
  .co-page .apropos-pilotage--dark,
  .co-page .apropos-person,
  .co-page .apropos-person-photo { box-shadow: none !important; }

  /* ============================================================ */
  /* 27. P22 — startup (Pourquoi figé + cadres, Format sans trait,*/
  /*     timeline « moins IA », titre héro sur une ligne),        */
  /*     « Notre méthode » figée, témoignages sans pastille.      */
  /* ============================================================ */

  /* ── STARTUP : « Pourquoi Cognizance » — cadres retravaillés ── */
  .su-why--4 .su-why-item {
    padding: 1.6rem 1.5rem;
    border-left: 0;
    border: 1px solid color-mix(in oklab, var(--su) 26%, transparent);
    border-radius: 14px;
    background: var(--card);
    transition: transform .35s var(--ease-out-expo), border-color .35s;
  }
  .su-why--4 .su-why-item:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--su) 55%, transparent); }

  /* ── STARTUP : « Le format » — suppression du trait sous le titre ── */
  #format .su-h2 { display: block; }
  #format .su-h2::after { display: none !important; content: none !important; }

  /* ── STARTUP : timeline « Mois 1… » retravaillée (moins générique) ── */
  .su-timeline .su-timeline-rail { display: none !important; }
  .su-timeline .su-tl-node { display: none !important; }
  .su-timeline { counter-reset: sutl; }
  .su-timeline .su-tl-step {
    counter-increment: sutl;
    padding-top: 2.6rem;
    border-top: 2px solid color-mix(in oklab, var(--su) 35%, transparent);
  }
  .su-timeline .su-tl-step::before {
    content: counter(sutl);
    display: block !important;
    position: absolute;
    top: .55rem;
    left: 0;
    right: auto;
    width: auto;
    height: auto;
    background: none;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 2.7rem;
    line-height: 1;
    color: color-mix(in oklab, var(--su) 34%, transparent);
  }
  .su-timeline .su-tl-label {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.05rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--teal-deep);
    margin-bottom: .35rem;
  }

  /* ── STARTUP : titre du héro sur une seule ligne (grands écrans) ── */
  .su-hero-inner--center .su-hero-title { max-width: 46rem; }
  @media (min-width: 1180px) {
    .su-hero-inner--center .su-hero-title {
      max-width: none;
      white-space: nowrap;
      font-size: clamp(1.9rem, 3.05vw, 2.8rem);
    }
  }

  /* ── « NOTRE MÉTHODE » figée (accueil + collectif) ── */
  #method .reveal, #method .reveal.visible { opacity: 1 !important; transform: none !important; }
  .co-page .apropos-method .reveal,
  .co-page .apropos-method .reveal.visible { opacity: 1 !important; transform: none !important; }

  /* ── TÉMOIGNAGES : suppression de la pastille d'initiales ── */
  .testimonial-avatar { display: none !important; }
  .testimonial-card3 figcaption { gap: 0; }

  /* ── BANDEAU EXPERTISES : défilement accéléré ── */
  .animate-marquee.whitespace-nowrap { animation-duration: 22s; }

  /* ── NOTRE MÉTHODE : masquer le fil horizontal quand les étapes 2 et 3 sont repliées ── */
  .method-v5-steps:has(.method-v5-step.is-closed)::before,
  .method-v5-steps.has-closed::before { display: none !important; }

  /* ── BOUTON RETOUR EN HAUT ── */
  .back-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 70;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: var(--teal);
    color: var(--ivory);
    box-shadow: 0 10px 28px color-mix(in oklab, var(--navy-deep) 32%, transparent);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .35s ease, transform .35s ease, visibility .35s, background-color .25s ease;
  }
  .back-to-top svg { width: 20px; height: 20px; }
  .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
  .back-to-top:hover, .back-to-top:focus-visible { background: var(--navy-deep); }
  @media (max-width: 640px) {
    .back-to-top { right: 1rem; bottom: 1rem; width: 44px; height: 44px; }
    .back-to-top svg { width: 18px; height: 18px; }
  }

  /* ============================================================ */
  /* 27. MASTERMIND — cadres repensés                             */
  /*  · Thématiques  → cartes en contour transparent, 3 couleurs   */
  /*  · Notre approche → bandeau vert + cartes translucides        */
  /*    (même langage que le bloc Partenariats, déjà validé)       */
  /* ============================================================ */

  /* ── Thématiques : contours transparents, rotation teal / ambre / corail ── */
  .mm-theme:nth-child(3n+1) { --t1: var(--teal); --t2: var(--teal-bright); }
  .mm-theme:nth-child(3n+2) { --t1: var(--mm); --t2: var(--mm-lt); }
  .mm-theme:nth-child(3n+3) { --t1: var(--pal-coral); --t2: var(--pal-coral); }
  .mm-theme {
    background: color-mix(in oklab, var(--pal-teal-deep) 10%, transparent);
    background-image: none;
    border: 1px solid color-mix(in oklab, var(--t1) 45%, transparent);
    border-radius: 18px;
    box-shadow: none;
    padding: 2.2rem 1.9rem 2rem;
  }
  .mm-theme::before { display: none !important; content: none !important; }
  .mm-theme::after { display: none !important; }
  .mm-theme h3 { color: var(--navy-deep); }
  .mm-theme h3::after {
    content: '';
    display: block;
    width: 26px; height: 2px;
    margin-top: .7rem;
    background: var(--t1);
  }
  .mm-theme:hover {
    transform: translateY(-4px);
    background: color-mix(in oklab, var(--t1) 14%, color-mix(in oklab, var(--pal-teal-deep) 9%, transparent));
    border-color: color-mix(in oklab, var(--t1) 75%, transparent);
    box-shadow: none;
  }

  /* ── Notre approche : bandeau vert (rappel Partenariats) + cartes translucides ── */
  .mm-section--approach {
    background-color: transparent;
    background-image: none;
    background: linear-gradient(165deg, #0c2a22 0%, #10362c 55%, #0a231d 100%);
    border-block: 0;
    color: var(--ivory);
  }
  .mm-section--approach .mm-block-label { color: var(--mm); }
  .mm-section--approach .mm-h2 { color: var(--ivory); }
  .mm-section--approach .mm-section-intro { color: color-mix(in oklab, var(--ivory) 74%, transparent); }
  .mm-section--approach .mm-approach-card {
    background: rgba(255, 255, 255, .05);
    background-image: none;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    box-shadow: none;
    padding: 2.5rem 2.1rem;
  }
  .mm-section--approach .mm-approach-card::before { display: none !important; content: none !important; }
  .mm-section--approach .mm-approach-card::after {
    color: color-mix(in oklab, var(--mm) 85%, transparent);
    font-size: 2rem;
  }
  .mm-section--approach .mm-approach-kicker { color: var(--mm); }
  .mm-section--approach .mm-approach-card h3 { color: var(--ivory); }
  .mm-section--approach .mm-approach-card p { color: color-mix(in oklab, var(--ivory) 72%, transparent); }
  .mm-section--approach .mm-approach-card strong { color: var(--ivory); font-weight: 600; }
  .mm-section--approach .mm-approach-card:hover {
    background: rgba(255, 255, 255, .08);
    border-color: color-mix(in oklab, var(--mm) 45%, rgba(255, 255, 255, .2));
    transform: translateY(-4px);
    box-shadow: none;
  }

  /* ── Pour qui : même élargissement de palette (teal / ambre / corail) ── */
  .mm-forwho-tile:nth-child(3n+1)::before { background: var(--teal); }
  .mm-forwho-tile:nth-child(3n+2)::before { background: var(--mm); }
  .mm-forwho-tile:nth-child(3n+3)::before { background: var(--pal-coral); }
  .mm-forwho-tile:nth-child(3n+1) .mm-forwho-tile-num { color: var(--teal-deep); }
  .mm-forwho-tile:nth-child(3n+2) .mm-forwho-tile-num { color: var(--mm-deep); }
  .mm-forwho-tile:nth-child(3n+3) .mm-forwho-tile-num { color: var(--pal-coral); }
  .mm-forwho-tile:nth-child(3n+3):hover { border-color: color-mix(in oklab, var(--pal-coral) 45%, var(--border)); }

  /* ============================================================ */
  /* 28. STARTUP — accents charte (teal), lisibilité, timeline     */
  /* ============================================================ */

  /* « À ce stade, les mêmes questions reviennent » : renforcé. */
  .su-questions-lead { font-weight: 700; color: var(--navy-deep); }

  /* Pourquoi Cognizance : titres de cartes en teal. */
  .su-why--4 .su-why-item h3 { color: var(--teal); font-weight: 700; }

  /* Le format : chiffre dans une gouttière à gauche, plus de chevauchement. */
  .su-timeline .su-tl-step {
    padding-top: 1.6rem;
    padding-left: 3.4rem;
  }
  .su-timeline .su-tl-step::before {
    top: 1.3rem;
    left: 0;
    right: auto;
    font-size: 2.3rem;
    color: color-mix(in oklab, var(--teal) 55%, transparent);
  }
  @media (max-width: 899px) {
    .su-timeline .su-tl-step { padding-left: 3rem; }
  }

  /* ============================================================ */
  /* 29. L'AGENCE — approche, profils, portraits, verbatim         */
  /* ============================================================ */

  /* ── Notre approche : chapô + deux colonnes de texte, sans filet ── */
  .co-page .co-approach-body { margin-top: 2rem; }
  .co-page .co-approach-lead {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: 1.65;
    color: var(--navy-deep);
  }
  .co-page .co-approach-lead strong { font-weight: 700; }
  .co-page .co-approach-lead strong.accent { color: var(--pal-teal-deep); }
  .co-page .co-approach-cols { display: grid; gap: 1.6rem; margin-top: 2rem; }
  @media (min-width: 860px) { .co-page .co-approach-cols { grid-template-columns: 1fr 1fr; gap: 3rem; } }
  .co-page .co-approach-cols p { font-size: .98rem; line-height: 1.8; color: var(--navy); }
  .co-page .co-approach-cols strong { color: var(--navy-deep); font-weight: 600; }

  /* ── Profils mobilisés : grille statique, lisible, sans carrousel ── */
  .co-page .co-profiles {
    margin-top: 4rem;
    padding: 3.5rem 0 4rem;
    background: var(--pal-chalk);
    border-top: 1px solid color-mix(in oklab, var(--pal-taupe) 26%, transparent);
    border-bottom: 1px solid color-mix(in oklab, var(--pal-taupe) 26%, transparent);
  }
  .co-page .co-profiles-label {
    font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--pal-teal-deep);
    margin-bottom: 2rem;
  }
  .co-page .co-profiles-grid { display: grid; gap: 1.25rem; }
  @media (min-width: 680px) { .co-page .co-profiles-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
  @media (min-width: 1020px) { .co-page .co-profiles-grid { grid-template-columns: repeat(3, 1fr); } }
  .co-page .co-profile {
    background: #fff;
    border: 1px solid color-mix(in oklab, var(--pal-taupe) 22%, transparent);
    border-radius: 12px;
    padding: 1.6rem 1.5rem 1.5rem;
    transition: border-color .35s var(--ease-out-expo), transform .35s var(--ease-out-expo), box-shadow .35s;
  }
  .co-page .co-profile:hover {
    transform: translateY(-3px);
    border-color: color-mix(in oklab, var(--pal-teal-deep) 40%, transparent);
    box-shadow: 0 18px 38px -16px rgba(11, 59, 57, .25);
  }
  .co-page .co-profile h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem; font-weight: 700; line-height: 1.25;
    color: var(--pal-teal-deep);
    margin-bottom: .5rem;
  }
  .co-page .co-profile p { font-size: .88rem; line-height: 1.65; color: var(--navy); }

  /* ── Mur de portraits : défilement manuel avec flèches (plus d'animation) ── */
  .co-page .apropos-people--rail {
    display: flex; flex-wrap: nowrap; gap: 2rem; width: max-content;
    animation: none !important;
  }
  .co-page .apropos-people--rail .apropos-person { flex: 0 0 clamp(190px, 22vw, 264px); margin: 0; }
  .co-page .apropos-people-viewport {
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .co-page .apropos-people-viewport::-webkit-scrollbar { display: none; }
  .co-people-nav { display: flex; justify-content: flex-end; gap: .6rem; margin-bottom: 1.25rem; }
  .co-people-arrow {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--ivory) 32%, transparent);
    background: transparent;
    color: var(--ivory);
    cursor: pointer;
    transition: background-color .3s, border-color .3s, color .3s, opacity .3s;
  }
  .co-people-arrow svg { width: 20px; height: 20px; }
  .co-people-arrow:hover { background: var(--pal-amber); border-color: var(--pal-amber); color: var(--navy-deep); }
  .co-people-arrow[disabled] { opacity: .3; cursor: default; }
  .co-people-arrow[disabled]:hover { background: transparent; border-color: color-mix(in oklab, var(--ivory) 32%, transparent); color: var(--ivory); }

  /* ── Le mot de la fondatrice : verbatim encadré, sur fond clair ── */
  .co-page .apropos-philo { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .co-page .co-verbatim {
    display: grid;
    gap: 2rem;
    align-items: center;
    max-width: 60rem;
    margin: 0 auto 3.5rem;
    padding: clamp(1.8rem, 4vw, 3rem);
    background: #fff;
    border: 1px solid color-mix(in oklab, var(--pal-teal-deep) 14%, transparent);
    border-radius: 18px;
    box-shadow: 0 24px 60px -24px rgba(11, 59, 57, .28);
  }
  @media (min-width: 860px) {
    .co-page .co-verbatim { grid-template-columns: 200px 1fr; gap: 3rem; }
  }
  .co-page .co-verbatim-portrait {
    width: 168px; height: 168px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid color-mix(in oklab, var(--pal-amber) 70%, transparent);
  }
  @media (min-width: 860px) { .co-page .co-verbatim-portrait { width: 200px; height: 200px; margin: 0; } }
  .co-page .co-verbatim-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .co-page .co-verbatim-mark {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.6rem; line-height: .6;
    color: color-mix(in oklab, var(--pal-amber) 75%, transparent);
    margin-bottom: .6rem;
  }
  .co-page .co-verbatim blockquote {
    margin: 0 0 1.1rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.12rem, 2.1vw, 1.42rem);
    line-height: 1.55;
    color: var(--navy-deep);
  }
  .co-page .co-verbatim blockquote strong { font-weight: 700; color: var(--pal-teal-deep); }
  .co-page .co-verbatim figcaption {
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid color-mix(in oklab, var(--pal-taupe) 26%, transparent);
  }
  .co-page .co-verbatim-name { display: block; font-weight: 700; font-size: .95rem; letter-spacing: .04em; color: var(--navy-deep); }
  .co-page .co-verbatim-role { display: block; margin-top: .2rem; font-size: .85rem; color: var(--pal-teal-deep); }

  /* ============================================================ */
  /* 30. CONTACT — prise de rendez-vous + respiration du header    */
  /* ============================================================ */

  .contact-rdv { padding: 4.5rem 0 5.5rem; background: var(--cream); border-top: 1px solid var(--border); }
  @media (min-width: 768px) { .contact-rdv { padding: 6rem 0 7rem; } }
  .contact-rdv-head { max-width: 46rem; margin-bottom: 2.5rem; }
  .contact-rdv-embed {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px -28px rgba(15, 46, 40, .3);
  }

  /* Header : on évite que « L'agence » colle aux éléments voisins. */
  header nav ul li > a { white-space: nowrap; }
  .nav-programs-pair { margin-inline: .5rem; }

  /* ============================================================ */
  /* 31. L'AGENCE — ajustements (titre, profils, espacements)      */
  /* ============================================================ */

  /* « Notre approche » : titre moins massif et décollé de la section. */
  .co-page .apropos-bigtitle {
    font-size: clamp(2.2rem, 4.4vw, 3.4rem);
    line-height: 1.1;
    margin-bottom: 0;
  }
  .co-page .apropos-bigtitle + .co-approach-body,
  .co-page .co-approach-body { margin-top: 2.5rem; }
  .co-page section:has(> .mx-auto .apropos-bigtitle) { padding-top: 5.5rem; }
  @media (min-width: 768px) { .co-page section:has(> .mx-auto .apropos-bigtitle) { padding-top: 7rem; } }

  /* Profils mobilisés : une seule ligne, les intitulés défilent. */
  .co-page .co-profiles {
    margin-top: 4rem;
    padding: 2.4rem 0;
    background: var(--navy-deep);
    border: 0;
  }
  .co-page .co-profiles-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem 1.1rem;
  }
  .co-page .co-profiles-label {
    font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: color-mix(in oklab, var(--ivory) 58%, transparent);
  }
  .co-page .co-profiles-cycle {
    position: relative;
    display: inline-block;
    min-width: 20ch;
    height: 2.1em;
    overflow: hidden;
    vertical-align: bottom;
  }
  .co-page .co-profiles-word {
    position: absolute;
    left: 0; top: 0;
    white-space: nowrap;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.5;
    color: var(--teal-bright);
    opacity: 0;
    transform: translateY(.35em);
    transition: opacity .5s var(--ease-out-expo), transform .5s var(--ease-out-expo);
  }
  .co-page .co-profiles-word.is-active { opacity: 1; transform: none; }

  /* Section « L'équipe » : moins d'espacement. */
  .co-page .apropos-people-section { padding: 4rem 0; }
  @media (min-width: 768px) { .co-page .apropos-people-section { padding: 5rem 0; } }
  .co-page .apropos-people-head { margin-bottom: 2rem; }
  .co-page .apropos-people-intro { margin-top: .75rem; }
  .co-page .apropos-people--rail { gap: 1.5rem; }

  /* Notre philosophie : titre de section au-dessus du verbatim. */
  .co-page .co-philo-head { margin-bottom: 2rem; text-align: center; }
  .co-page .co-philo-head .apropos-method-label { justify-content: center; color: var(--pal-teal-deep); }
  .co-page .co-verbatim--solo { grid-template-columns: 1fr; max-width: 54rem; }
  @media (min-width: 860px) { .co-page .co-verbatim--solo { grid-template-columns: 1fr; } }

  /* Cartes de la philosophie : accent ambre affirmé, contour plus net. */
  .co-page .apropos-method-card {
    border-top-width: 4px;
    border-radius: 14px;
    padding: 2.2rem 1.9rem 2rem;
    position: relative;
    overflow: hidden;
  }
  .co-page .apropos-method-card::after {
    content: '';
    position: absolute;
    right: -46px; top: -46px;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--pal-amber) 40%, transparent), transparent 70%);
    opacity: .3;
    pointer-events: none;
  }
  .co-page .apropos-method-card h3 { position: relative; font-weight: 700; }
  .co-page .apropos-method-card p { position: relative; color: var(--navy); }
  .co-page .apropos-num-dark { font-size: 2.6rem; margin-bottom: .6rem; }

  /* ============================================================ */
  /* 32. FICHES PROJET — variantes sans visuel de couverture       */
  /* ============================================================ */

  .case-preview--text { align-items: start; }
  .case-livrables-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .55rem;
  }
  .case-livrables-list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--navy);
  }
  .case-livrables-list li::before {
    content: '';
    position: absolute;
    left: 0; top: .6em;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--teal);
  }

  /* Grilles de livrables à 2 ou 3 emplacements */
  @media (min-width: 760px) {
    .case-deliverables-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .case-deliverables-grid--3 { grid-template-columns: repeat(3, 1fr); }
  }

  /* Cadre unique (vidéo / podcast) */
  .case-media-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: color-mix(in oklab, var(--teal) 6%, var(--cream));
    border: 1px dashed color-mix(in oklab, var(--teal) 45%, var(--border));
  }
  .case-media-frame iframe,
  .case-media-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
  }
  .case-media-hint {
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--teal-deep);
  }

  /* Note de transparence en bas de section */
  .case-note {
    margin-top: 2rem;
    padding-left: 1rem;
    border-left: 2px solid color-mix(in oklab, var(--teal) 40%, transparent);
    font-size: .88rem;
    line-height: 1.7;
    color: var(--muted-foreground);
    max-width: 62ch;
  }

  /* ============================================================ */
  /* 33. L'AGENCE — page figée, profils défilants, cadres verts    */
  /* ============================================================ */

  /* ── Page statique : plus d'apparition au défilement.
        Les effets au survol / clic sur les images restent actifs. ── */
  .co-page .reveal,
  .co-page .reveal.visible,
  .co-page .reveal-stagger > *,
  .co-page .apropos-person.reveal,
  .co-page .apropos-person.reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
  }
  .co-page .apropos-person.reveal .apropos-person-photo img,
  .co-page .apropos-person.reveal.visible .apropos-person-photo img {
    clip-path: none !important;
  }
  .co-page .about-hero-blob,
  .co-page .about-hero-sheen { animation: none !important; }

  /* ── Profils mobilisés : intitulé unique qui alterne, esprit « ardoise » ── */
  .co-page .co-profiles {
    margin-top: 4rem;
    padding: 3rem 0;
    background: linear-gradient(165deg, #0b3b39 0%, #0e4744 55%, #093230 100%);
    border: 0;
    text-align: center;
  }
  .co-page .co-profiles-label {
    font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
    color: color-mix(in oklab, var(--pal-amber) 85%, transparent);
    margin-bottom: .9rem;
  }
  .co-page .co-profiles-line { margin: 0; }
  .co-page .co-profiles-cycle {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    padding-bottom: .5rem;
    border-bottom: 2px solid color-mix(in oklab, var(--pal-amber) 55%, transparent);
  }
  .co-page .co-profiles-sizer {
    display: block;
    visibility: hidden;
    white-space: nowrap;
  }
  .co-page .co-profiles-sizer,
  .co-page .co-profiles-word {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.7rem, 4vw, 2.8rem);
    line-height: 1.25;
  }
  .co-page .co-profiles-word {
    position: absolute;
    left: 0; top: 0;
    white-space: nowrap;
    color: var(--ivory);
    opacity: 0;
    transition: opacity .55s var(--ease-out-expo);
  }
  .co-page .co-profiles-word.is-active { opacity: 1; }

  /* ── Philosophie : cartes vertes en relief, contour repensé ── */
  .co-page .apropos-method-card {
    background: linear-gradient(168deg, #0d423f 0%, #0b3b39 60%, #08302e 100%);
    border: 1px solid color-mix(in oklab, var(--pal-amber) 26%, transparent);
    border-top-width: 1px;
    border-radius: 4px 18px 4px 18px;
    padding: 2.4rem 2rem 2.1rem;
    box-shadow: 0 20px 44px -16px rgba(8, 48, 46, .55);
    transition: transform .4s var(--ease-out-expo), box-shadow .4s, border-color .4s;
  }
  .co-page .apropos-method-card::after {
    background: radial-gradient(circle, color-mix(in oklab, var(--pal-amber) 55%, transparent), transparent 70%);
    opacity: .16;
  }
  .co-page .apropos-method-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in oklab, var(--pal-amber) 60%, transparent);
    box-shadow: 0 30px 60px -18px rgba(8, 48, 46, .7);
  }
  .co-page .apropos-method-card h3 { color: var(--ivory); font-weight: 700; }
  .co-page .apropos-method-card p { color: color-mix(in oklab, var(--ivory) 74%, transparent); }
  .co-page .apropos-num-dark,
  .co-page .reveal.visible .apropos-num-dark {
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in oklab, var(--pal-amber) 80%, transparent);
    font-size: 3rem;
  }

  /* Emplacement de visuel en attente sur la liste des projets */
  .cc-list-cover--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--pal-teal-deep) 5%, #fff);
    border-style: dashed;
  }
  .cc-list-cover--empty span {
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--pal-teal-deep) 60%, transparent);
  }

  /* Fiches projet : aperçu sur une colonne + meilleure lisibilité des apports */
  .case-preview--text { display: block; }
  .case-result p { color: var(--navy); }
  .case-result li { color: var(--navy); }

  /* ============================================================ */
  /* 34. L'AGENCE — profils défilants (tous visibles) + chiffres   */
  /* ============================================================ */

  .co-page .co-profiles { text-align: left; padding: 2.8rem 0; }
  .co-page .co-profiles-label { margin-bottom: 1.4rem; }
  .co-page .co-profiles-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .co-page .co-profiles-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2.75rem;
    width: max-content;
    animation: marquee 46s linear infinite;
  }
  .co-page .co-profiles-track:hover { animation-play-state: paused; }
  .co-page .co-profiles-item {
    flex-shrink: 0;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    line-height: 1.3;
    white-space: nowrap;
    color: var(--ivory);
  }
  .co-page .co-profiles-item::after {
    content: '◆';
    margin-left: 2.75rem;
    font-style: normal;
    font-size: .5em;
    vertical-align: middle;
    color: color-mix(in oklab, var(--pal-amber) 80%, transparent);
  }
  @media (prefers-reduced-motion: reduce) {
    .co-page .co-profiles-track { animation: none; flex-wrap: wrap; width: auto; gap: 1.25rem 2.5rem; }
    .co-page .co-profiles-item[aria-hidden="true"] { display: none; }
  }

  /* Chiffres des cadres : retour aux polices habituelles du site (pleins). */
  .co-page .apropos-num-dark,
  .co-page .reveal.visible .apropos-num-dark {
    color: var(--pal-amber);
    -webkit-text-stroke: 0;
    -webkit-text-stroke-color: transparent;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 3rem;
  }

  /* ============================================================ */
  /* 35. BLOG — respiration sous le héros, cadres et visuels       */
  /* ============================================================ */

  /* Le héros ne colle plus aux cartes. */
  .blog-page .blog-hero { padding-bottom: 5rem; }
  @media (min-width: 768px) { .blog-page .blog-hero { padding-bottom: 6.5rem; } }
  .blog-page .blog-grid-section { padding-top: 4rem; }
  @media (min-width: 768px) { .blog-page .blog-grid-section { padding-top: 5.5rem; } }
  .blog-page .results-count { color: var(--pal-teal-deep); font-weight: 700; }

  /* Visuels : cadre net, image parfaitement remplie (plus de débord). */
  .blog-cover {
    display: block;
    width: 100%;
    height: 230px;
    margin: 0 0 1.75rem;
    object-fit: cover;
    object-position: center;
    background: #fff;
    border: 1px solid color-mix(in oklab, var(--pal-taupe) 24%, transparent);
    border-radius: 4px;
  }
  @media (min-width: 768px) { .blog-cover { height: 260px; } }

  /* Cartes : contour cohérent avec la page Projets, survol ambre. */
  .blog-page .grid.reveal-stagger > a {
    background: #fff !important;
    border: 1px solid color-mix(in oklab, var(--pal-taupe) 26%, transparent) !important;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    transition: border-color .4s var(--ease-out-expo), transform .4s var(--ease-out-expo), box-shadow .4s;
  }
  .blog-page .grid.reveal-stagger > a:hover {
    border-color: var(--pal-amber) !important;
    box-shadow: 0 22px 48px -20px rgba(11, 59, 57, .3) !important;
  }
  .blog-page .grid.reveal-stagger > a > p:last-of-type { flex: 1 0 auto; }
  .blog-page .grid.reveal-stagger > a .text-muted-foreground { color: var(--navy) !important; }

  /* ============================================================ */
  /* 36. CONTACT — lisibilité du héros + formulaire et RDV réunis  */
  /* ============================================================ */

  /* Héros sur fond vert foncé : label et textes en clair. */
  .contact-hero .section-label { color: var(--ivory) !important; }
  .contact-hero-lead {
    font-size: 1rem;
    line-height: 1.7;
    color: color-mix(in oklab, var(--ivory) 88%, transparent);
  }
  @media (min-width: 768px) { .contact-hero-lead { font-size: 1.1rem; } }
  .contact-hero-lead--strong {
    font-weight: 600;
    color: var(--ivory);
  }

  /* Formulaire et prise de rendez-vous dans la même section. */
  .contact-or {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3.5rem 0 3rem;
  }
  .contact-or::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: color-mix(in oklab, var(--teal-deep) 22%, transparent);
  }
  .contact-or span {
    position: relative;
    padding: .4rem 1.2rem;
    background: var(--background, #fff);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--teal-deep);
  }
  .contact-rdv {
    padding: 0;
    background: none;
    border: 0;
  }
  .contact-rdv-head { max-width: 46rem; margin: 0 auto 2rem; text-align: center; }
  .contact-rdv-head .section-label { justify-content: center; }
  .contact-rdv-head p { margin-inline: auto; max-width: 42rem; }

  /* ============================================================ */
  /* 37. CONTACT — formulaire à gauche, agenda à droite            */
  /* ============================================================ */

  .contact-duo { display: grid; gap: 1.75rem; align-items: stretch; }
  @media (min-width: 1000px) { .contact-duo { grid-template-columns: 1fr 1fr; gap: 2rem; } }

  .contact-duo-col {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid color-mix(in oklab, var(--teal) 18%, rgba(255, 255, 255, .6));
    border-radius: 18px;
    padding: 2.25rem 2rem 2rem;
    box-shadow: 0 24px 60px -28px rgba(15, 46, 40, .32);
  }
  @media (min-width: 768px) { .contact-duo-col { padding: 2.75rem 2.5rem 2.5rem; } }

  .contact-col-head { margin-bottom: 1.75rem; }
  .contact-col-head .section-label { margin-bottom: 0; }

  /* Le formulaire occupe toute la hauteur de sa colonne. */
  .contact-duo-col--form .contact-form { flex: 1; display: flex; flex-direction: column; }
  .contact-duo-col--form .contact-field:has(textarea) { flex: 1; display: flex; flex-direction: column; }
  .contact-duo-col--form textarea { flex: 1; min-height: 160px; }

  /* Agenda : remplit la colonne de droite. */
  .contact-duo-col--rdv .contact-rdv-embed {
    flex: 1;
    min-height: 620px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none;
  }
  .contact-duo-col--rdv .calendly-inline-widget { height: 100% !important; min-height: 620px; }

  /* Coordonnées : bandeau sous les deux colonnes. */
  .contact-aside--row {
    display: grid;
    gap: 1.5rem 2.5rem;
    margin-top: 2rem;
    padding: 1.75rem 2rem;
    background: rgba(255, 255, 255, .7);
    border: 1px solid color-mix(in oklab, var(--teal) 16%, rgba(255, 255, 255, .6));
    border-radius: 16px;
  }
  @media (min-width: 760px) { .contact-aside--row { grid-template-columns: repeat(3, 1fr); } }
  .contact-aside--row .contact-aside-row { margin-bottom: 0; }

  /* ============================================================ */
  /* 38. BLOG — visuels en pleine largeur de carte                 */
  /* ============================================================ */

  /* La carte ne rogne plus le visuel : l'image occupe tout le haut du bloc. */
  .blog-page .grid.reveal-stagger > a { overflow: hidden; padding-top: 0 !important; }

  .blog-page .blog-cover,
  .blog-cover {
    display: block;
    width: calc(100% + 4rem);
    margin: 0 -2rem 1.75rem;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center center;
    background: #fff;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid color-mix(in oklab, var(--pal-taupe) 20%, transparent);
  }
  @media (min-width: 768px) {
    .blog-page .blog-cover,
    .blog-cover { width: calc(100% + 5rem); margin: 0 -2.5rem 2rem; }
  }

  /* ============================================================ */
  /* 39. FOOTER — texte aligné sous le logo, largeur limitée       */
  /* ============================================================ */

  .site-footer--compact .site-footer-blurb-wrap {
    max-width: 80rem;
    margin: 0 auto;
    padding: 20px 40px 4px;
    border-top: 1px solid rgba(255, 255, 255, .06);
  }
  .site-footer--compact .site-footer-blurb {
    max-width: 46rem;
    margin: 0;
    padding: 0;
    border-top: 0;
    font-size: .82rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .5);
  }
  @media (max-width: 768px) {
    .site-footer--compact .site-footer-blurb-wrap { padding: 18px 24px 4px; }
    .site-footer--compact .site-footer-blurb { max-width: none; }
  }

  /* ============================================================ */
  /* 40. HARMONISATION — pagination, contraste, responsive         */
  /* ============================================================ */

  /* ── Profils mobilisés : bandeau navy, pour trancher avec la
        section « L'équipe » en vert juste en dessous. ── */
  .co-page .co-profiles {
    background: linear-gradient(165deg, #0a1f2b 0%, #0d2733 55%, #071923 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .co-page .co-profiles-label { color: color-mix(in oklab, var(--teal-bright) 90%, transparent); }
  .co-page .co-profiles-item::after { color: color-mix(in oklab, var(--teal-bright) 75%, transparent); }

  /* ── Pagination ── */
  .pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 3.5rem;
  }
  .pager-num,
  .pager-arrow {
    min-width: 42px;
    height: 42px;
    padding: 0 .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in oklab, var(--pal-taupe) 30%, transparent);
    border-radius: 999px;
    background: #fff;
    color: var(--pal-teal-deep);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .25s, border-color .25s, color .25s;
  }
  .pager-num:hover:not(.is-current),
  .pager-arrow:hover:not([disabled]) {
    border-color: var(--pal-teal-deep);
    background: color-mix(in oklab, var(--pal-teal-deep) 6%, #fff);
  }
  .pager-num.is-current {
    background: var(--pal-teal-deep);
    border-color: var(--pal-teal-deep);
    color: var(--ivory);
    cursor: default;
  }
  .pager-arrow[disabled] { opacity: .35; cursor: default; }

  /* ============================================================ */
  /* 41. RESPONSIVE — téléphones : lisibilité, cadrage, animations */
  /* ============================================================ */

  @media (max-width: 767px) {
    /* Titres : on évite les tailles qui débordent sur petit écran. */
    .mm-hero-title, .su-hero-title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
    .su-h2--big { font-size: clamp(2rem, 11vw, 2.8rem); }
    .apropos-bigtitle { font-size: clamp(1.9rem, 9vw, 2.6rem); }
    .case-h2, .mm-h2, .su-h2 { font-size: clamp(1.55rem, 7vw, 2.1rem); }

    /* Sections : on resserre les respirations verticales. */
    .mm-section, .su-section { padding: 3.5rem 0; }
    .co-page .apropos-people-section { padding: 3rem 0; }
    .contact-duo-col { padding: 1.6rem 1.25rem; }
    .contact-aside--row { padding: 1.4rem 1.25rem; }

    /* Agenda Calendly : hauteur adaptée au mobile. */
    .contact-duo-col--rdv .contact-rdv-embed { min-height: 560px; }
    .contact-duo-col--rdv .calendly-inline-widget { min-height: 560px; }

    /* Visuels : jamais de débordement horizontal. */
    .cc-list-cover, .blog-cover, .case-cover { max-width: 100%; }
    .co-page .co-profiles-item { font-size: 1.15rem; }
    .co-page .co-profiles-track { gap: 1.75rem; }
    .co-page .co-profiles-item::after { margin-left: 1.75rem; }

    /* Défilements horizontaux : plus lents et plus lisibles au doigt. */
    .animate-marquee.whitespace-nowrap { animation-duration: 30s; }
    .co-page .co-profiles-track { animation-duration: 34s; }
    .co-page .apropos-people--rail .apropos-person { flex-basis: 70vw; }
    .co-people-nav { justify-content: center; }

    /* Cadres décoratifs : on réduit les formes qui mangent l'écran. */
    .mm-section--verbatims::before { font-size: 5rem; }
    .su-eco-partner::before { width: 140px; height: 140px; }

    /* Pagination confortable au pouce. */
    .pager-num, .pager-arrow { min-width: 46px; height: 46px; }
  }

  /* Anti-débordement horizontal global.
     ⚠ `overflow-x: hidden` sur html/body créerait un conteneur de défilement
     et casserait `position: sticky` (pile de panneaux de la page Expertises).
     `clip` bloque le débordement sans créer ce conteneur. */
  body { overflow-x: clip; }
  @supports not (overflow-x: clip) {
    body { overflow-x: hidden; }
  }
  img, video, iframe { max-width: 100%; }

  /* Accessibilité : on respecte le réglage système « moins d'animations ». */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* ============================================================ */
  /* 42. RETOUR EN HAUT — reprise du langage du curseur            */
  /*  (anneau fin teal + point central, comme #cursor-ring/dot)    */
  /* ============================================================ */

  .back-to-top {
    width: 52px;
    height: 52px;
    background: color-mix(in oklab, var(--ivory) 86%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(40, 170, 167, .5);
    color: var(--teal-deep);
    box-shadow: 0 8px 26px -10px rgba(15, 46, 40, .32);
    transition:
      opacity .35s ease,
      transform .35s var(--ease-out-expo),
      visibility .35s,
      width .3s var(--ease-out-expo),
      height .3s var(--ease-out-expo),
      border-color .3s,
      background-color .3s;
  }

  /* Le point central du curseur, repris en écho sous la flèche. */
  .back-to-top::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 11px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--teal);
    opacity: .85;
    transition: opacity .3s, transform .3s var(--ease-out-expo);
  }

  .back-to-top svg {
    width: 17px;
    height: 17px;
    margin-bottom: 5px;
    stroke-width: 1.9;
    transition: transform .35s var(--ease-out-expo);
  }

  /* Au survol : l'anneau s'ouvre, comme le curseur au-dessus d'un lien. */
  .back-to-top:hover,
  .back-to-top:focus-visible {
    width: 58px;
    height: 58px;
    background: color-mix(in oklab, var(--teal) 10%, var(--ivory));
    border-color: rgba(40, 170, 167, .95);
    color: var(--teal-deep);
  }
  .back-to-top:hover svg,
  .back-to-top:focus-visible svg { transform: translateY(-2px); }
  .back-to-top:hover::after,
  .back-to-top:focus-visible::after { opacity: 1; transform: scale(1.35); }

  /* Sur mobile (curseur système) : version pleine, plus lisible au doigt. */
  @media (max-width: 900px) {
    .back-to-top {
      width: 46px;
      height: 46px;
      background: var(--teal);
      border-color: var(--teal);
      color: var(--ivory);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .back-to-top::after { background: var(--ivory); }
    .back-to-top:hover, .back-to-top:focus-visible {
      width: 46px; height: 46px;
      background: var(--navy-deep); border-color: var(--navy-deep); color: var(--ivory);
    }
  }

  /* ============================================================ */
  /* 43. LIVRABLES RÉELS — visuels à leur format naturel           */
  /* ============================================================ */

  /* Les proportions varient beaucoup d'un livrable à l'autre :
     on n'impose plus de ratio, chaque visuel garde sa forme. */
  .case-deliverables-grid { align-items: start; }
  .case-slot {
    aspect-ratio: auto;
    margin: 0;
    background: #fff;
    border: 1px solid color-mix(in oklab, var(--teal) 16%, var(--border));
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 28px -14px rgba(15, 46, 40, .3);
    transition: transform .4s var(--ease-out-expo), box-shadow .4s, border-color .4s;
  }
  .case-slot:hover {
    transform: translateY(-3px);
    border-color: color-mix(in oklab, var(--teal) 55%, transparent);
    box-shadow: 0 20px 44px -16px rgba(15, 46, 40, .38);
  }
  .case-slot img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  /* Un seul visuel : on le recentre sans l'étirer sur toute la largeur. */
  .case-deliverables-grid--1 { max-width: 46rem; }
  .case-deliverables-grid--1 .case-slot { justify-self: start; }

  /* Vidéo livrable (Make Me Glow). */
  .case-media-frame--filled {
    border-style: solid;
    border-color: color-mix(in oklab, var(--teal) 22%, var(--border));
    background: #000;
  }
  .case-media-frame--filled video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
  }

  /* ── Renvoi vers l'article publié par le client ── */
  .case-press { padding: 0 0 4rem; background: var(--background); }
  @media (min-width: 768px) { .case-press { padding: 0 0 5rem; } }
  .case-press-card {
    display: block;
    padding: 2rem 2.1rem;
    background: color-mix(in oklab, var(--teal) 5%, #fff);
    border: 1px solid color-mix(in oklab, var(--teal) 26%, transparent);
    border-radius: 14px;
    text-decoration: none;
    transition: transform .4s var(--ease-out-expo), border-color .4s, box-shadow .4s;
  }
  .case-press-card:hover {
    transform: translateY(-3px);
    border-color: var(--teal);
    box-shadow: 0 22px 46px -20px rgba(15, 46, 40, .35);
  }
  .case-press-kicker {
    display: block;
    font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--teal-deep);
    margin-bottom: .7rem;
  }
  .case-press-card h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    color: var(--navy-deep);
    margin-bottom: .5rem;
  }
  .case-press-card p { font-size: .92rem; line-height: 1.65; color: var(--navy); margin-bottom: 1rem; }
  .case-press-link {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--teal-deep);
  }

  /* ============================================================ */
  /* 44. BLOG — refonte des cartes et cadrage strict des visuels   */
  /* ============================================================ */

  .blog-page .grid.reveal-stagger { gap: 1.75rem; }
  @media (min-width: 1024px) { .blog-page .grid.reveal-stagger { gap: 2rem; } }

  /* Carte : colonne nette, le visuel occupe tout le haut du bloc. */
  .blog-page .grid.reveal-stagger > a {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
    background: #fff !important;
    border: 1px solid color-mix(in oklab, var(--pal-taupe) 24%, transparent) !important;
    border-radius: 14px;
    box-shadow: 0 2px 4px rgba(11, 59, 57, .04);
    transition: transform .45s var(--ease-out-expo), border-color .45s, box-shadow .45s;
  }
  .blog-page .grid.reveal-stagger > a:hover {
    transform: translateY(-4px);
    border-color: var(--pal-amber) !important;
    box-shadow: 0 26px 52px -22px rgba(11, 59, 57, .34) !important;
  }

  /* Visuel : ratio unique 16/9, recadré au centre, aucune déformation. */
  .blog-page .blog-cover,
  .blog-cover {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center center;
    background: color-mix(in oklab, var(--pal-teal-deep) 6%, #fff);
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid color-mix(in oklab, var(--pal-taupe) 18%, transparent);
    transition: transform .6s var(--ease-out-expo);
  }
  .blog-page .grid.reveal-stagger > a:hover .blog-cover { transform: scale(1.03); }

  /* Le visuel reste net dans l'angle arrondi de la carte. */
  .blog-page .grid.reveal-stagger > a > :not(.blog-cover) { padding-inline: 1.9rem; }
  @media (min-width: 768px) { .blog-page .grid.reveal-stagger > a > :not(.blog-cover) { padding-inline: 2.3rem; } }

  /* Rythme interne : date, titre, chapô, lien — alignés en bas de carte. */
  .blog-page .grid.reveal-stagger > a > p:first-of-type { margin-top: 1.6rem; margin-bottom: .9rem; }
  .blog-page .grid.reveal-stagger > a h2 { margin-bottom: .9rem; font-size: 1.35rem; line-height: 1.25; }
  @media (min-width: 768px) { .blog-page .grid.reveal-stagger > a h2 { font-size: 1.5rem; } }
  .blog-page .grid.reveal-stagger > a > p:last-of-type { flex: 1 0 auto; margin-bottom: 1.5rem; }
  .blog-page .grid.reveal-stagger > a > span:last-child { padding-bottom: 1.9rem; }
  @media (min-width: 768px) { .blog-page .grid.reveal-stagger > a > span:last-child { padding-bottom: 2.2rem; } }

  /* Couverture en tête d'article : même logique, aucune coupure. */
  .blog-post-cover {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center center;
    border-radius: 12px;
  }

  /* ============================================================ */
  /* 45. LIVRABLES — blocs de taille égale, visuel unique agrandi  */
  /* ============================================================ */

  .case-deliverables { margin-top: 2.25rem; }

  /* 2 ou 3 visuels : tous les blocs ont exactement la même taille.
     `contain` garde l'image entière (aucun rognage) tout en
     conservant des cadres parfaitement réguliers. */
  .case-deliverables-grid--2 .case-slot,
  .case-deliverables-grid--3 .case-slot {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: #fff;
  }
  .case-deliverables-grid--2 .case-slot img,
  .case-deliverables-grid--3 .case-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Visuel unique : on l'affiche en grand, sur toute la largeur. */
  .case-deliverables-grid--1 {
    max-width: none;
    grid-template-columns: 1fr;
  }
  .case-deliverables-grid--1 .case-slot {
    aspect-ratio: auto;
    justify-self: stretch;
    padding: 0;
  }
  .case-deliverables-grid--1 .case-slot img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    background: #fff;
  }

  /* ============================================================ */
  /* 46. FICHES PROJET — bloc « Présentation » en texte suivi      */
  /* ============================================================ */

  .case-presentation { max-width: 62ch; }
  .case-presentation p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--navy);
    margin-bottom: 1.15rem;
  }
  @media (min-width: 768px) { .case-presentation p { font-size: 1.05rem; } }
  .case-presentation p:last-child { margin-bottom: 0; }
  .case-presentation strong { color: var(--navy-deep); font-weight: 700; }

  /* Le premier paragraphe sert de chapô. */
  .case-presentation p:first-child {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--navy-deep);
  }
  @media (min-width: 768px) { .case-presentation p:first-child { font-size: 1.2rem; } }

  /* ============================================================ */
  /* 47. PROJETS — expertises en sous-titre sous le titre          */
  /*     Traitement typographique : pas de pastilles, une ligne    */
  /*     de mots séparés par de fins traits verticaux.             */
  /* ============================================================ */

  .cc-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem 0;
    margin-top: 2rem;
    max-width: 58rem;
  }
  @media (min-width: 768px) { .cc-filters { margin-top: 2.5rem; } }

  .cc-filter {
    position: relative;
    padding: .25rem 1.1rem .45rem;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: color-mix(in oklab, var(--pal-teal-deep) 58%, transparent);
    cursor: pointer;
    transition: color .3s var(--ease-out-expo);
  }
  @media (min-width: 768px) { .cc-filter { font-size: .9rem; } }

  /* Fin séparateur vertical entre les entrées. */
  .cc-filter + .cc-filter::before {
    content: '';
    position: absolute;
    left: 0;
    top: .35em;
    bottom: .45em;
    width: 1px;
    background: color-mix(in oklab, var(--pal-taupe) 34%, transparent);
  }
  .cc-filter:first-child { padding-left: 0; }

  /* Soulignement animé, dans l'esprit des liens du site. */
  .cc-filter::after {
    content: '';
    position: absolute;
    left: 1.1rem;
    right: 1.1rem;
    bottom: 0;
    height: 2px;
    background: var(--pal-teal-deep);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease-out-expo);
  }
  .cc-filter:first-child::after { left: 0; }
  .cc-filter:hover { color: var(--pal-teal-deep); }
  .cc-filter:hover::after { transform: scaleX(1); }

  .cc-filter.is-current {
    color: var(--pal-teal-deep);
    font-weight: 700;
    cursor: default;
  }
  .cc-filter.is-current::after { transform: scaleX(1); }

  .cc-filters-empty {
    margin-top: 2rem;
    font-size: .92rem;
    color: var(--pal-taupe);
  }

  @media (max-width: 640px) {
    .cc-filter { font-size: .78rem; padding: .25rem .8rem .4rem; }
    .cc-filter::after { left: .8rem; right: .8rem; }
  }

  /* ============================================================ */
  /* 48. ARTICLES — page figée, héros resserré, rythme de lecture  */
  /* ============================================================ */

  /* Pages d'articles entièrement statiques : aucune apparition au défilement.
     Les effets au survol (liens, images) restent actifs. */
  .blog-post .reveal,
  .blog-post .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
  }

  /* ── Héros resserré ── */
  .blog-post-hero .blog-post-cover { margin-top: 1.5rem; }
  .blog-post-hero h1 { margin-top: .35rem; }

  /* Date · temps de lecture : discret, sous le fil d'Ariane. */
  .blog-post-hero > div > p:first-of-type {
    font-size: .64rem !important;
    letter-spacing: .16em;
    font-weight: 600;
    color: var(--pal-taupe) !important;
    margin-bottom: .6rem !important;
  }

  /* ── Variations de sections dans le corps de l'article ── */

  /* Chaque intertitre ouvre un nouveau bloc, marqué d'un filet teal. */
  .blog-post article h2 {
    position: relative;
    margin-top: 3.25rem;
    padding-top: 1.75rem;
    color: var(--pal-teal-deep);
  }
  .blog-post article h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 3px;
    background: var(--teal);
  }
  .blog-post article h2:first-of-type { margin-top: 1rem; }

  /* Les listes deviennent des encarts, pour aérer les longs passages. */
  .blog-post article ul {
    padding: 1.4rem 1.6rem !important;
    background: color-mix(in oklab, var(--teal) 5%, var(--cream));
    border-left: 3px solid color-mix(in oklab, var(--teal) 55%, transparent);
    border-radius: 0 10px 10px 0;
  }
  .blog-post article ul li { line-height: 1.7; }
  .blog-post article ul strong { color: var(--pal-teal-deep); }

  /* Un paragraphe entièrement en gras devient une accroche. */
  .blog-post article p > strong:only-child {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.28rem;
    line-height: 1.5;
    color: var(--pal-teal-deep);
  }

  /* Mention de la marque dans le corps de l'article. */
  .blog-post article strong { color: var(--navy-deep); }

  @media (max-width: 767px) {
    .blog-post-hero { padding-top: 7.5rem; }
    .blog-post article h2 { margin-top: 2.5rem; }
  }

  /* ============================================================ */
  /* 49. PROJETS — héros et grille nettement distincts             */
  /* ============================================================ */

  /* Le héros garde une teinte craie franche jusqu'en bas :
     la rupture avec la grille est ainsi visible, plus de ton sur ton.
     Hauteur réduite (le bandeau d'expertises ajoute déjà une ligne)
     et respiration calquée sur celle de la page Blog. */
  .cc-page .cc-hero {
    background: linear-gradient(180deg, var(--pal-chalk) 0%, color-mix(in oklab, var(--pal-chalk) 82%, #fff) 100%);
    border-bottom: 1px solid color-mix(in oklab, var(--pal-taupe) 30%, transparent);
    padding-top: 8.5rem;
    padding-bottom: 5rem;
  }
  @media (min-width: 768px) {
    .cc-page .cc-hero { padding-top: 10rem; padding-bottom: 6.5rem; }
  }

  /* Même écart qu'au blog entre le héros et les cartes. */
  .cc-page .cc-grid-section { padding-top: 4rem; }
  @media (min-width: 768px) { .cc-page .cc-grid-section { padding-top: 5.5rem; } }

  /* La grille passe sur un fond clair distinct, et décolle du héros.
     Sélecteur aligné sur `.cc-page section.bg-background` (même
     spécificité, déclaré après) pour l'emporter sur le fond papier. */
  .cc-page section.cc-grid-section {
    background: #fff !important;
  }

  /* ============================================================ */
  /* 50. BLOG — page figée et cartes retravaillées                 */
  /* ============================================================ */

  /* Aucune apparition au défilement : la page est statique.
     Les effets au survol restent actifs. */
  .blog-page .reveal,
  .blog-page .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
  }

  /* Titre du héros : même traitement que les autres pages de listing. */
  .blog-page .blog-hero h1 { color: var(--ivory); }
  .blog-page .blog-hero h1 .italic { color: var(--teal-bright) !important; }

  /* ── Cartes : titre dominant, chapô secondaire, lien ancré en bas ── */
  .blog-page .grid.reveal-stagger > a h2 {
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.22;
    margin-top: 1.7rem;
    margin-bottom: .85rem;
    color: var(--pal-teal-deep) !important;
  }
  @media (min-width: 768px) {
    .blog-page .grid.reveal-stagger > a h2 { font-size: 1.6rem; }
  }

  .blog-page .grid.reveal-stagger > a p {
    font-size: .92rem;
    line-height: 1.7;
    color: var(--navy) !important;
    margin-bottom: 1.6rem;
  }

  /* Le lien de lecture se détache par un filet, calé en bas de carte. */
  .blog-page .grid.reveal-stagger > a > span:last-child {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1px solid color-mix(in oklab, var(--pal-taupe) 22%, transparent);
    color: var(--pal-teal-deep) !important;
  }
  .blog-page .grid.reveal-stagger > a:hover > span:last-child { color: var(--pal-amber) !important; }

  /* ============================================================ */
  /* 51. HEADER — page courante signalée                           */
  /*     Même langage que les filtres Projets : soulignement teal. */
  /* ============================================================ */

  header nav ul li > a[aria-current="page"] {
    position: relative;
    color: var(--teal) !important;
  }
  header nav ul li > a[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 2px;
    background: var(--teal);
    border-radius: 2px;
  }


  /* Pastilles de programme (MasterMind / Startups) : anneau de focus
     plutôt qu'un soulignement, pour ne pas alourdir le bouton plein. */
  .nav-program-box[aria-current="page"] {
    box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px currentColor;
  }

  /* Menu mobile : même repère, aligné à gauche du libellé. */
  .mobile-menu > a[aria-current="page"] {
    position: relative;
    color: var(--teal) !important;
    font-weight: 700;
  }
  .mobile-menu > a[aria-current="page"]::before {
    content: '';
    position: absolute;
    left: -.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.1em;
    border-radius: 2px;
    background: var(--teal);
  }

  /* Pages à fond sombre : on bascule sur le teal clair, plus lisible. */
  .mm-page header nav ul li > a[aria-current="page"],
  .su-page header nav ul li > a[aria-current="page"],
  .exp-page header nav ul li > a[aria-current="page"] {
    color: var(--teal-bright) !important;
  }
  .mm-page header nav ul li > a[aria-current="page"]::after,
  .su-page header nav ul li > a[aria-current="page"]::after,
  .exp-page header nav ul li > a[aria-current="page"]::after {
    background: var(--teal-bright);
  }


  /* ============================================================ */
  /* 53. STARTUP — bloc « questions » figé (sans animation)        */
  /* ============================================================ */

  .su-questions.su-questions--stairs { opacity: 1 !important; transform: none !important; }

  /* ============================================================ */
  /* 54. CTA E-MAIL — lien mailto                                  */
  /* ============================================================ */

  .cta-mail-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  @media (min-width: 640px) { .cta-mail-row { flex-direction: row; justify-content: center; gap: 1.25rem; } }


  /* ============================================================ */
  /* 55. CONTACT — chapô en blanc, en-têtes de colonnes épurés     */
  /* ============================================================ */

  /* Les trois lignes du héros passent en blanc plein. */
  .contact-hero-lead,
  .contact-hero-lead--strong { color: var(--ivory) !important; }

  /* En-tête de colonne réduit au seul intitulé. */
  .contact-col-head { margin-bottom: 1.5rem; }
  .contact-col-head .section-label {
    margin-bottom: 0;
    font-size: .8rem;
    letter-spacing: .18em;
    color: var(--teal-deep);
  }
  @media (min-width: 768px) { .contact-col-head .section-label { font-size: .88rem; } }

  /* ============================================================ */
  /* 56. BLOG — survol sans mouvement, description renforcée       */
  /* ============================================================ */

  /* Plus aucun déplacement ni zoom au passage de la souris :
     seul le contour change, sans transition perceptible. */
  .blog-page .grid.reveal-stagger > a,
  .blog-page .grid.reveal-stagger > a:hover {
    transform: none !important;
    box-shadow: 0 2px 4px rgba(11, 59, 57, .04) !important;
    transition: border-color .2s ease !important;
  }
  .blog-page .grid.reveal-stagger > a:hover {
    border-color: var(--pal-amber) !important;
  }
  .blog-page .grid.reveal-stagger > a .blog-cover,
  .blog-page .grid.reveal-stagger > a:hover .blog-cover {
    transform: none !important;
    transition: none !important;
  }

  /* Chapô des cartes : plus de corps et de présence. */
  .blog-page .grid.reveal-stagger > a p {
    font-size: .96rem;
    font-weight: 500;
    line-height: 1.65;
    color: var(--navy-deep) !important;
  }
  @media (min-width: 768px) {
    .blog-page .grid.reveal-stagger > a p { font-size: 1rem; }
  }

  /* ============================================================ */
  /* CTA compact (startup)                                         */
  /* ============================================================ */
  .cta-title--compact {
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    line-height: 1.15;
  }