/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: "DM Serif Display", Georgia, "Times New Roman", Times, serif;
    --font-mono: "JetBrains Mono", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
    --spacing: 0.25rem;
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-rouge-teco: #E8000A;
    --color-rouge-deep: #C40014;
    --color-or-esprit: #F59E0B;
    --color-bg-primary: #1F2230;
    --color-bg-elevated: rgba(255, 255, 255, 0.04);
    --color-bg-elevated-2: rgba(255, 255, 255, 0.03);
    --color-text-primary: #e8eaf2;
    --color-text-secondary: rgba(255, 255, 255, 0.7);
    --color-text-muted: rgba(255, 255, 255, 0.55);
    --color-border-subtle: rgba(255, 255, 255, 0.10);
    --color-bg-primary-light: #F7F4EE;
    --color-success: #10B981;
    --color-error: #EF4444;
    --text-hero: 4.5rem;
    --text-h1: 2.5rem;
    --text-h2: 1.75rem;
    --text-h3: 1.25rem;
    --text-body: 1rem;
    --text-body-sm: 0.875rem;
    --text-caption: 0.75rem;
    --tracking-wordmark: -0.04em;
    --tracking-tagline: 0.5em;
    --tracking-hero: -0.02em;
    --leading-hero: 1.1;
    --leading-body: 1.5;
    --radius-item: 0.75rem;
    --radius-button: 0.5rem;
    --logo-h-nav: 200px;
    --logo-h-nav-mobile: 150px;
    --logo-h-footer: 180px;
    --logo-v-hero: 360px;
    --logo-v-bientot: 280px;
    --logo-v-footer: 120px;
    --ease-tactile: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-hover: 150ms;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    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 {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.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 {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :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)) {
        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, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-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"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .start {
    inset-inline-start: var(--spacing);
  }
  .-end {
    inset-inline-end: calc(var(--spacing) * -1);
  }
  .end {
    inset-inline-end: var(--spacing);
  }
  .row-2 {
    grid-row: 2;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .table {
    display: table;
  }
  .h-1 {
    height: calc(var(--spacing) * 1);
  }
  .h-7 {
    height: calc(var(--spacing) * 7);
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .text-left {
    text-align: left;
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .underline {
    text-decoration-line: underline;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --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);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    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,);
  }
  .filter {
    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-filter {
    -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));
  }
  .delay-1 {
    transition-delay: 1ms;
  }
  .delay-2 {
    transition-delay: 2ms;
  }
  .delay-5 {
    transition-delay: 5ms;
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
}
@layer components {
  .liquid-glass-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(30px) saturate(1.3);
    -webkit-backdrop-filter: blur(30px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 12px 40px rgba(0, 0, 0, 0.18);
  }
  html[data-theme="light"] .liquid-glass-card {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 8px 30px rgba(0, 0, 0, 0.05);
  }
  @media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]) .liquid-glass-card {
      background: rgba(255, 255, 255, 0.35);
      backdrop-filter: blur(20px) saturate(1.2);
      -webkit-backdrop-filter: blur(20px) saturate(1.2);
      border: 1px solid rgba(0, 0, 0, 0.06);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 8px 30px rgba(0, 0, 0, 0.05);
    }
  }
  .glass-stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  .glass-stage::before {
    content: "";
    position: absolute;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    filter: blur(130px);
    pointer-events: none;
    top: -120px;
    left: -120px;
    z-index: -1;
    background: rgba(232, 0, 10, 0.34);
  }
  .glass-stage::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(130px);
    pointer-events: none;
    bottom: -110px;
    right: -110px;
    z-index: -1;
    background: rgba(245, 158, 11, 0.24);
  }
  .glass-card-1 {
    background: var(--color-bg-elevated);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
  }
  .glass-card-2 {
    background: var(--color-bg-elevated-2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
  }
  .glass-card-3 {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }
  .wordmark {
    font-family: var(--font-sans);
    font-weight: 800;
    letter-spacing: var(--tracking-wordmark);
    line-height: 1;
  }
  .wordmark .accent {
    color: var(--color-rouge-teco);
  }
  .lockup-vertical {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .tagline {
    font-family: var(--font-sans);
    font-weight: 300;
    letter-spacing: var(--tracking-tagline);
    color: var(--color-text-muted);
    padding-left: 1.2em;
  }
  .lockup-horizontal {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
  }
  .lockup-horizontal .lockup-sep {
    display: inline-block;
    width: 1px;
    height: 1.1em;
    background: currentColor;
    opacity: 0.3;
  }
  .lockup-horizontal .filiale {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--color-text-primary);
  }
  .monogramme-T {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-rouge-teco);
    border-radius: 22%;
    box-shadow: 0 8px 32px rgba(232, 0, 10, 0.30);
    color: #ffffff;
    font-family: var(--font-sans);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
  }
  .monogramme-T-sm {
    width: 32px;
    height: 32px;
    font-size: 22px;
    border-radius: 8px;
  }
  .monogramme-T-md {
    width: 64px;
    height: 64px;
    font-size: 44px;
    border-radius: 14px;
  }
  .monogramme-T-lg {
    width: 128px;
    height: 128px;
    font-size: 86px;
    border-radius: 28px;
  }
  .monogramme-T-xl {
    width: 256px;
    height: 256px;
    font-size: 170px;
    border-radius: 56px;
  }
  .btn {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--text-body-sm);
    padding: 0 1rem;
    height: 2.5rem;
    border-radius: var(--radius-button);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition: filter var(--duration-hover) ease-out, background var(--duration-hover) ease-out, color var(--duration-hover) ease-out, transform var(--duration-hover) ease-out;
    user-select: none;
    white-space: nowrap;
  }
  .btn:focus-visible {
    outline: 2px solid var(--color-rouge-teco);
    outline-offset: 2px;
  }
  .btn:active:not(:disabled) {
    transform: translateY(1px);
  }
  .btn:disabled, .btn.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }
  .btn .btn-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
  }
  .btn.is-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
  }
  .btn.is-loading::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: inherit;
    animation: btn-spin 0.7s linear infinite;
  }
  @keyframes btn-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .btn-sm {
    height: 2rem;
    padding: 0 0.75rem;
    font-size: 0.8125rem;
    border-radius: 6px;
  }
  .btn-lg {
    height: 3rem;
    padding: 0 1.5rem;
    font-size: 1rem;
  }
  /* Un bouton ne doit JAMAIS pousser la page plus large que l'ecran.
     « Voir toutes les formations et tarifs » en white-space:nowrap avec
     24 px de padding reclamait 311 px la ou 288 etaient disponibles a
     320 px d'ecran : la page passait a 327 px, et tout element
     position:fixed (menu mobile en feuille basse, bandeau RGPD) se
     calant sur la largeur de PAGE sortait de l'ecran a droite.
     La hauteur des boutons est fixe, on ne peut pas les laisser passer
     a la ligne : on resserre le rembourrage et le corps sous 380 px. */
  .btn {
    max-width: 100%;
  }
  @media (max-width: 380px) {
    .btn-lg {
      padding: 0 1rem;
      font-size: 0.875rem;
    }
  }
  .btn-primary {
    background: var(--color-rouge-teco);
    color: #FFFFFF;
  }
  .btn-primary:hover:not(:disabled) {
    filter: brightness(1.1);
  }
  .btn-secondary {
    background: transparent;
    color: var(--color-rouge-teco);
    border: 1px solid var(--color-rouge-teco);
  }
  .btn-secondary:hover:not(:disabled) {
    background: rgba(232, 0, 10, 0.08);
  }
  .btn-tertiary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
  }
  .btn-tertiary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.14);
  }
  .btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
  }
  .btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-primary);
  }
  .btn-destructive {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-error);
    border: 1px solid rgba(239, 68, 68, 0.3);
  }
  .btn-destructive:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.5);
  }
  .btn-destructive:focus-visible {
    outline-color: var(--color-error);
  }
  .btn-outline {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  .btn-outline:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.18);
  }
  .hero {
    position: relative;
    padding: 4rem 1.5rem 3rem;
    min-height: 540px;
    overflow: hidden;
    isolation: isolate;
    background: transparent;
  }
  .hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 4rem;
    align-items: center;
    min-height: 480px;
  }
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-rouge-teco);
  }
  .hero-eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-rouge-teco);
    box-shadow: 0 0 8px rgba(232, 0, 10, 0.6);
  }
  .hero-title {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    letter-spacing: var(--tracking-hero);
    line-height: var(--leading-hero);
    margin: 0;
    color: var(--color-text-primary);
    max-width: 720px;
  }
  .hero-title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--color-rouge-teco);
  }
  .hero-desc {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-width: 540px;
    margin: 0;
  }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
  }
  .hero-meta {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
  }
  .hero-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }
  .hero-meta-value {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-rouge-teco);
    line-height: 1;
  }
  .hero-meta-label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
  }
  .hero-visual {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-globe {
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1 / 1;
    position: relative;
    animation: hero-globe-float 6s ease-in-out infinite;
  }
  .hero-globe-canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
  }
  .hero-globe-canvas:active {
    cursor: grabbing;
  }
  @keyframes hero-globe-float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-15px);
    }
  }
  .hero-orb-fallback {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 80, 90, 0.95) 0%, var(--color-rouge-teco) 35%, rgba(180, 0, 18, 1) 70%, rgba(120, 0, 12, 1) 100%);
    box-shadow: inset -20px -30px 60px rgba(0, 0, 0, 0.4), inset 20px 20px 40px rgba(255, 200, 200, 0.25), 0 30px 80px rgba(232, 0, 10, 0.4), 0 0 100px rgba(232, 0, 10, 0.2);
    position: relative;
    animation: hero-globe-float 6s ease-in-out infinite;
  }
  .hero-globe[data-loaded="true"] .hero-orb-fallback {
    display: none;
  }
  .hero-floating-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    animation: hero-card-float 7s ease-in-out infinite;
  }
  .hero-floating-card.fc-1 {
    top: 5%;
    right: 8%;
    animation-delay: -1s;
  }
  .hero-floating-card.fc-2 {
    bottom: 12%;
    left: 0;
    animation-delay: -3s;
  }
  @keyframes hero-card-float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-12px);
    }
  }
  .hero-floating-card .fc-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(232, 0, 10, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-rouge-teco);
    flex-shrink: 0;
  }
  .hero-floating-card .fc-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }
  .hero-floating-card .fc-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    white-space: nowrap;
  }
  .hero-floating-card .fc-sub {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    white-space: nowrap;
  }
  .cursor-glow {
    position: relative;
    isolation: isolate;
  }
  .cursor-glow::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient( 400px circle at var(--cursor-x, 50%) var(--cursor-y, 50%), rgba(232, 0, 10, 0.14), transparent 70%);
    pointer-events: none;
    transition: background 80ms ease;
    z-index: -1;
  }
  html[data-theme="light"] .cursor-glow::before {
    background: radial-gradient( 400px circle at var(--cursor-x, 50%) var(--cursor-y, 50%), rgba(232, 0, 10, 0.18), transparent 70%);
  }
  @media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]) .cursor-glow::before {
      background: radial-gradient( 400px circle at var(--cursor-x, 50%) var(--cursor-y, 50%), rgba(232, 0, 10, 0.18), transparent 70%);
    }
  }
  @media (max-width: 900px) {
    .hero {
      padding: 2rem 1rem 2.5rem;
      min-height: auto;
    }
    .hero-inner {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
    .hero-visual {
      display: none;
    }
    .hero-title {
      font-size: clamp(2rem, 7vw, 3rem);
    }
    .hero-meta {
      flex-direction: column;
      gap: 0.75rem;
    }
    .hero-meta-item {
      width: 100%;
    }
    .hero-meta-value {
      font-size: 1.25rem;
    }
    .hero-actions {
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 0.5rem;
      width: 100%;
    }
    .hero-actions .btn {
      flex: 1 1 0;
      height: 2.5rem;
      padding: 0 0.85rem;
      font-size: 0.8125rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .hero-actions .btn-icon {
      display: none;
    }
  }
  @media (max-width: 600px) {
    .footer-bottom {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 1.25rem;
    }
    .footer-social {
      justify-content: center;
    }
  }
  .accent-serif {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-rouge-teco);
  }
  .nav-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(31, 34, 48, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    height: 64px;
    transition: background 200ms ease, border-color 200ms ease;
  }
  .nav-inner {
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
  .nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
  }
  .nav-brand .wordmark {
    font-size: 1.5rem;
  }
  .nav-brand-sep {
    color: var(--color-text-muted);
    font-weight: 300;
    opacity: 0.5;
  }
  .nav-brand-tag {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.125rem;
    color: var(--color-rouge-teco);
  }
  .nav-items {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav-items a {
    text-decoration: none;
    color: var(--color-text-secondary);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.875rem;
    transition: color 150ms ease;
    position: relative;
    padding: 0.5rem 0;
  }
  .nav-items a:hover {
    color: var(--color-text-primary);
  }
  .nav-items a.is-active {
    color: var(--color-text-primary);
  }
  .nav-items a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--color-rouge-teco);
    border-radius: 2px;
  }
  .nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .nav-lang {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
  }
  .nav-lang button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font: inherit;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    transition: color 150ms ease;
  }
  .nav-lang button.is-active {
    color: var(--color-text-primary);
  }
  .nav-lang button:hover {
    color: var(--color-text-primary);
  }
  .nav-lang .nav-lang-sep {
    color: var(--color-text-muted);
    opacity: 0.4;
  }
  .nav-burger {
    display: none;
    background: transparent;
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-primary);
  }
  .nav-burger svg {
    width: 20px;
    height: 20px;
  }
  @media (max-width: 900px) {
    .nav-sticky {
      height: 56px;
    }
    .nav-items {
      display: none;
    }
    .nav-lang {
      display: none;
    }
    .nav-burger {
      display: inline-flex;
    }
    .nav-brand .wordmark {
      font-size: 1.25rem;
    }
    .nav-brand-tag {
      font-size: 1rem;
    }
    .nav-inner {
      padding: 0 1rem;
      gap: 0.75rem;
    }
    .nav-right .btn-primary {
      display: none;
    }
  }
  /* ============================================================
     MENU MOBILE V2 : FEUILLE BASSE  (valide Severin le 24/07/2026)
     Maquettes de reference :
       v2-prep/menu-mobile-variantes.html    (choix de la mecanique)
       v2-prep/menu-mobile-B-variantes.html  (traitement B4 retenu)

     Remplace l'ancien volet plein ecran, qui alignait neuf entrees
     de poids identique, collait un chevron decoratif sur chacune,
     repetait « Mon espace » en liste ET en bouton, et ne se fermait
     qu'au clic.

     Ce qu'il apporte : deux etages (destinations puis service),
     ouverture d'un bloc avec tout visible, barre d'action vissee en
     bas, et surtout des GESTES (on tire la feuille, on la rabat).

     ATTENTION A L'INTEGRATION : ce composant est en position:fixed.
     Sur telephone, un element fixed se cale sur la LARGEUR DE PAGE
     et non sur l'ecran. Toute page qui deborde horizontalement le
     fera sortir a droite. Aucun debordement horizontal, jamais.
     ============================================================ */
  .nav-mobile {
    --nm-verre: rgba(31, 34, 48, 0.68);
    --nm-bord: rgba(255, 255, 255, 0.12);
    --nm-ligne: rgba(255, 255, 255, 0.10);
    --nm-ligne-2: rgba(255, 255, 255, 0.16);
    --nm-voile: rgba(10, 11, 16, 0.60);
    --nm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --nm-ressort: cubic-bezier(0.16, 1.02, 0.30, 1);
    position: fixed;
    inset: 0;
    z-index: 99;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    /* la visibilite ne retombe qu'apres la sortie de la feuille */
    transition: visibility 0s linear 480ms;
  }
  .nav-mobile.is-open {
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
  }
  html[data-theme="light"] .nav-mobile {
    --nm-verre: rgba(252, 250, 246, 0.74);
    --nm-bord: rgba(120, 90, 40, 0.16);
    --nm-ligne: rgba(120, 90, 40, 0.14);
    --nm-ligne-2: rgba(120, 90, 40, 0.22);
    --nm-voile: rgba(40, 34, 25, 0.34);
  }
  /* au dela de 900 px le burger disparait : la feuille n'a plus lieu d'etre */
  @media (min-width: 901px) {
    .nav-mobile { display: none; }
  }

  .nav-mobile-voile {
    position: absolute;
    inset: 0;
    background: var(--nm-voile);
    opacity: 0;
    transition: opacity 280ms var(--nm-ease);
  }
  .nav-mobile.is-open .nav-mobile-voile {
    opacity: 1;
  }

  .nav-mobile-feuille {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 92%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 1.15rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--nm-bord);
    border-bottom: none;
    border-radius: 22px 22px 0 0;
    background: var(--nm-verre);
    -webkit-backdrop-filter: blur(26px) saturate(1.35);
    backdrop-filter: blur(26px) saturate(1.35);
    box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.50);
    transform: translateY(100%);
    transition: transform 460ms var(--nm-ressort);
  }
  .nav-mobile.is-open .nav-mobile-feuille {
    transform: translateY(0);
  }
  /* Pendant le glissement, la feuille suit le doigt AU PIXEL : toute
     transition la rendrait molle. Le JS pose cette classe au contact
     et la retire a la levee, ou le ressort reprend la main. */
  .nav-mobile-feuille.nm-drag {
    transition: none;
  }

  /* halos : ils appartiennent a la feuille et se deplacent avec elle */
  .nav-mobile-orbs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    border-radius: 22px 22px 0 0;
  }
  .nav-mobile-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(46px);
    opacity: 0.55;
  }
  html[data-theme="light"] .nav-mobile-orb {
    opacity: 0.42;
  }
  .nav-mobile-orb.r {
    width: 230px;
    height: 230px;
    background: radial-gradient(circle, rgba(232, 0, 10, 0.62), transparent 68%);
    left: -60px;
    top: -70px;
  }
  .nav-mobile-orb.o {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(212, 160, 71, 0.42), transparent 68%);
    right: -70px;
    bottom: -60px;
  }
  /* La derive ne tourne QUE menu ouvert : fermee, la feuille est hors
     ecran et l'animation ne serait du calcul pour personne. */
  .nav-mobile.is-open .nav-mobile-orb.r {
    animation: nm-derive-1 22s var(--nm-ease) infinite alternate;
  }
  .nav-mobile.is-open .nav-mobile-orb.o {
    animation: nm-derive-2 27s var(--nm-ease) infinite alternate;
  }
  @keyframes nm-derive-1 {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(70px, 40px) scale(1.18); }
  }
  @keyframes nm-derive-2 {
    from { transform: translate(0, 0) scale(1.1); }
    to { transform: translate(-60px, -34px) scale(0.92); }
  }

  /* poignee : le signal visuel qui dit « ca se tire » */
  .nav-mobile-poignee {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0 0.45rem;
    cursor: grab;
    touch-action: none;
    position: relative;
    z-index: 3;
  }
  .nav-mobile-poignee i {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 99px;
    background: var(--nm-ligne-2);
  }
  .nav-mobile-poignee:active {
    cursor: grabbing;
  }
  .nav-mobile.is-open .nav-mobile-poignee i {
    animation: nm-souffle 3.4s ease-in-out infinite;
  }
  @keyframes nm-souffle {
    0%, 100% { transform: scaleX(1); opacity: 0.75; }
    50% { transform: scaleX(1.25); opacity: 1; }
  }

  .nav-mobile-corps {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: relative;
    z-index: 2;
  }

  /* Repere unique : il GLISSE d'une entree a l'autre, il ne clignote
     pas. Il dit « tu es ici », la ou l'onde dit « j'ai senti ton doigt ». */
  .nav-mobile-repere {
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--color-rouge-teco);
    opacity: 0;
    pointer-events: none;
    transition: transform 300ms var(--nm-ressort), height 300ms var(--nm-ressort), opacity 200ms ease;
  }
  .nav-mobile-repere.vu {
    opacity: 1;
  }

  .nav-mobile-lien {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.82rem 0.55rem 0.82rem 0.2rem;
    border-radius: 10px;
    overflow: hidden;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.06rem;
    color: var(--color-text-primary);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 160ms var(--nm-ease), background 160ms ease;
  }
  .nav-mobile-lien:active {
    transform: scale(0.982);
    background: rgba(232, 0, 10, 0.07);
  }
  .nav-mobile-lien .idx {
    min-width: 1.4rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }
  .nav-mobile-lien.is-active {
    color: var(--color-rouge-teco);
    text-shadow: 0 0 22px rgba(232, 0, 10, 0.45);
  }
  .nav-mobile-lien.is-active .idx {
    color: var(--color-rouge-teco);
  }
  /* onde nee SOUS LE DOIGT, au point exact du contact */
  .nav-mobile-lien::after {
    content: "";
    position: absolute;
    left: var(--rx, 50%);
    top: var(--ry, 50%);
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 0, 10, 0.55), rgba(232, 0, 10, 0));
    transform: scale(0);
    opacity: 0;
  }
  .nav-mobile-lien.onde::after {
    animation: nm-onde 620ms var(--nm-ease) both;
  }
  @keyframes nm-onde {
    0% { transform: scale(0); opacity: 0.9; }
    100% { transform: scale(22); opacity: 0; }
  }
  .nav-mobile-filet {
    height: 1px;
    margin: 0 0.2rem;
    background: var(--nm-ligne);
  }

  /* Les quatre entrees de service tiennent TOUJOURS sur une seule
     ligne, reparties d'un bord a l'autre. La taille se resserre sur
     les petits ecrans plutot que de laisser le bloc passer a la ligne. */
  .nav-mobile-util {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.15rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--nm-ligne);
  }
  .nav-mobile-util a {
    padding: 0.28rem 0;
    font-family: var(--font-sans);
    font-size: clamp(0.72rem, 3.1vw, 0.83rem);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    white-space: nowrap;
  }
  .nav-mobile-util a:active,
  .nav-mobile-util a.is-active {
    color: var(--color-rouge-teco);
  }

  /* Barre d'action : UN SEUL bouton plein. Deux boutons pleine
     largeur pesaient 36 % de la feuille pour deux actions
     d'importance tres inegale (retour Severin). */
  .nav-mobile-barre {
    flex: none;
    padding-top: 0.75rem;
    position: relative;
    z-index: 2;
    touch-action: none;
  }
  .nav-mobile-espace {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 46px;
    border: none;
    border-radius: 12px;
    background: var(--color-rouge-teco);
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(232, 0, 10, 0.28);
    -webkit-tap-highlight-color: transparent;
    transition: transform 160ms var(--nm-ease), box-shadow 160ms ease;
  }
  .nav-mobile-espace:active {
    transform: scale(0.978);
    box-shadow: 0 3px 12px rgba(232, 0, 10, 0.22);
  }
  .nav-mobile-espace svg {
    width: 16px;
    height: 16px;
  }
  .nav-mobile-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 0.7rem;
    margin-top: 0.85rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--nm-ligne);
  }
  .nav-mobile-signature {
    flex: none;
  }
  .nav-mobile-signature .wordmark {
    display: block;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
  }
  .nav-mobile-signature .accent {
    color: var(--color-rouge-teco);
  }
  .nav-mobile-signature .tag {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.74rem;
    color: var(--color-rouge-teco);
    white-space: nowrap;
  }
  .nav-mobile-droite {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-left: auto;
  }
  .nav-mobile-deco {
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
  }
  .nav-mobile-deco:active {
    color: var(--color-rouge-teco);
  }

  /* Le mouvement est un confort, jamais une condition de lecture. */
  @media (prefers-reduced-motion: reduce) {
    .nav-mobile-feuille,
    .nav-mobile-voile,
    .nav-mobile-orb,
    .nav-mobile-poignee i,
    .nav-mobile-lien,
    .nav-mobile-repere,
    .nav-mobile-espace {
      animation: none !important;
      transition: none !important;
    }
  }

  .nav-burger.is-open svg {
    transform: rotate(90deg);
  }
  body.menu-open {
    overflow: hidden;
  }
  .footer {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4rem 0 1.5rem;
    color: var(--color-text-secondary);
    margin-top: 4rem;
  }
  .footer-col details {
    display: block;
  }
  .footer-col details summary {
    display: none;
  }
  .footer-col details ul, .footer-col details h4 {
    display: block;
  }
  .footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
  }
  .footer-brand p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 1rem 0 0;
    line-height: 1.6;
    max-width: 280px;
  }
  .footer-col h4 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0 0 1rem;
  }
  .footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .footer-col a {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 150ms ease;
  }
  .footer-col a:hover {
    color: var(--color-rouge-teco);
  }
  .tel-nowrap {
    white-space: nowrap;
  }
  .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .footer-slogan {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
  }
  .footer-slogan em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--color-rouge-teco);
    font-size: 1rem;
  }
  .footer-social {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
  }
  .footer-social a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    transition: background 150ms ease, color 150ms ease;
  }
  .footer-social a:hover {
    background: var(--color-rouge-teco);
    color: white;
  }
  .footer-social svg {
    width: 16px;
    height: 16px;
  }
  .footer-copy {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--color-text-muted);
  }
  @media (max-width: 900px) {
    .footer {
      padding: 3rem 0 1.5rem;
    }
    .footer-top {
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }
    .footer-brand {
      grid-column: 1 / -1;
      margin-bottom: 1rem;
    }
  }
  @media (max-width: 600px) {
    .footer-top {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .footer-col {
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .footer-col details {
      padding: 0;
    }
    .footer-col details summary {
      display: flex;
      padding: 1rem 0;
      cursor: pointer;
      list-style: none;
      justify-content: space-between;
      align-items: center;
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 0.75rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-text-primary);
    }
    .footer-col details summary::-webkit-details-marker {
      display: none;
    }
    .footer-col details summary::after {
      content: "+";
      font-size: 1.25rem;
      font-weight: 400;
      color: var(--color-text-muted);
      transition: transform 200ms ease;
    }
    .footer-col details[open] summary::after {
      content: "−";
    }
    .footer-col details ul {
      padding: 0 0 1rem;
    }
    .footer-col details h4 {
      display: none;
    }
  }
  @media (max-width: 480px) {
    .footer-bottom {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  }
  @media (max-width: 600px) {
    .kpi-value {
      font-size: 1.125rem !important;
      letter-spacing: 0.02em;
      min-width: 90px;
    }
  }
  .teco-section {
    padding: 5rem 1.5rem 3rem;
  }
  .teco-container {
    max-width: 1280px;
    margin: 0 auto;
  }
  .section-head {
    max-width: 720px;
    margin-bottom: 3rem;
  }
  .section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-rouge-teco);
    margin-bottom: 1rem;
  }
  .section-eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-rouge-teco);
  }
  .section-title {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--color-text-primary);
    margin: 0 0 1rem;
  }
  .section-title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--color-rouge-teco);
  }
  .section-desc {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-width: 640px;
    margin: 0;
  }
  .metiers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .metier-card {
    padding: 1.75rem;
    transition: transform 200ms ease, background 200ms ease;
  }
  .metier-card:hover {
    transform: translateY(-3px);
  }
  .metier-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(232, 0, 10, 0.15);
    color: var(--color-rouge-teco);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
  }
  .metier-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .metier-name {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
  }
  .metier-desc {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: 0 0 1rem;
  }
  .metier-domains {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    padding-top: 0.875rem;
    border-top: 1px solid var(--color-border-subtle);
    margin: 0;
  }
  .poles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  .pole-card {
    position: relative;
    padding: 2rem;
    transition: transform 200ms ease, background 200ms ease;
  }
  .pole-card:hover {
    transform: translateY(-3px);
  }
  .pole-card.is-bientot {
    opacity: 0.85;
  }
  .badge-bientot {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-subtle);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .pole-card .lockup-vertical {
    margin-bottom: 1rem;
  }
  .pole-card .wordmark {
    font-size: 2.25rem;
  }
  .pole-card .tagline {
    font-size: 0.5rem;
    margin-top: 0.4rem;
    padding-left: 1em;
  }
  .footer-brand .wordmark {
    font-size: 1.5rem;
  }
  .footer-brand .tagline {
    font-size: 0.625rem;
    margin-top: 0.25rem;
    padding-left: 0.55em;
  }
  .pole-tagline {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--color-rouge-teco);
    font-size: 1rem;
    margin: 1rem 0;
  }
  .pole-desc {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: 0 0 1.25rem;
  }
  .pole-vision {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-text-primary);
    font-size: 0.9375rem;
    line-height: 1.6;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--color-rouge-teco);
    background: rgba(232, 0, 10, 0.04);
    border-radius: 4px;
    margin: 0 0 1.25rem;
  }
  .pole-signaux {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
  }
  .pole-signaux li {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    padding: 0.4rem 0 0.4rem 1.25rem;
    position: relative;
  }
  .pole-signaux li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--color-rouge-teco);
  }
  .pole-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-rouge-teco);
    text-decoration: none;
    transition: gap 150ms ease;
  }
  .pole-link:hover {
    gap: 0.75rem;
  }
  .quote-section {
    padding: 6rem 1.5rem 5rem;
    text-align: center;
    position: relative;
  }
  .quote-mark {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 9rem;
    color: var(--color-rouge-teco);
    opacity: 0.12;
    line-height: 0.8;
    margin-bottom: -2rem;
    user-select: none;
  }
  .quote-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.5rem, 2.75vw, 2.125rem);
    line-height: 1.4;
    color: var(--color-text-primary);
    max-width: 920px;
    margin: 0 auto 2rem;
  }
  .quote-author {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .cta-final {
    padding: 4rem 1.5rem 6rem;
    text-align: center;
  }
  .cta-final-text {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto 2rem;
  }
  .cta-final-btns {
    display: inline-flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .news-band {
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
    background: rgba(0, 0, 0, 0.15);
    padding: 1.25rem 1.5rem;
  }
  .news-band-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: center;
  }
  .news-label {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .news-items {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
  }
  .news-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    color: var(--color-text-primary);
    transition: color 150ms ease;
  }
  .news-item-date {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
  }
  .news-item-title {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    max-width: 320px;
  }
  .news-item:hover .news-item-title {
    color: var(--color-rouge-teco);
  }
  /* Theme toggle : pill 3 boutons icones (inline dans nav, sidebar, ou autre wrapper) */
  /* Refactor 2026-05-12 : retire position:fixed (incompatible nav). SVG icons 14px. */
  .theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border-subtle);
    border-radius: 999px;
  }
  .theme-toggle button {
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background 150ms ease, color 150ms ease;
  }
  .theme-toggle button svg {
    width: 14px;
    height: 14px;
  }
  .theme-toggle button:hover {
    color: var(--color-text-primary);
  }
  .theme-toggle button.is-active {
    background: var(--color-rouge-teco);
    color: #FFFFFF;
  }
  .theme-toggle button:focus-visible {
    outline: 2px solid var(--color-rouge-teco);
    outline-offset: 2px;
  }
  /* Variant light : background plus contraste sur papier creme */
  [data-theme="light"] .theme-toggle {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
  }

  /* Skip link (accessibilite a11y) : cache par defaut, visible au focus clavier uniquement */
  /* !important pour battre toute autre regle qui le forcerait visible. */
  .skip-link {
    position: absolute !important;
    top: -100px !important;
    left: 0;
    background: var(--color-rouge-teco);
    color: #FFFFFF;
    padding: 0.75rem 1.25rem;
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0 0 8px 0;
    transition: top 200ms ease;
  }
  .skip-link:focus {
    top: 0 !important;
    outline: 2px solid #FFFFFF;
    outline-offset: -4px;
  }
  @media (max-width: 900px) {
    .teco-section {
      padding: 3rem 1rem 2rem;
    }
    .metiers-grid {
      grid-template-columns: 1fr;
    }
    .poles-grid {
      grid-template-columns: 1fr;
    }
    .news-band-inner {
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }
    .news-items {
      gap: 1rem;
    }
    .news-item-title {
      max-width: none;
    }
    .quote-section {
      padding: 4rem 1rem 3rem;
    }
    .cta-final {
      padding: 3rem 1rem 4rem;
    }
  }
  .teco-container.is-narrow {
    max-width: 880px;
  }
  .section-desc.is-italic {
    font-style: italic;
    margin-bottom: 2rem;
  }
  .narrative-frame {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-text-primary);
    margin: 0;
  }
  .footer-contact-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
    margin: 1.5rem 0;
  }
  .contact-bar-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .contact-bar-icon {
    flex-shrink: 0;
    color: var(--color-rouge-teco);
    margin-top: 0.15rem;
  }
  .contact-bar-text {
    font-size: 0.875rem;
    color: var(--color-text-primary);
    line-height: 1.45;
  }
  .contact-bar-text a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .contact-bar-text a:hover {
    color: var(--color-rouge-teco);
  }
  .contact-bar-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-bottom: 0.25rem;
  }
  @media (max-width: 900px) {
    .footer-contact-bar {
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
  }
  @media (max-width: 560px) {
    .footer-contact-bar {
      grid-template-columns: 1fr;
    }
  }
  .showroom-page {
    padding: 2rem 1.5rem 6rem;
    max-width: 1400px;
    margin: 0 auto;
  }
  .showroom-page-title {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-rouge-teco);
    margin: 0 0 0.5rem;
  }
  .showroom-page-h1 {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    margin: 0 0 0.75rem;
  }
  .showroom-page-intro {
    font-size: 1rem;
    color: var(--color-text-secondary);
    max-width: 720px;
    margin: 0 0 4rem;
    line-height: 1.6;
  }
  .showroom-section {
    padding: 3rem 0;
    border-top: 1px solid var(--color-border-subtle);
  }
  .showroom-section-title {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
  }
  .showroom-section-desc {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0 0 2rem;
    max-width: 640px;
  }
  .showroom-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
  }
  .showroom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
  }
  .showroom-tile {
    background: rgb(255 255 255 / 0.03);
    border: 1px solid var(--color-border-subtle);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  [data-theme="light"] .showroom-tile {
    background: rgb(0 0 0 / 0.02);
  }
  .swatch-color {
    height: 80px;
    border-radius: 8px;
    border: 1px solid var(--color-border-subtle);
  }
  .swatch-name {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
  }
  .swatch-token {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    word-break: break-all;
  }
  .swatch-value {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
  }
  .space-bar {
    background: var(--color-rouge-teco);
    height: 6px;
    border-radius: 3px;
  }
  .showroom-logo-panel {
    padding: 2rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
  }
  .showroom-logo-panel.is-dark {
    background: #0c0e15;
  }
  .showroom-logo-panel.is-light {
    background: #F4F5F8;
  }
  .showroom-note {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.6875rem;
    color: var(--color-text-tertiary);
    margin-top: 0.5rem;
  }
  .logo {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
  }
  .logo.is-nav {
    width: var(--logo-h-nav);
    aspect-ratio: 900 / 280;
  }
  .logo.is-nav-mobile {
    width: var(--logo-h-nav-mobile);
    aspect-ratio: 900 / 280;
  }
  .logo.is-footer-h {
    width: var(--logo-h-footer);
    aspect-ratio: 900 / 280;
  }
  .logo.is-hero-watermark {
    width: var(--logo-v-hero);
    aspect-ratio: 1000 / 380;
  }
  .logo.is-bientot-center {
    width: var(--logo-v-bientot);
    aspect-ratio: 1000 / 380;
  }
  .logo.is-footer-v {
    width: var(--logo-v-footer);
    aspect-ratio: 1000 / 380;
  }
  .logo.is-floating {
    animation: floatSlow 6s ease-in-out infinite;
  }
  .logo-h-groupe {
    background-image: url('../logos/13-lockup-h-groupe-dark.svg');
  }
  .logo-h-academy {
    background-image: url('../logos/14-lockup-h-academy-dark.svg');
  }
  .logo-h-cabinet {
    background-image: url('../logos/15-lockup-h-cabinet-dark.svg');
  }
  .logo-h-fondation {
    background-image: url('../logos/16-lockup-h-fondation-dark.svg');
  }
  .logo-h-premium {
    background-image: url('../logos/17-lockup-h-premium-dark.svg');
  }
  .logo-v-groupe {
    background-image: url('../logos/03-lockup-groupe-dark.svg');
  }
  .logo-v-academy {
    background-image: url('../logos/05-lockup-academy-dark.svg');
  }
  .logo-v-cabinet {
    background-image: url('../logos/07-lockup-cabinet-dark.svg');
  }
  .logo-v-fondation {
    background-image: url('../logos/09-lockup-fondation-dark.svg');
  }
  .logo-v-premium {
    background-image: url('../logos/11-lockup-premium-dark.svg');
  }
  [data-theme="light"] .logo-h-groupe {
    background-image: url('../logos/13-lockup-h-groupe-light.svg');
  }
  [data-theme="light"] .logo-h-academy {
    background-image: url('../logos/14-lockup-h-academy-light.svg');
  }
  [data-theme="light"] .logo-h-cabinet {
    background-image: url('../logos/15-lockup-h-cabinet-light.svg');
  }
  [data-theme="light"] .logo-h-fondation {
    background-image: url('../logos/16-lockup-h-fondation-light.svg');
  }
  [data-theme="light"] .logo-h-premium {
    background-image: url('../logos/17-lockup-h-premium-light.svg');
  }
  [data-theme="light"] .logo-v-groupe {
    background-image: url('../logos/04-lockup-groupe-light.svg');
  }
  [data-theme="light"] .logo-v-academy {
    background-image: url('../logos/06-lockup-academy-light.svg');
  }
  [data-theme="light"] .logo-v-cabinet {
    background-image: url('../logos/08-lockup-cabinet-light.svg');
  }
  [data-theme="light"] .logo-v-fondation {
    background-image: url('../logos/10-lockup-fondation-light.svg');
  }
  [data-theme="light"] .logo-v-premium {
    background-image: url('../logos/12-lockup-premium-light.svg');
  }
  @media (prefers-color-scheme: light) {
    html:not([data-theme]) .logo-h-groupe {
      background-image: url('../logos/13-lockup-h-groupe-light.svg');
    }
    html:not([data-theme]) .logo-h-academy {
      background-image: url('../logos/14-lockup-h-academy-light.svg');
    }
    html:not([data-theme]) .logo-h-cabinet {
      background-image: url('../logos/15-lockup-h-cabinet-light.svg');
    }
    html:not([data-theme]) .logo-h-fondation {
      background-image: url('../logos/16-lockup-h-fondation-light.svg');
    }
    html:not([data-theme]) .logo-h-premium {
      background-image: url('../logos/17-lockup-h-premium-light.svg');
    }
    html:not([data-theme]) .logo-v-groupe {
      background-image: url('../logos/04-lockup-groupe-light.svg');
    }
    html:not([data-theme]) .logo-v-academy {
      background-image: url('../logos/06-lockup-academy-light.svg');
    }
    html:not([data-theme]) .logo-v-cabinet {
      background-image: url('../logos/08-lockup-cabinet-light.svg');
    }
    html:not([data-theme]) .logo-v-fondation {
      background-image: url('../logos/10-lockup-fondation-light.svg');
    }
    html:not([data-theme]) .logo-v-premium {
      background-image: url('../logos/12-lockup-premium-light.svg');
    }
  }
  @media (max-width: 900px) {
    .logo.is-nav {
      width: var(--logo-h-nav-mobile);
    }
  }
  .section-bientot {
    min-height: calc(100vh - 5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 1.5rem 3rem;
  }
  .bientot-inner {
    max-width: 720px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  .bientot-lockup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .bientot-lockup .wordmark {
    font-size: 4.5rem;
    line-height: 0.95;
  }
  .bientot-lockup .tagline {
    font-size: 0.9rem;
    margin-top: 0.4em;
    padding-left: 1.2em;
  }
  .bientot-tagline-pole {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--color-rouge-teco);
    margin: 0;
    letter-spacing: 0;
  }
  .bientot-vision {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 640px;
  }
  .signaux-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: center;
    width: 100%;
    max-width: 480px;
  }
  .signaux-list li {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: var(--color-text-primary);
    padding: 0.85rem 0;
    border-top: 1px solid var(--color-border-subtle);
  }
  .signaux-list li:last-child {
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .bientot-badge {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: 999px;
  }
  .bientot-back {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .bientot-back:hover {
    color: var(--color-rouge-teco);
  }
  .footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: center;
  }
  .footer-legal-links a, .footer-legal-links button {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s ease;
  }
  .footer-legal-links a:hover, .footer-legal-links button:hover {
    color: var(--color-rouge-teco);
  }
  .lockup-watermark {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    user-select: none;
    pointer-events: none;
    animation: floatSlow 6s ease-in-out infinite;
    white-space: nowrap;
  }
  .lockup-watermark .wordmark {
    font-size: 9rem;
    line-height: 0.9;
    color: #FFFFFF;
    white-space: nowrap;
  }
  .lockup-watermark .wordmark .accent {
    color: var(--color-rouge-teco);
  }
  .lockup-watermark .tagline {
    font-size: 1.8rem;
    color: rgb(255 255 255 / 0.85);
    margin-top: 0.4em;
    white-space: nowrap;
  }
  [data-theme="light"] .lockup-watermark .wordmark {
    color: #1A1D28;
  }
  [data-theme="light"] .lockup-watermark .wordmark .accent {
    color: var(--color-rouge-teco);
  }
  [data-theme="light"] .lockup-watermark .tagline {
    color: rgb(26 29 40 / 0.85);
  }
  @media (prefers-color-scheme: light) {
    html:not([data-theme]) .lockup-watermark .wordmark {
      color: #1A1D28;
    }
    html:not([data-theme]) .lockup-watermark .wordmark .accent {
      color: var(--color-rouge-teco);
    }
    html:not([data-theme]) .lockup-watermark .tagline {
      color: rgb(26 29 40 / 0.85);
    }
  }
  @keyframes floatSlow {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-14px);
    }
  }
  .orb-esprit {
    width: 360px;
    height: 360px;
    border-radius: 50%;
    position: relative;
    background: radial-gradient(circle at 35% 30%, rgb(167 139 250 / 0.85) 0%, rgb(139 92 246 / 0.7) 25%, rgb(124 58 237 / 0.5) 50%, rgb(232 0 10 / 0.45) 80%, rgb(232 0 10 / 0.2) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: inset 0 0 60px rgb(255 255 255 / 0.10), inset 0 -40px 80px rgb(232 0 10 / 0.30), 0 0 120px rgb(139 92 246 / 0.40), 0 0 200px rgb(232 0 10 / 0.25), 0 30px 80px rgb(0 0 0 / 0.40);
    animation: floatSlow 6s ease-in-out infinite;
  }
  .orb-esprit::before {
    content: '';
    position: absolute;
    top: 12%;
    left: 18%;
    width: 30%;
    height: 25%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgb(255 255 255 / 0.25) 0%, transparent 70%);
    filter: blur(8px);
  }
  [data-theme="light"] .orb-esprit {
    box-shadow: inset 0 0 60px rgb(255 255 255 / 0.30), inset 0 -40px 80px rgb(232 0 10 / 0.25), 0 0 80px rgb(139 92 246 / 0.30), 0 0 140px rgb(232 0 10 / 0.18), 0 20px 60px rgb(0 0 0 / 0.15);
  }
  .section-eyebrow.is-esprit {
    color: rgb(139 92 246);
  }
  .section-eyebrow.is-esprit .dot {
    background: rgb(139 92 246);
    box-shadow: 0 0 12px rgb(139 92 246 / 0.6);
  }
  .section-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
  }
  .section-2col-content {
    max-width: 560px;
  }
  .section-2col-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 480px;
  }
  .disciplines-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
  }
  .discipline-card {
    background: rgb(255 255 255 / 0.03);
    border: 1px solid rgb(255 255 255 / 0.06);
    border-radius: 14px;
    padding: 2.25rem 2rem;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  }
  .discipline-card:hover {
    transform: translateY(-4px);
    background: rgb(255 255 255 / 0.05);
    border-color: rgb(232 0 10 / 0.30);
  }
  .discipline-num {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--color-rouge-teco);
    text-transform: uppercase;
    margin-bottom: 1.25rem;
  }
  .discipline-title {
    font-family: var(--font-sans);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.85rem;
    color: var(--color-text-primary);
  }
  .discipline-desc {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin: 0 0 1.5rem;
    font-style: italic;
  }
  .discipline-jobs {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    letter-spacing: 0.05em;
    line-height: 1.7;
    padding-top: 1rem;
    border-top: 1px solid rgb(255 255 255 / 0.06);
  }
  .discipline-jobs-label {
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-bottom: 0.5rem;
    display: block;
  }
  .discipline-jobs-list {
    color: var(--color-text-secondary);
  }
  [data-theme="light"] .discipline-card {
    background: rgb(0 0 0 / 0.03);
    border-color: rgb(0 0 0 / 0.08);
  }
  [data-theme="light"] .discipline-card:hover {
    background: rgb(0 0 0 / 0.05);
    border-color: rgb(232 0 10 / 0.40);
  }
  [data-theme="light"] .discipline-jobs {
    border-top-color: rgb(0 0 0 / 0.08);
  }
  .method-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
  }
  .method-card {
    background: rgb(255 255 255 / 0.03);
    border: 1px solid rgb(255 255 255 / 0.06);
    border-radius: 14px;
    padding: 2.25rem 2rem;
  }
  .method-num {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--color-rouge-teco);
    text-transform: uppercase;
    margin-bottom: 1.25rem;
  }
  .method-title {
    font-family: var(--font-sans);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.85rem;
    color: var(--color-text-primary);
  }
  .method-desc {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
    font-style: italic;
  }
  [data-theme="light"] .method-card {
    background: rgb(0 0 0 / 0.03);
    border-color: rgb(0 0 0 / 0.08);
  }
  .esprit-citation {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.375rem;
    line-height: 1.4;
    color: var(--color-gold-esprit, #D4A047);
    max-width: 480px;
    padding-left: 1.5rem;
    border-left: 2px solid rgb(212 160 71 / 0.40);
    margin: 0;
  }
  .esprit-narrative {
    background: rgb(139 92 246 / 0.04);
    border: 1px solid rgb(139 92 246 / 0.12);
    border-radius: 16px;
    padding: 2rem 2.25rem;
    margin-bottom: 2.5rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-text-primary);
  }
  .profiles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
  }
  .profile-card {
    background: rgb(255 255 255 / 0.03);
    border: 1px solid rgb(255 255 255 / 0.06);
    border-radius: 14px;
    padding: 2.25rem 2rem;
  }
  .profile-num {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--color-rouge-teco);
    text-transform: uppercase;
    margin-bottom: 1.25rem;
  }
  .profile-title {
    font-family: var(--font-sans);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.85rem;
    color: var(--color-text-primary);
  }
  .profile-desc {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
  }
  [data-theme="light"] .profile-card {
    background: rgb(0 0 0 / 0.03);
    border-color: rgb(0 0 0 / 0.08);
  }
  .academy-cta-final {
    text-align: center;
    padding: 6rem 1.5rem;
    max-width: 720px;
    margin: 0 auto;
  }
  .academy-cta-final .signature {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    margin: 0 0 2.5rem;
  }
  .academy-cta-final .actions {
    display: inline-flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
  }
  .testimonial-card {
    background: rgb(255 255 255 / 0.03);
    border: 1px solid rgb(255 255 255 / 0.06);
    border-radius: 14px;
    padding: 2rem;
  }
  .testimonial-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--color-text-primary);
    margin: 0 0 1.5rem;
  }
  .testimonial-author {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
  }
  .testimonial-author-name {
    font-weight: 600;
    color: var(--color-text-primary);
    display: block;
    margin-bottom: 0.25rem;
  }
  .resources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
  }
  .resource-card {
    background: rgb(255 255 255 / 0.03);
    border: 1px solid rgb(255 255 255 / 0.06);
    border-radius: 14px;
    padding: 1.75rem;
  }
  .resource-eyebrow {
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-rouge-teco);
    margin-bottom: 0.75rem;
  }
  .resource-title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
  }
  .resource-excerpt {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin: 0 0 1rem;
  }
  @media (max-width: 1024px) {
    .disciplines-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .testimonials-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .resources-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .section-2col {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
    .section-2col-visual {
      min-height: 360px;
    }
    .lockup-watermark .wordmark {
      font-size: 6rem;
    }
    .lockup-watermark .tagline {
      font-size: 1.2rem;
    }
    .orb-esprit {
      width: 280px;
      height: 280px;
    }
  }
  @media (max-width: 700px) {
    .disciplines-grid {
      grid-template-columns: 1fr;
    }
    .method-grid {
      grid-template-columns: 1fr;
    }
    .profiles-grid {
      grid-template-columns: 1fr;
    }
    .testimonials-grid {
      grid-template-columns: 1fr;
    }
    .resources-grid {
      grid-template-columns: 1fr;
    }
    .lockup-watermark .wordmark {
      font-size: 4rem;
    }
    .lockup-watermark .tagline {
      font-size: 0.8rem;
    }
    .orb-esprit {
      width: 220px;
      height: 220px;
    }
  }
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=DM+Serif+Display:ital@1&display=swap');
@layer base {
  body {
    background: radial-gradient(ellipse 70% 60% at 15% 0%, rgba(232, 0, 10, 0.12), transparent 60%), radial-gradient(ellipse 60% 70% at 85% 35%, rgba(232, 0, 10, 0.05), transparent 65%), radial-gradient(ellipse 70% 60% at 50% 100%, rgba(245, 158, 11, 0.06), transparent 65%), linear-gradient(180deg, #1F2230 0%, #181a25 50%, #1c1e2a 100%);
    background-attachment: fixed;
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    margin: 0;
    min-height: 100vh;
    transition: background 200ms ease, color 200ms ease;
  }
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) {
    --color-text-primary: #0c0e15;
    --color-text-secondary: rgba(0, 0, 0, 0.65);
    --color-text-muted: rgba(0, 0, 0, 0.5);
  }
  html:not([data-theme="dark"]) body {
    background: radial-gradient(ellipse 70% 60% at 15% 0%, rgba(232, 0, 10, 0.06), transparent 60%), radial-gradient(ellipse 60% 70% at 85% 35%, rgba(232, 0, 10, 0.03), transparent 65%), radial-gradient(ellipse 70% 60% at 50% 100%, rgba(245, 158, 11, 0.04), transparent 65%), linear-gradient(180deg, #F7F4EE 0%, #F2EEE6 50%, #F7F4EE 100%);
    background-attachment: fixed;
  }
  html:not([data-theme="dark"]) .glass-card-1 {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  }
  html:not([data-theme="dark"]) .glass-card-2 {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: none;
  }
  html:not([data-theme="dark"]) .glass-card-3 {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }
  html:not([data-theme="dark"]) .nav-sticky {
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
  }
}
html[data-theme="dark"] body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}
html[data-theme="dark"] {
  --color-text-secondary: rgba(255, 255, 255, 0.7);
  --color-text-muted: rgba(255, 255, 255, 0.55);
}
html[data-theme="light"] {
  --color-text-primary: #0c0e15;
  --color-text-secondary: rgba(0, 0, 0, 0.65);
  --color-text-muted: rgba(0, 0, 0, 0.5);
}
html[data-theme="light"] body {
  background: radial-gradient(ellipse 70% 60% at 15% 0%, rgba(232, 0, 10, 0.06), transparent 60%), radial-gradient(ellipse 60% 70% at 85% 35%, rgba(232, 0, 10, 0.03), transparent 65%), radial-gradient(ellipse 70% 60% at 50% 100%, rgba(245, 158, 11, 0.04), transparent 65%), linear-gradient(180deg, #F7F4EE 0%, #F2EEE6 50%, #F7F4EE 100%);
  background-attachment: fixed;
}
html[data-theme="light"] .glass-stage::before {
  background: rgba(232, 0, 10, 0.14);
}
html[data-theme="light"] .glass-stage::after {
  background: rgba(245, 158, 11, 0.10);
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .glass-stage::before {
    background: rgba(232, 0, 10, 0.14);
  }
  html:not([data-theme="dark"]) .glass-stage::after {
    background: rgba(245, 158, 11, 0.10);
  }
}
html[data-theme="light"] .glass-card-1 {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .glass-card-2 {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: none;
}
html[data-theme="light"] .glass-card-3 {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .nav-sticky {
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .footer {
  background: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .footer-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .footer-social a {
  background: rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .btn-tertiary {
  background: rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .btn-tertiary:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.09);
}
html[data-theme="light"] .btn-ghost:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .btn-outline {
  background: transparent;
  color: var(--color-rouge-teco);
  border: 1px solid var(--color-rouge-teco);
}
html[data-theme="light"] .btn-outline:hover:not(:disabled) {
  background: rgba(232, 0, 10, 0.08);
}
html[data-theme="light"] .hero-floating-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .hero-floating-card .fc-icon {
  background: rgba(232, 0, 10, 0.10);
}
html[data-theme="light"] .hero::after {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.10), transparent 70%);
}
html[data-theme="light"] .hero::before {
  background: radial-gradient(circle, rgba(232, 0, 10, 0.10), transparent 70%);
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .footer {
    background: rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  html:not([data-theme="dark"]) .footer-bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
  html:not([data-theme="dark"]) .footer-social a {
    background: rgba(0, 0, 0, 0.05);
  }
  html:not([data-theme="dark"]) .btn-tertiary {
    background: rgba(0, 0, 0, 0.05);
  }
  html:not([data-theme="dark"]) .btn-tertiary:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.09);
  }
  html:not([data-theme="dark"]) .btn-ghost:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.04);
  }
  html:not([data-theme="dark"]) .btn-outline {
    background: transparent;
    color: var(--color-rouge-teco);
    border: 1px solid var(--color-rouge-teco);
  }
  html:not([data-theme="dark"]) .btn-outline:hover:not(:disabled) {
    background: rgba(232, 0, 10, 0.08);
  }
}
@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-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@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: 0px;
}
@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-ease {
  syntax: "*";
  inherits: false;
}
@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-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --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-ease: initial;
    }
  }
}

/* ============================================================
   RGPD BANNER + MODAL (composant global utilisable toutes pages)
   Deplace depuis page-home-v2.css le 2026-05-12 car la banniere
   doit s'afficher sur toutes les pages publiques (blog, etc.).
   ============================================================ */
.rgpd-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-bg-primary);
  border-top: 1px solid var(--color-border-subtle);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  padding: 1.25rem 1.5rem;
  transform: translateY(100%);
  transition: transform 300ms ease;
}
.rgpd-banner.is-visible { transform: translateY(0); }
/* UN SEUL panneau a la fois. Le bandeau de consentement est en z-index
   9999, la feuille de navigation en 99 : bandeau visible, il recouvrait
   la moitie basse du menu, « Mon espace » compris. Il s'efface donc le
   temps que la feuille est ouverte et revient a la fermeture. Il n'est
   ni accepte ni refuse au passage, aucun choix n'est pris pour le
   visiteur. Regle placee APRES .is-visible : specificite egale, c'est
   l'ordre qui tranche. */
body.menu-open .rgpd-banner { transform: translateY(100%); }
.rgpd-banner__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
/* min(280px, 100%) et non 280px : sur un ecran de 320 px, la place
   disponible n'est que de 272 px une fois le padding du bandeau retire.
   Un min-width de 280 px poussait donc la PAGE a 327 px. Consequence
   invisible jusqu'ici, mais un element position:fixed se cale sur la
   largeur de page : le menu mobile en feuille basse sortait de l'ecran. */
.rgpd-banner__text-wrap { flex: 1; min-width: min(280px, 100%); }
.rgpd-banner__text {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 0 0.4rem;
}
.rgpd-banner__sub {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0;
}
.rgpd-banner__link {
  color: var(--color-rouge-teco);
  text-decoration: underline;
}
.rgpd-banner__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rgpd-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}
.rgpd-modal[aria-hidden="false"] { display: flex; }
.rgpd-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}
.rgpd-modal__panel {
  position: relative;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card, 1rem);
  max-width: 640px;
  width: calc(100% - 2rem);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}
.rgpd-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border-subtle);
}
.rgpd-modal__header h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-text-primary);
}
.rgpd-modal__close {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 6px;
}
.rgpd-modal__close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-primary);
}
.rgpd-modal__body { padding: 1.5rem; }
.rgpd-modal__footer {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border-subtle);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.rgpd-cat {
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.rgpd-cat:last-child { border-bottom: 0; }
.rgpd-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.rgpd-cat__name {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-text-primary);
}
.rgpd-cat__badge {
  font-size: 0.72rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-success, #10B981);
  font-weight: 600;
}
.rgpd-cat__desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}
.rgpd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.rgpd-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.rgpd-toggle__slider {
  position: relative;
  width: 38px; height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 200ms ease;
}
.rgpd-toggle__slider::before {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 200ms ease;
}
.rgpd-toggle input:checked + .rgpd-toggle__slider {
  background: var(--color-rouge-teco);
}
.rgpd-toggle input:checked + .rgpd-toggle__slider::before {
  transform: translateX(16px);
}
.rgpd-toggle__label {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

/* Variants light du RGPD */
[data-theme="light"] .rgpd-banner {
  background: var(--color-bg-elevated);
  border-top-color: var(--color-border-subtle);
}
[data-theme="light"] .rgpd-modal__panel {
  background: var(--color-bg-elevated);
}
[data-theme="light"] .rgpd-toggle__slider {
  background: rgba(0, 0, 0, 0.15);
}

/* ── Menus deroulants natifs : popup lisible dans les deux themes.
   color-scheme pilote le rendu natif du menu (fond/contraste OS),
   option couvre les navigateurs qui stylent les options. ── */
html[data-theme="dark"] select { color-scheme: dark; }
html[data-theme="light"] select { color-scheme: light; }
html[data-theme="dark"] select option { background-color: #171a24; color: #e8eaf2; }
html[data-theme="light"] select option { background-color: #ffffff; color: #15171f; }