/* =========================================================================
   Euro Cyber Group — feuille de style unique du site.
   Couleurs du logo : magenta #a93b93, prune #680060 (variables --color-ecg-*).
   Les classes utilitaires (mt-6, grid, lg:grid-cols-…) sont celles utilisées
   dans les pages : pour un nouveau bloc, réutiliser les blocs existants.
   ========================================================================= */

/* inter-cyrillic-ext-wght-normal */

/* inter-cyrillic-wght-normal */

/* inter-greek-ext-wght-normal */

/* inter-greek-wght-normal */

/* inter-vietnamese-wght-normal */

/* inter-latin-ext-wght-normal */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* inter-latin-wght-normal */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} /*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --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;
    }
  }
}

@layer theme {
  :root,
  :host {
    --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-sm: 24rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --leading-relaxed: 1.625;
    --radius-lg: 0.5rem;
    --default-transition-duration: 0.15s;
    --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-ecg-magenta: #a93b93;
    --color-ecg-magenta-700: #8a2d78;
    --color-ecg-magenta-50: #faf0f7;
    --color-ecg-plum: #680060;
    --color-ecg-primary: #a93b93;
    --color-ecg-primary-700: #8a2d78;
    --color-ecg-primary-50: #faf0f7;
    --color-ecg-lilac: #f1cde6;
    --color-ecg-danger: #e74a3b;
    --color-ink: #17131b;
    --color-ink-2: #3b3741;
    --color-muted: #625d68;
    --color-line: #e7e4ea;
    --color-canvas: #f7f6f8;
    --font-display: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --radius-ecg: 14px;
    --radius-ecg-lg: 18px;
    --radius-ecg-xl: 24px;
    --shadow-ecg-md: 0 14px 32px -18px #17131b38;
    --ease-ecg: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

@layer base {
  *,
  :after,
  :before,
  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html,
  :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(
      --default-font-family,
      ui-sans-serif,
      system-ui,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji"
    );
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b,
  strong {
    font-weight: bolder;
  }

  code,
  kbd,
  samp,
  pre {
    font-family: var(
      --default-mono-font-family,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace
    );
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub,
  sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -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 {
    vertical-align: middle;
    display: block;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  button,
  input,
  select,
  optgroup,
  textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button,
  input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 5.5rem;
    overflow-x: clip;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    font-family: var(--font-sans);
    color: var(--color-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    background: #fff;
    font-size: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
    line-height: 1.62;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    letter-spacing: -0.015em;
    text-wrap: balance;
    font-weight: 700;
    line-height: 1.1;
  }

  p {
    text-wrap: pretty;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  :focus-visible {
    outline: 2px solid var(--color-ecg-magenta-700);
    outline-offset: 3px;
    border-radius: 4px;
  }

  .on-dark :focus-visible {
    outline-color: #fff;
  }

  ::selection {
    background: #a93b9338;
  }

  [x-cloak] {
    display: none !important;
  }
}

@layer components {
  .h-display {
    letter-spacing: -0.02em;
    font-size: clamp(2.125rem, 1.5rem + 2.3vw, 3.25rem);
    line-height: 1.08;
  }

  .h1 {
    letter-spacing: -0.018em;
    font-size: clamp(2rem, 1.55rem + 1.7vw, 2.75rem);
    line-height: 1.08;
  }

  .h2 {
    font-size: clamp(1.625rem, 1.35rem + 1.05vw, 2.25rem);
  }

  .h3 {
    letter-spacing: -0.01em;
    font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
    line-height: 1.25;
  }

  .lead {
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    line-height: 1.55;
  }

  .eyebrow {
    font-family: var(--font-sans);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
  }

  .keep-case {
    text-transform: none;
    letter-spacing: 0.01em;
  }

  .measure {
    max-width: 62ch;
  }

  .measure-wide {
    max-width: 76ch;
  }

  .container-ecg {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 0.25rem + 3.2vw, 2.5rem);
  }

  .section {
    padding-block: clamp(4rem, 1.5rem + 6vw, 7.5rem);
  }

  .section-sm {
    padding-block: clamp(3rem, 1.5rem + 4vw, 5.5rem);
  }

  @media (min-width: 1024px) and (max-height: 760px) {
    .section {
      padding-block: 5rem;
    }

    .section-sm {
      padding-block: 3.75rem;
    }
  }

  .btn {
    min-height: 48px;
    font-family: var(--font-sans);
    letter-spacing: -0.005em;
    transition:
      transform 0.2s var(--ease-ecg),
      box-shadow 0.2s var(--ease-ecg),
      background-color 0.2s var(--ease-ecg),
      color 0.2s;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    display: inline-flex;
  }

  .btn-primary {
    background: var(--color-ecg-magenta);
    color: #fff;
  }

  .btn-primary:hover {
    background: #97347f;
    transform: translateY(-1px);
  }

  .btn-light {
    color: var(--color-ecg-plum);
    background: #fff;
  }

  .btn-light:hover {
    box-shadow: var(--shadow-ecg-md);
    transform: translateY(-1px);
  }

  .btn-outline {
    color: var(--color-ecg-magenta-700);
    background: none;
    box-shadow: inset 0 0 0 1.5px #8a2d7866;
  }

  .btn-outline:hover {
    box-shadow: inset 0 0 0 1.5px var(--color-ecg-magenta-700);
    background: var(--color-ecg-magenta-50);
  }

  .btn-outline-light {
    color: #fff;
    background: none;
    box-shadow: inset 0 0 0 1.5px #ffffff73;
  }

  .btn-outline-light:hover {
    background: #ffffff14;
    box-shadow: inset 0 0 0 1.5px #ffffffe6;
  }

  .link-ecg {
    color: var(--color-ecg-magenta-700);
    text-underline-offset: 4px;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    -webkit-text-decoration: underline #0000;
    text-decoration: underline #0000;
    text-decoration-thickness: 1.5px;
    transition: text-decoration-color 0.15s;
    display: inline-flex;
  }

  .link-ecg:hover {
    text-decoration-color: currentColor;
  }

  .link-inline {
    color: var(--color-ecg-magenta-700);
    text-underline-offset: 3px;
    text-decoration: underline;
  }

  .link-inline:hover {
    color: var(--color-ecg-magenta);
  }

  .card-ecg {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-ecg);
    background: #fff;
  }

  .card-ecg-link {
    transition:
      border-color 0.2s var(--ease-ecg),
      box-shadow 0.2s var(--ease-ecg),
      transform 0.2s var(--ease-ecg);
  }

  .card-ecg-link:hover {
    box-shadow: var(--shadow-ecg-md);
    border-color: #a93b9366;
    transform: translateY(-2px);
  }

  .pill {
    font-family: var(--font-sans);
    background: var(--color-ecg-magenta-50);
    color: var(--color-ecg-magenta-700);
    white-space: nowrap;
    border-radius: 999px;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    display: inline-flex;
  }

  .pill-on-dark {
    color: #fff;
    background: #ffffff1f;
  }

  .check-list {
    flex-direction: column;
    gap: 0.6rem;
    display: flex;
  }

  .check-list li {
    color: var(--color-ink-2);
    padding-left: 2rem;
    line-height: 1.55;
    position: relative;
  }

  .check-list li:before {
    content: "";
    background: var(--color-ecg-magenta-50);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a2d78' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
    border-radius: 999px;
    width: 1.25rem;
    height: 1.25rem;
    position: absolute;
    top: calc(0.775em - 0.625rem);
    left: 0;
  }

  .check-list li strong {
    color: var(--color-ink);
    font-weight: 600;
  }

  .photo {
    border-radius: var(--radius-ecg-lg);
    background: var(--color-canvas);
    position: relative;
    overflow: hidden;
  }

  .photo img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
  }

  .photo--contain img {
    object-fit: contain;
    padding: 4%;
  }

  .bg-plum {
    background: var(--color-ecg-plum);
    color: #fff;
  }
}

@layer utilities {
  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .static {
    position: static;
  }

  .mx-auto {
    margin-inline: auto;
  }

  .mt-1 {
    margin-top: var(--spacing);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-9 {
    margin-top: calc(var(--spacing) * 9);
  }

  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .mt-14 {
    margin-top: calc(var(--spacing) * 14);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline-block {
    display: inline-block;
  }

  .table {
    display: table;
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .min-h-\[60vh\] {
    min-height: 60vh;
  }

  .w-auto {
    width: auto;
  }

  .w-full {
    width: 100%;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .flex-1 {
    flex: 1;
  }

  .flex-shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .-translate-y-\[6px\] {
    --tw-translate-y: calc(6px * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-\[6px\] {
    --tw-translate-y: 6px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-rotate-45 {
    rotate: -45deg;
  }

  .rotate-45 {
    rotate: 45deg;
  }

  .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;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-center {
    align-items: center;
  }

  .items-start {
    align-items: flex-start;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .gap-1 {
    gap: var(--spacing);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }

  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }

  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }

  .gap-x-8 {
    column-gap: calc(var(--spacing) * 8);
  }

  .gap-x-10 {
    column-gap: calc(var(--spacing) * 10);
  }

  .gap-y-1 {
    row-gap: var(--spacing);
  }

  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }

  .gap-y-10 {
    row-gap: calc(var(--spacing) * 10);
  }

  .gap-y-12 {
    row-gap: calc(var(--spacing) * 12);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-line {
    border-color: var(--color-line);
  }

  .bg-canvas {
    background-color: var(--color-canvas);
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-7 {
    padding: calc(var(--spacing) * 7);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }

  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }

  .pt-1 {
    padding-top: var(--spacing);
  }

  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .text-center {
    text-align: center;
  }

  .font-display {
    font-family: var(--font-display);
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-\[0\.95rem\] {
    font-size: 0.95rem;
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .text-wrap {
    text-wrap: wrap;
  }

  .break-all {
    word-break: break-all;
  }

  .text-ecg-lilac {
    color: var(--color-ecg-lilac);
  }

  .text-ecg-magenta-700 {
    color: var(--color-ecg-magenta-700);
  }

  .text-ecg-primary-700 {
    color: var(--color-ecg-primary-700);
  }

  .text-ink {
    color: var(--color-ink);
  }

  .text-ink-2 {
    color: var(--color-ink-2);
  }

  .text-ink\/30 {
    color: #17131b4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-ink\/30 {
      color: color-mix(in oklab, var(--color-ink) 30%, transparent);
    }
  }

  .text-muted {
    color: var(--color-muted);
  }

  .text-white {
    color: var(--color-white);
  }

  .text-white\/75 {
    color: #ffffffbf;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/75 {
      color: color-mix(in oklab, var(--color-white) 75%, transparent);
    }
  }

  .text-white\/80 {
    color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/80 {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .not-italic {
    font-style: normal;
  }

  .opacity-0 {
    opacity: 0;
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .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));
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (hover: hover) {
    .hover\:text-ink:hover {
      color: var(--color-ink);
    }
  }

  .focus\:not-sr-only:focus {
    clip-path: none;
    white-space: normal;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    position: static;
    overflow: visible;
  }

  .focus\:fixed:focus {
    position: fixed;
  }

  .focus\:top-3:focus {
    top: calc(var(--spacing) * 3);
  }

  .focus\:left-3:focus {
    left: calc(var(--spacing) * 3);
  }

  .focus\:z-\[60\]:focus {
    z-index: 60;
  }

  .focus\:rounded-lg:focus {
    border-radius: var(--radius-lg);
  }

  .focus\:bg-white:focus {
    background-color: var(--color-white);
  }

  .focus\:px-4:focus {
    padding-inline: calc(var(--spacing) * 4);
  }

  .focus\:py-2:focus {
    padding-block: calc(var(--spacing) * 2);
  }

  .focus\:font-semibold:focus {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .focus\:text-ecg-plum:focus {
    color: var(--color-ecg-plum);
  }

  @media (min-width: 40rem) {
    .sm\:inline-flex {
      display: inline-flex;
    }

    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:flex-row {
      flex-direction: row;
    }

    .sm\:items-center {
      align-items: center;
    }

    .sm\:justify-between {
      justify-content: space-between;
    }
  }

  @media (min-width: 48rem) {
    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .md\:mt-12 {
      margin-top: calc(var(--spacing) * 12);
    }

    .md\:mt-16 {
      margin-top: calc(var(--spacing) * 16);
    }

    .md\:mt-20 {
      margin-top: calc(var(--spacing) * 20);
    }

    .md\:mb-12 {
      margin-bottom: calc(var(--spacing) * 12);
    }

    .md\:h-11 {
      height: calc(var(--spacing) * 11);
    }

    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,3fr\)\] {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }

    .md\:flex-row {
      flex-direction: row;
    }

    .md\:items-center {
      align-items: center;
    }

    .md\:justify-between {
      justify-content: space-between;
    }

    .md\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }

    .md\:gap-10 {
      gap: calc(var(--spacing) * 10);
    }

    .md\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .md\:p-9 {
      padding: calc(var(--spacing) * 9);
    }

    .md\:py-3\.5 {
      padding-block: calc(var(--spacing) * 3.5);
    }

    .md\:py-14 {
      padding-block: calc(var(--spacing) * 14);
    }

    .md\:py-16 {
      padding-block: calc(var(--spacing) * 16);
    }

    .md\:py-28 {
      padding-block: calc(var(--spacing) * 28);
    }

    .md\:pt-14 {
      padding-top: calc(var(--spacing) * 14);
    }
  }

  @media (min-width: 64rem) {
    .lg\:mt-14 {
      margin-top: calc(var(--spacing) * 14);
    }

    .lg\:flex {
      display: flex;
    }

    .lg\:hidden {
      display: none;
    }

    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-\[1\.3fr_2fr\] {
      grid-template-columns: 1.3fr 2fr;
    }

    .lg\:grid-cols-\[minmax\(0\,5fr\)_minmax\(0\,7fr\)\] {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .lg\:grid-cols-\[minmax\(0\,7fr\)_minmax\(0\,5fr\)\] {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .lg\:grid-cols-\[minmax\(0\,11fr\)_minmax\(0\,9fr\)\] {
      grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    }

    .lg\:flex-row {
      flex-direction: row;
    }

    .lg\:items-center {
      align-items: center;
    }

    .lg\:justify-between {
      justify-content: space-between;
    }

    .lg\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }

    .lg\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }

    .lg\:gap-14 {
      gap: calc(var(--spacing) * 14);
    }

    .lg\:gap-16 {
      gap: calc(var(--spacing) * 16);
    }

    .lg\:gap-\[clamp\(3rem\,1rem\+5vw\,6\.5rem\)\] {
      gap: clamp(3rem, 1rem + 5vw, 6.5rem);
    }

    .lg\:py-16 {
      padding-block: calc(var(--spacing) * 16);
    }

    .lg\:py-20 {
      padding-block: calc(var(--spacing) * 20);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .js .reveal {
      opacity: 0;
      transition:
        opacity 0.6s var(--ease-ecg),
        transform 0.6s var(--ease-ecg);
      transform: translateY(12px);
    }

    .js .reveal.is-in {
      opacity: 1;
      transform: none;
    }

    .js .reveal-2 {
      transition-delay: 80ms;
    }

    .js .reveal-3 {
      transition-delay: 0.16s;
    }

    .js .reveal-4 {
      transition-delay: 0.24s;
    }
  }
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}

@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;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-line);
  transition: box-shadow 0.3s var(--ease-ecg);
}
.site-header.is-scrolled {
  box-shadow: 0 10px 30px -22px rgba(23, 19, 27, 0.35);
}

.navlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.8rem;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--color-ink-2);
  transition:
    color 0.15s,
    background-color 0.15s;
}
.navlink:hover,
.nav-group:focus-within > .navlink {
  color: var(--color-ink);
  background: var(--color-canvas);
}
.navlink[aria-current="page"] {
  color: var(--color-ecg-magenta-700);
}
.navlink[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.2rem;
  height: 2px;
  border-radius: 2px;
  background: var(--color-ecg-magenta);
}
.chev {
  transition: transform 0.2s var(--ease-ecg);
  color: var(--color-muted);
}
.navlink[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

.nav-group {
  position: relative;
}
.dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 60;
  min-width: 21rem;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  box-shadow:
    0 24px 50px -24px rgba(23, 19, 27, 0.35),
    0 1px 2px rgba(23, 19, 27, 0.06);
}
/* Pont invisible entre le lien et le menu, pour ne pas le refermer en déplaçant la souris. */
.dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
}
.dd-link {
  display: block;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  transition: background-color 0.15s;
}
.dd-link:hover,
.dd-link:focus-visible {
  background: var(--color-ecg-magenta-50);
  outline: none;
}
.dd-title {
  display: block;
  font-weight: 600;
  color: var(--color-ink);
  font-size: 0.9375rem;
}
.dd-link[aria-current="page"] .dd-title {
  color: var(--color-ecg-magenta-700);
}
.dd-blurb {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.4;
}

/* Menu complet à partir de 1024 px (compact jusqu'à 1279 px, voir plus bas) ; en dessous, menu burger.
   Un téléviseur ou un écran zoomé à 150-175 % garde ainsi le menu complet. */
.nav-desktop {
  display: none;
}
@media (min-width: 1024px) {
  .nav-desktop {
    display: flex;
  }
  .mobile-nav {
    display: none !important;
  }
}
/* Entre 1024 et 1279 px : texte et espacements resserrés, logo un peu plus petit. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .site-header .container-ecg {
    gap: 1rem;
  }
  .site-header a[aria-label] img {
    height: 2.5rem;
  }
  .nav-desktop {
    gap: 2px;
  }
  .nav-desktop .navlink {
    padding: 0.5rem 0.55rem;
    font-size: 0.875rem;
  }
}

/* Mobile */
.mobile-nav {
  border-top: 1px solid var(--color-line);
  background: #fff;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.mob-link {
  display: block;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--color-line);
  font-weight: 600;
  color: var(--color-ink);
}
.mob-link[aria-current="page"] {
  color: var(--color-ecg-magenta-700);
}
.mob-group {
  padding-top: 0.9rem;
  border-bottom: 1px solid var(--color-line);
}
.mob-head {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.mob-sub {
  border-bottom: none;
  padding-block: 0.6rem;
  font-weight: 500;
}

/* Sans JavaScript, le burger ne peut rien ouvrir : affiché seulement avec la classe .js. */
.burger {
  display: none;
}
.js .burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
}
@media (min-width: 1024px) {
  .js .burger {
    display: none;
  }
}
.burger span {
  display: block;
  height: 2px;
  width: 22px;
  margin-inline: auto;
  background: var(--color-ink);
  border-radius: 2px;
  transition: all 0.25s var(--ease-ecg);
}
.footer-h {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
}
.footer-link {
  color: var(--color-ink-2);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition:
    color 0.15s,
    text-decoration-color 0.15s;
}
.footer-link:hover {
  color: var(--color-ecg-magenta-700);
  text-decoration-color: currentColor;
}
.text-muted .footer-link {
  color: var(--color-muted);
}
.text-muted .footer-link:hover {
  color: var(--color-ecg-magenta-700);
}

.news-list {
  display: flex;
  flex-direction: column;
}
.news-item {
  padding-block: 2.5rem;
  border-top: 1px solid var(--color-line);
}
.news-item:first-child {
  padding-top: 0;
  border-top: none;
}
@media (min-width: 768px) {
  .news-item {
    padding-block: 3.5rem;
  }
}
.news-photo {
  border: 1px solid var(--color-line);
}
.news-body p + p {
  margin-top: 0.8rem;
}
.news-body strong {
  color: var(--color-ink);
  font-weight: 600;
}

.prose-ecg {
  max-width: 68ch;
  color: var(--color-ink-2);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.prose-ecg > :first-child {
  margin-top: 0;
}
.prose-ecg h2 {
  font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  color: var(--color-ink);
  margin-top: 3rem;
  margin-bottom: 0.85rem;
}
.prose-ecg h3 {
  font-size: 1.1875rem;
  color: var(--color-ink);
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}
.prose-ecg p {
  margin-bottom: 1.15rem;
}
.prose-ecg ul,
.prose-ecg ol {
  margin: 0 0 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.prose-ecg ul {
  list-style: disc;
}
.prose-ecg ol {
  list-style: decimal;
}
.prose-ecg li::marker {
  color: var(--color-ecg-primary-700);
}
.prose-ecg a {
  color: var(--color-ecg-primary-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose-ecg a:hover {
  color: var(--color-ecg-primary);
}
.prose-ecg strong {
  color: var(--color-ink);
  font-weight: 600;
}
.prose-ecg hr {
  border: none;
  border-top: 1px solid var(--color-line);
  margin: 2.5rem 0;
}
/* CGV (V2.0 du 25/10/2026) : sommaire et tableau des délais de l'annexe 1, qui défile sur téléphone */
.cgv-sommaire {
  margin-bottom: 2.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-ecg);
  background: var(--dk-card);
}
.cgv-sommaire p {
  margin-bottom: 0.5rem;
}
.cgv-sommaire ul {
  margin-bottom: 0;
}
.cgv-tableau {
  margin: 0 0 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-ecg);
}
.cgv-tableau table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.cgv-tableau caption {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--color-ink);
}
.cgv-tableau th,
.cgv-tableau td {
  padding: 0.65rem 0.8rem;
  border-top: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}
.cgv-tableau thead th {
  background: rgba(169, 59, 147, 0.14);
  font-weight: 600;
  color: var(--color-ink);
}
.cgv-tableau tbody th {
  font-weight: 600;
  color: var(--color-ink);
}

.ecg-formcard {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-ecg-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-ecg-md);
  color: var(--color-ink);
}
@media (min-width: 640px) {
  .ecg-formcard {
    padding: 2rem;
  }
}

.ecg-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ecg-field > span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink-2);
}
.ecg-opt {
  font-weight: 400;
  color: var(--color-muted);
}
.ecg-field input,
.ecg-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1px solid #cbc7d0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-ink);
  background: #fff;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.ecg-field textarea {
  resize: vertical;
  min-height: 7.5rem;
}
.ecg-field input:hover,
.ecg-field textarea:hover {
  border-color: #aaa5b1;
}
.ecg-field input:focus-visible,
.ecg-field textarea:focus-visible {
  outline: none;
  border-color: var(--color-ecg-magenta-700);
  box-shadow: 0 0 0 3px rgba(138, 45, 120, 0.2);
}
.was-validated .ecg-field :invalid {
  border-color: var(--color-ecg-danger);
}

.ecg-error {
  font-size: 0.9rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-ecg-danger) 70%, #000);
}
.ecg-consent {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-muted);
}
.ecg-consent a {
  color: var(--color-ecg-magenta-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ecg-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.ecg-success-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(29, 158, 117, 0.15);
  color: #13795a;
}

.faq-list {
  border-bottom: 1px solid var(--color-line);
}
.faq-item {
  border-top: 1px solid var(--color-line);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.35rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--color-ink);
  transition: color 0.15s;
}
.faq-q > span:first-child {
  text-wrap: balance;
}
.faq-q::-webkit-details-marker {
  display: none;
}
.faq-q:hover {
  color: var(--color-ecg-primary-700);
}

/* Signe + qui pivote en × à l'ouverture */
.faq-ic {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--color-ecg-primary-50);
  color: var(--color-ecg-primary-700);
  transition: transform 0.25s var(--ease-ecg);
}
.faq-ic::before,
.faq-ic::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.75px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.faq-ic::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq-item[open] .faq-ic {
  transform: rotate(45deg);
}

.faq-a {
  padding: 0 3.5rem 1.6rem 0;
  color: var(--color-ink-2);
  line-height: 1.65;
}
@media (prefers-reduced-motion: reduce) {
  .faq-ic {
    transition: none;
  }
}

.logos-band {
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.logo-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.75rem clamp(1.75rem, 0.5rem + 3.2vw, 3.25rem);
}
.logo-list--grid {
  gap: 1rem;
}
.logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 11rem;
  min-height: 6.5rem;
  padding: 1rem 1.5rem;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-ecg);
}
.logo-img {
  display: block;
  height: var(--h);
  width: auto;
  max-width: 170px;
  object-fit: contain;
}
@media (max-width: 639.98px) {
  .logo-list {
    gap: 1.25rem 1.5rem;
  }
  .logo-img {
    height: calc(var(--h) * 0.8);
    max-width: 140px;
  }
  .logo-cell {
    min-width: calc(50% - 0.5rem);
    min-height: 5.5rem;
  }
}
.quote-card {
  position: relative;
  padding: 2rem 1.75rem 1.75rem;
}
.quote-mark {
  position: absolute;
  top: 0.4rem;
  left: 1.4rem;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  font-weight: 700;
  color: var(--color-ecg-magenta);
  opacity: 0.35;
}
.quote-card blockquote {
  position: relative;
  padding-top: 1.25rem;
}
.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.offer-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.offer-link:focus-visible {
  outline: none;
}
.offer-card:has(.offer-link:focus-visible) {
  outline: 2px solid var(--color-ecg-magenta-700);
  outline-offset: 3px;
}
.offer-card:hover .offer-link {
  color: var(--color-ecg-magenta-700);
}
.offer-more {
  margin-top: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-ecg-magenta-700);
}
.offer-arrow {
  transition: transform 0.2s var(--ease-ecg);
}
.offer-card:hover .offer-arrow {
  transform: translateX(3px);
}

/* Photo du hero : aplat rose très clair décalé derrière, en clin d'œil au trait du logo. */
.home-hero-photo {
  position: relative;
}
.home-hero-photo::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 1.5rem -1.25rem -1.25rem 1.5rem;
  border-radius: var(--radius-ecg-xl);
  background: var(--color-ecg-magenta-50);
}
.home-hero-photo .photo {
  position: relative;
  z-index: 1;
}

/* Symbole ® de « ECG Protect® » : en exposant, plus petit et plus léger que le texte (revue UX du 16/10/2026) */
.marque-nom {
  white-space: nowrap;
}
sup.marque {
  margin-left: 0.04em;
  font-size: 0.5em;
  font-weight: 500;
  line-height: 0;
  vertical-align: 0.85em;
}
.marque[baseline-shift] {
  font-weight: 500;
}

/* Bouton d'un événement passé (page Actualités) : gardé à l'écran, mais inactif */
.btn-inactif {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* Nos packs (accueil) : cartes en texte seul, comme les cartes « Ce qui démarque » de la page
   ECG Protect® (choix du 20/10/2026 : moins de photos sur le site) ; le lien reste en bas de la carte. */
.pack-carte {
  display: flex;
  flex-direction: column;
}
.pack-carte .link-ecg {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.25rem;
}

/* =========================================================================
   Infographies animées (camembert de l'accueil, page ECG Protect®)
   Page ECG Protect® : « le flux » (.info-flux ; il remplace « une attaque,
   pas à pas », qui reste dans l'historique git). Deux dessins choisis selon la largeur disponible : .fx-h (de
   gauche à droite) et .fx-v (de haut en bas, téléphone). js/site.js ajoute .vu quand l'image devient visible
   (les animations démarrent alors) et gère le bouton pause. « Réduire les animations » : image fixe.
   ========================================================================= */
.info {
  position: relative;
  container-type: inline-size;
  margin: 0;
}
.info > svg {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}
.info .info-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.info text {
  font-family: var(--font-sans);
}
.info .info-titre {
  font-family: var(--font-display);
  font-weight: 800;
}
/* « Le flux » : vos outils → ECG Protect® → les résultats. Grand écran : plan de 1000 × 480, traits et points
   en SVG dessous, cartes en HTML placées en % par-dessus (--y = hauteur du centre de la carte). */
.info-flux {
  max-width: 1000px;
  margin-inline: auto;
}
.fx-h {
  position: relative;
  aspect-ratio: 1000 / 480;
}
.fx-h > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.fx-v {
  display: none;
}
@container (max-width: 879.98px) {
  .fx-h {
    display: none;
  }
  .fx-v {
    display: grid;
  }
}
.fx-entrant {
  fill: var(--color-ecg-magenta-700);
}
.fx-sortant {
  fill: var(--color-ecg-lilac);
}
.fx-carte {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.85rem;
  background: var(--dk-card);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--color-ink);
}
.fx-pic {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: var(--color-ecg-magenta-50);
  color: var(--color-ecg-magenta-700);
}
.fx-pic svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fx-h .fx-src,
.fx-h .fx-res {
  position: absolute;
  top: var(--y);
  transform: translateY(-50%);
}
.fx-h .fx-src {
  left: 0;
  width: 21%;
  height: 46px;
}
.fx-h .fx-res {
  right: 0;
  width: 22.8%;
  height: 60px;
}
.fx-res {
  font-weight: 450;
  color: #fff;
}
/* Chaque résultat s'allume quand son point arrive (--d) */
.info-flux.vu .fx-res {
  animation: fx-res 6s linear infinite;
  animation-delay: var(--d);
}
@keyframes fx-res {
  0%, 100% { border-color: var(--color-line); box-shadow: none; }
  6%, 28% { border-color: var(--dk-line-mag); box-shadow: 0 0 0 3px rgba(169, 59, 147, 0.18); }
  40% { border-color: var(--color-line); box-shadow: none; }
}
/* Au centre : le nom ECG Protect® dans un cercle, entouré d'un anneau qui tourne lentement */
.fx-hub {
  display: grid;
  place-items: center;
  border: 1.5px solid var(--dk-line-mag);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(169, 59, 147, 0.28), rgba(169, 59, 147, 0) 70%),
    var(--dk-card);
  font-size: 1.15rem;
  font-weight: 500;
  color: #fff;
}
.fx-hub::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px dashed rgba(197, 88, 175, 0.55);
  border-radius: 50%;
}
.info-flux.vu .fx-hub::before {
  animation: fx-tourne 18s linear infinite;
}
@keyframes fx-tourne {
  to { transform: rotate(360deg); }
}
.fx-h .fx-hub {
  position: absolute;
  top: 29.17%;
  left: 40.5%;
  width: 19%;
  aspect-ratio: 1;
}
/* Téléphone : outils en deux colonnes, un trait avec une goutte qui descend, le cercle, puis les résultats */
.fx-v ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.fx-v .fx-carte {
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.4rem 0.65rem;
  font-size: 0.875rem;
}
.fx-v .fx-pic {
  width: 1.75rem;
  height: 1.75rem;
}
.fx-v .fx-hub {
  position: relative;
  width: 9rem;
  height: 9rem;
  margin: 14px auto;
}
.fx-trait {
  position: relative;
  width: 2px;
  height: 2.75rem;
  margin: 0.5rem auto;
  background: rgba(255, 255, 255, 0.12);
}
.fx-trait::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-ecg-magenta-700);
  opacity: 0;
}
.fx-trait--sortie::after {
  background: var(--color-ecg-lilac);
}
.info-flux.vu .fx-trait::after {
  animation: fx-goutte 1.5s linear infinite;
}
@keyframes fx-goutte {
  0% { top: -4px; opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { top: calc(100% - 4px); opacity: 0; }
}
/* « Voir, Comprendre, Décider » sous le dessin */
.fx-etapes {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-line);
}
.fx-etapes .eyebrow {
  color: var(--color-ecg-magenta-700);
}
@container (min-width: 640px) {
  .fx-etapes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}
.info-flux.en-pause *::before,
.info-flux.en-pause *::after {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  .info-flux *::before,
  .info-flux *::after {
    animation: none !important;
  }
}

/* Bouton pause, dans le coin bas droit de l'animation (accessibilité : tout ce qui bouge en
   continu doit pouvoir être arrêté) */
.info-pause {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--dk-bg);
  color: var(--color-muted);
  transition: color 0.15s, border-color 0.15s;
}
.info-pause:hover {
  color: #fff;
  border-color: var(--dk-line-mag);
}
.info-pause:focus-visible {
  outline: 2px solid var(--color-ecg-magenta-700);
  outline-offset: 2px;
}
.info-pause .ic-lecture,
.info-pause[aria-pressed="true"] .ic-pause {
  display: none;
}
.info-pause[aria-pressed="true"] .ic-lecture {
  display: block;
}
.info.en-pause * {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .info * {
    animation: none !important;
    transition: none !important;
  }
  .info-pause {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   Bandeau du haut : téléphone, contact, LinkedIn (toutes les pages)
   ───────────────────────────────────────────────────────────── */
/* Bandeau du haut : noir (présentation du 19/10/2026) ; « Contactez-nous » y est le seul lien de contact de l'en-tête */
.topbar {
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
}
.topbar-in {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  min-height: 2.25rem;
}
.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.topbar-link:hover {
  text-decoration-color: currentColor;
}
.topbar-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 4px;
}
@media (max-width: 639.98px) {
  .topbar-in {
    justify-content: center;
    gap: 1rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   « Nos labels et partenaires » : logos qui défilent en continu (accueil).
   La liste est en double (la 2e copie est masquée aux lecteurs d'écran)
   pour que la boucle soit sans à-coup. Pause au survol ; immobile si
   l'utilisateur a demandé moins d'animations.
   ───────────────────────────────────────────────────────────── */
.logos-title {
  margin-bottom: 1.75rem;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.logo-track {
  display: flex;
  width: max-content;
  animation: logos-scroll 45s linear infinite;
}
.logo-marquee:hover .logo-track {
  animation-play-state: paused;
}
.logo-list--row {
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 0 clamp(2.5rem, 1rem + 3.5vw, 4rem);
  padding-right: clamp(2.5rem, 1rem + 3.5vw, 4rem);
}
@keyframes logos-scroll {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .logo-track {
    width: auto;
    justify-content: center;
    animation: none;
  }
  .logo-list--row {
    flex-wrap: wrap;
    flex-shrink: 1;
    gap: 1.75rem 2.5rem;
    padding-inline: 1rem;
  }
  .logo-list--row[aria-hidden="true"] {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   Dernières actualités sur l'accueil
   ───────────────────────────────────────────────────────────── */
.home-news .photo {
  border-radius: 0;
  border-bottom: 1px solid var(--color-line);
}

/* ═════════════════════════════════════════════════════════════
   THÈME SOMBRE
   Fond bleu nuit et magenta, inspirés du flyer Tech Show 2026.
   Les couleurs du texte sont inversées via les variables : tout le site
   (pages, cartes, menus, formulaire) suit automatiquement.
   ═════════════════════════════════════════════════════════════ */
:root {
  --dk-bg: #0e0b1f; /* fond principal */
  --dk-bg-2: #130f28; /* fond des sections alternées */
  --dk-bg-3: #09071a; /* pied de page */
  --dk-card: #19142f; /* cartes, menus, formulaire */
  --dk-line-mag: rgba(201, 79, 174, 0.42); /* liseré mauve des cartes */

  --color-ink: #fff;
  --color-ink-2: #d6cfe2;
  --color-muted: #a69fb6;
  --color-line: rgba(255, 255, 255, 0.1);
  --color-canvas: var(--dk-bg-2);
  --color-ecg-magenta-50: rgba(169, 59, 147, 0.2);
  --color-ecg-primary-50: rgba(169, 59, 147, 0.2);
  /* Petits textes en couleur (liens, surtitres, icônes) : mauve du logo (#a93b93) éclairci, même teinte et
     même saturation, pour rester lisible sur fond sombre (contraste 4,5 minimum) */
  --color-ecg-magenta-700: #c558af;
  --color-ecg-primary-700: #c558af;
}
body {
  background: var(--dk-bg);
}
.bg-white {
  background-color: var(--dk-bg);
}
body > footer {
  background: var(--dk-bg-3);
}
.card-ecg,
.dropdown,
.ecg-formcard {
  background: var(--dk-card);
}
.card-ecg-link:hover {
  border-color: var(--dk-line-mag);
  box-shadow: 0 18px 40px -24px #000;
}
.site-header {
  background: rgba(14, 11, 31, 0.94);
}
.site-header.is-scrolled {
  box-shadow: 0 10px 30px -18px #000;
}
.navlink:hover,
.nav-group:focus-within > .navlink {
  background: rgba(255, 255, 255, 0.07);
}
.dropdown {
  box-shadow: 0 24px 50px -20px #000;
}
.mobile-nav {
  background: var(--dk-bg);
}
/* Boutons noirs à lettres blanches, le mauve au survol : le bouton principal prend le même style que le bouton à contour */
.btn-outline,
.btn-primary {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
  color: #fff;
}
.btn-outline:hover,
.btn-primary:hover {
  background: var(--color-ecg-magenta);
  box-shadow: inset 0 0 0 1.5px var(--color-ecg-magenta);
  color: #fff;
  transform: translateY(-1px);
}
.check-list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c558af' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
}
.home-hero-photo::before {
  inset: auto -0.85rem -0.85rem auto;
  width: 3.5rem;
  height: 3.5rem;
  background: transparent;
  border: solid #c558af;
  border-width: 0 2px 2px 0;
  border-radius: 0 0 var(--radius-ecg-xl) 0;
}
.home-hero-photo .photo {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
@media (max-width: 639px) {
  .home-hero-photo::before {
    display: none;
  }
}
.ecg-field input,
.ecg-field textarea {
  background: var(--dk-bg);
  border-color: rgba(255, 255, 255, 0.38);
}
.ecg-field input:hover,
.ecg-field textarea:hover {
  border-color: rgba(255, 255, 255, 0.55);
}
.ecg-error {
  color: #ff9a8f;
}
/* Logos des partenaires : chacun sur une pastille blanche pour rester lisible */
.logo-list--row {
  gap: 0 0.9rem;
  padding-right: 0.9rem;
}
.logo-list--row li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.5rem;
  padding: 0.6rem 1.1rem;
  background: #fff;
  border-radius: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .logo-list--row {
    gap: 0.9rem;
  }
}

/* ═════════════════════════════════════════════════════════════
   TYPOGRAPHIE (« Inter fin »)
   Titres en Inter, la police du menu, en graisse légère : plus fins et plus élégants que l'ancien
   Montserrat très gras. Une seule famille de polices pour tout le site.
   ═════════════════════════════════════════════════════════════ */
.h-display {
  font-weight: 300;
  letter-spacing: -0.03em;
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1.1;
}
.h1,
.h2 {
  font-weight: 400;
  letter-spacing: -0.025em;
}
.h3,
.font-display.font-bold {
  font-weight: 500;
  letter-spacing: -0.015em;
}
/* Texte courant « Inter allégé » : même police, plus fine et un peu plus petite,
   pour aller avec les titres fins */
body {
  font-size: 1rem;
  font-weight: 350;
  line-height: 1.7;
}
.lead {
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.6;
}
.check-list li {
  line-height: 1.65;
}
strong,
b {
  font-weight: 550;
}
.card-ecg {
  border-radius: 14px;
}
.h2::before {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin-bottom: 1rem;
  border-radius: 2px;
  background: var(--color-ecg-magenta);
}
.h2.text-center::before {
  margin-inline: auto;
}

/* ═════════════════════════════════════════════════════════════
   ACCUEIL : haut de page (mot en couleur, décor « réseau », pôles)
   ═════════════════════════════════════════════════════════════ */
.hero-ecg {
  position: relative;
  overflow: hidden;
}
.hero-ecg > .container-ecg {
  position: relative;
  z-index: 1;
}
/* Mots en couleur des grands titres : même mauve que le logo (19/10/2026) */
.mot-accent {
  color: var(--color-ecg-magenta);
}
/* Décor : points et traits dessinés en SVG, sans flou ni dégradé */
.hero-reseau {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: min(62rem, 80%);
  height: auto;
  opacity: 0.6;
  pointer-events: none;
}
.hero-reseau .traits line {
  stroke: var(--color-ecg-magenta);
  stroke-width: 1;
  opacity: 0.6;
}
.hero-reseau .points circle {
  fill: var(--color-ecg-magenta);
}
.hero-reseau .points .halo {
  opacity: 0.2;
}
/* Avec le camembert des pôles, le décor « réseau » ferait doublon : il ne s'affiche qu'avec les anciennes cartes */
.hero-ecg:has(.cam) .hero-reseau {
  display: none;
}
/* Pôles d'Euro Cyber Group (jamais de nombre affiché) */
.poles-zone {
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}
/* ─────────────────────────────────────────────────────────────
   Camembert 360° « Soleil » : le logo au centre, les thèmes en anneau autour de lui
   (une part par thème, libellé le long du rayon), les familles en anneau tout autour de leurs thèmes
   (nom écrit en courbe). Une couleur par famille (tons du mauve du logo). Comète et petits points qui tournent.
   Arrivée : le disque se pose en tournant, puis le logo apparaît.
   Survol : la part sort avec un petit rebond et une lumière douce suit la souris (js/site.js, section 7) ;
   la famille de la part survolée avance aussi ; survoler une famille fait sortir tous ses thèmes.
   Chaque part a deux couches : .cible (zone de survol, fixe) et .vis (le dessin, qui bouge), pour que la
   souris ne perde pas la part quand elle sort. Coins arrondis (.arrondi) : la forme est rentrée et un trait de
   sa couleur, à jointures rondes, la rend à sa taille. Moins de 640 px de large : disque simplifié, puis la liste.
   ───────────────────────────────────────────────────────────── */
.cam { max-width: 724px; margin-inline: auto; }
.cam .cam-comete { stroke: var(--color-ecg-magenta-700); }
.cam .cam-fam-g { transform: translate(var(--ex), var(--ey)); }
.cam :is(.part, .cam-famille) { cursor: pointer; }
.cam .part text { font-family: var(--font-sans); font-weight: 500; pointer-events: none; }
.cam .cam-anneau-part text { font-family: var(--font-display); font-weight: 600; fill: var(--t); pointer-events: none; }
.cam .vis > .arrondi { stroke: var(--c); stroke-width: var(--sw); stroke-linejoin: round; }
.cam a:focus-visible { outline: none; }
.cam a:focus-visible .vis > .arrondi { stroke: #fff; stroke-width: 4px; }
.cam .cam-coeur { pointer-events: none; }
.cam .cam-petit { display: none; width: min(100%, 22rem); }
.cam > .info-pause { right: 0; bottom: 0; }
/* Arrivée à l'écran (classe .vu ajoutée par js/site.js, section 4) */
.cam .cam-disque { transform-box: view-box; transform-origin: var(--cx) var(--cy); }
.js .cam:not(.vu) :is(.cam-disque, .cam-coeur) { opacity: 0; }
.cam.vu .cam-disque { animation: cam-pose 1.5s var(--ease-ecg) .1s backwards; }
.cam.vu .cam-coeur { animation: cam-fondu .8s ease .7s backwards; }
@keyframes cam-pose { from { opacity: 0; rotate: -80deg; scale: .88; } }
@keyframes cam-fondu { from { opacity: 0; } }
/* Survol (classes est-actif et data-par : js/site.js, section 7) */
.cam .vis { transition: translate .6s cubic-bezier(.34, 1.56, .64, 1), filter .25s; }
.cam a.part:is(:hover, :focus-visible) .vis { translate: calc(var(--dx) * 1.5) calc(var(--dy) * 1.5); filter: brightness(1.06); }
.cam .cam-fam-g.est-actif .cam-anneau-part .vis,
.cam [data-par="nom"] .cam-fam-g.est-actif .vis { translate: calc(var(--ex) * 1.5) calc(var(--ey) * 1.5); }
.cam a.cam-famille:is(:hover, :focus-visible) .vis { filter: brightness(1.06); }
/* Lumière : chaque part a un calque (.cam-lueur) rempli du dégradé que js/site.js déplace sous la souris */
.cam .cam-lueur { mix-blend-mode: overlay; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.cam .halo-visible .cam-lueur { opacity: 1; }
/* Téléphone : familles et thèmes en clair, sous le disque simplifié */
.cam-liste { display: none; }
.cam-bloc { padding: 1.1rem 1.2rem 1.2rem; border-radius: 14px; background: var(--dk-card); border: 1px solid var(--color-line); border-top: 3px solid var(--c); }
.cam-bloc-nom { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: #fff; }
.cam-bloc-nom:hover { color: #f1cde6; }
.cam-pastille { width: .8rem; height: .8rem; border-radius: 3px; background: var(--c); flex: none; }
.cam-themes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.cam-theme { display: inline-block; padding: .3rem .7rem; border-radius: 999px; font-size: .875rem; color: var(--color-ink-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent); transition: color .15s, background-color .15s; }
.cam-theme:hover { color: #fff; background: color-mix(in srgb, var(--c) 28%, transparent); }
@container (max-width: 640px) {
  .cam .cam-grand { display: none; }
  .cam .cam-petit { display: block; }
  .cam .cam-liste { display: grid; gap: .9rem; margin-top: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cam .cam-lueur { display: none; }
}
.quote-mark {
  color: var(--color-ecg-magenta-700);
  opacity: 0.9;
}

.topbar-icone {
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
}

/* ─────────────────────────────────────────────────────────────
   Corrections de la revue du 15/10/2026
   ───────────────────────────────────────────────────────────── */
/* Carte cliquable (pôles, actualités…) : contour visible au clavier */
.card-ecg-link:has(.offer-link:focus-visible) {
  outline: 2px solid var(--color-ecg-magenta-700);
  outline-offset: 3px;
}
/* Pastilles (secteurs d'activité) : texte clair, contraste suffisant sur fond sombre */
.pill {
  color: var(--color-ecg-lilac);
}
/* Menu : rubrique qui contient la page courante */
.navlink[aria-current="true"] {
  color: var(--color-ecg-magenta-700);
}
/* Bandeau de logos : bouton pause (affiché par js/site.js) */
.logos-entete {
  position: relative;
  margin-bottom: 1.75rem;
}
.logos-entete .logos-title {
  margin-bottom: 0;
}
.logos-pause {
  position: absolute;
  top: 50%;
  right: clamp(1rem, 0.25rem + 3.2vw, 2.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-top: -1rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-muted);
  transition: color 0.15s, border-color 0.15s;
}
.logos-pause:hover {
  color: #fff;
  border-color: var(--dk-line-mag);
}
.logos-pause:focus-visible {
  outline: 2px solid var(--color-ecg-magenta-700);
  outline-offset: 2px;
}
.logos-pause .ic-lecture,
.logos-pause[aria-pressed="true"] .ic-pause {
  display: none;
}
.logos-pause[aria-pressed="true"] .ic-lecture {
  display: block;
}
.logo-marquee.is-paused .logo-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .logos-pause {
    display: none;
  }
}
/* Formulaire envoyé sans JavaScript : message affiché au retour (contact.php renvoie vers #message-envoye) */
.ecg-envoi {
  display: none;
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--dk-line-mag);
  color: var(--color-ink);
}
.ecg-envoi:target {
  display: block;
}
.ecg-envoi--erreur {
  border-color: #ff9a8f;
}

/* ─────────────────────────────────────────────────────────────
   Revue UX/UI du 16/10/2026 : premier lot de finitions
   ───────────────────────────────────────────────────────────── */
/* Témoignages : auteur toujours en bas de la carte, avec ses initiales (pas de fausse photo) */
.quote-card,
.quote-card blockquote {
  display: flex;
  flex-direction: column;
}
.quote-card blockquote {
  flex: 1;
}
.quote-auteur {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: auto;
  padding-top: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-ink);
}
.quote-initiales {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: rgba(169, 59, 147, 0.22);
  box-shadow: inset 0 0 0 1px rgba(197, 88, 175, 0.45);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #f1cde6;
}
.quote-role {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-muted);
}
/* Actualités de l'accueil : même cadre 16/9 et même fond pour toutes les images */
.home-news .photo {
  background: #0b0918;
}
.home-news .photo--contain img {
  padding: 0;
}
.home-news .photo::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
@media (min-width: 768px) {
  .actus-entete {
    align-items: flex-end;
  }
}
/* Sur téléphone, « Toutes nos actualités » passe sous les cartes (revue UX du 16/10/2026) : l'en-tête
   s'efface de la mise en page et le lien est placé en dernier, sans être dupliqué. */
@media (max-width: 767px) {
  #actualites > .container-ecg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #actualites .actus-entete {
    display: contents;
  }
  #actualites .actus-entete > a {
    order: 1;
    margin-top: 1.75rem;
  }
  #actualites > .container-ecg > ul {
    align-self: stretch;
  }
}
/* Page ECG Protect® : cartes sans grands vides ; la dernière devient un appel à nous contacter */
.ep-appel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  background: #200c2e;
  border-color: rgba(197, 88, 175, 0.35);
}
@media (min-width: 768px) {
  .ep-appel {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
  }
  .ep-appel-texte {
    max-width: 46rem;
  }
  .ep-appel .btn {
    flex: none;
  }
}
/* Réglementations en pastilles, sur leur propre ligne (page ECG Protect®, « Ce qui démarque ») */
.pills-reglements {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pills-reglements .pill {
  padding: 0.35rem 0.9rem;
  font-size: 0.9375rem;
  color: #fff;
  background: rgba(169, 59, 147, 0.16);
  box-shadow: inset 0 0 0 1px rgba(197, 88, 175, 0.45);
}
@media (min-width: 1024px) {
  .ep-grille {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }
  .ep-composants,
  .ep-secteurs,
  .ep-appel {
    grid-column: 1 / -1;
  }
}

/* ═════════════════════════════════════════════════════════════
   PAGES SERVICES À ONGLETS
   Photo en bandeau sous le titre, textes longs rangés dans des onglets
   (js/site.js, section 5). Sans JavaScript, la barre d'onglets reste masquée et tous les
   contenus s'affichent les uns sous les autres.
   ═════════════════════════════════════════════════════════════ */
.svc-hero-tete {
  display: grid;
  gap: 1.75rem 4rem;
}
/* Photo en vignette, à droite du texte, intégrée aux textes : dans le haut de page, ou à côté de l'introduction quand la page en a une */
.svc-vignette {
  width: 100%;
  max-width: 36rem;
  aspect-ratio: 3 / 2;
}
.svc-intro {
  display: grid;
  gap: 2rem 4rem;
}
@media (min-width: 1024px) {
  .svc-hero-tete {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .svc-hero-vignette,
  .svc-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    align-items: center;
  }
}

/* Onglets : pastilles, même forme que les boutons du site */
.onglets-liste {
  display: none;
}
.js .onglets-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.onglet {
  min-height: 48px;
  padding: 0.5rem 1.375rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: transparent;
  color: var(--color-ink-2);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.onglet:hover {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.onglet[aria-selected="true"] {
  border-color: var(--color-ecg-magenta);
  background: var(--color-ecg-magenta);
  color: #fff;
}
.onglet:focus-visible,
.onglets-panneau:focus-visible {
  outline: 2px solid var(--color-ecg-magenta-700);
  outline-offset: 3px;
}
.onglets-panneau + .onglets-panneau {
  margin-top: 1.5rem;
}
.js .onglets-panneau:not(.est-actif) {
  display: none;
}
.js .onglets-panneau + .onglets-panneau {
  margin-top: 0;
}

/* Textes longs sur deux colonnes en grand écran */
.svc-cols2 {
  margin-top: 1.25rem;
}
.svc-cols2 p {
  margin-bottom: 1rem;
  line-height: 1.65;
  color: var(--color-ink-2);
  break-inside: avoid;
}
@media (min-width: 1024px) {
  .svc-cols2 {
    column-count: 2;
    column-gap: 3rem;
  }
}

/* Lien dans un texte courant */
.lien-texte {
  color: var(--color-ecg-magenta-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lien-texte:hover {
  color: #fff;
}
/* Solutions : liste à gauche, détail à droite (en grand écran) */
.svc-solutions-panneaux {
  min-width: 0;
}
.svc-ic {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: var(--color-ecg-magenta-50);
  color: var(--color-ecg-magenta-700);
}
.svc-def {
  margin-top: 1rem;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-ink);
}
.svc-detail {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-line);
  line-height: 1.65;
  color: var(--color-ink-2);
}
.svc-conclusion {
  margin-top: 2rem;
  padding: 1.375rem 1.75rem;
  border: 1px solid var(--dk-line-mag);
  border-radius: var(--radius-ecg);
  background: rgba(169, 59, 147, 0.14);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-ink);
}
@media (min-width: 1024px) {
  .js .svc-solutions {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 1.5rem;
    align-items: start;
  }
  .js .onglets-liste--colonne {
    flex-direction: column;
    margin-bottom: 0;
  }
  .onglets-liste--colonne .onglet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 60px;
    padding: 0.5rem 1.25rem;
    border-color: var(--color-line);
    border-radius: 12px;
    background: var(--dk-card);
    font-family: var(--font-display);
    font-size: 1rem;
  }
  .onglets-liste--colonne .onglet[aria-selected="true"] {
    border-color: rgba(201, 79, 174, 0.6);
    background: var(--color-ecg-magenta-50);
    font-weight: 700;
  }
  .onglets-liste--colonne .onglet[aria-selected="true"]::after {
    content: "›";
    font-size: 1.25rem;
    color: var(--color-ecg-magenta-700);
  }
}
@media (prefers-reduced-motion: reduce) {
  .onglet {
    transition: none;
  }
}

/* Boutons pause des animations (camembert, logos, infographie ECG Protect®) : invisibles à l'écran,
   mais toujours atteignables au clavier, où ils s'affichent dès
   qu'ils reçoivent le focus. Tout ce qui bouge en continu doit pouvoir être arrêté. */
.info-pause:not(:focus-visible),
.logos-pause:not(:focus-visible) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Page ECG Protect® : composants en deux colonnes, nom à gauche, description à droite (19/10/2026).
   En attendant le tableau fonctionnalités / bénéfices du marketing. */
.ep-fonctions {
  margin-top: 1.25rem;
  border-top: 1px solid var(--color-line);
}
.ep-fonctions > div {
  display: grid;
  gap: 0.3rem 2.5rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--color-line);
}
.ep-fonctions dt {
  padding-left: 1.1rem;
  text-indent: -1.1rem;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-ink);
}
.ep-fonctions dt::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.65rem;
  border-radius: 2px;
  background: var(--color-ecg-magenta-700);
  vertical-align: 0.12em;
}
.ep-fonctions dd {
  line-height: 1.6;
  color: var(--color-ink-2);
}
@media (min-width: 768px) {
  .ep-fonctions > div {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

/* ═════════════════════════════════════════════════════════════
   GLOBE DU HAUT DE L'ACCUEIL
   Le globe (js/globe.js) remplit le haut de page, derrière le texte ; un voile du fond
   de page le fait disparaître sous le texte (à gauche sur grand écran, en haut sur
   téléphone et tablette, où le globe se loge sous les boutons). Apparition en fondu.
   ═════════════════════════════════════════════════════════════ */
.hero-globe {
  position: relative;
  padding-bottom: 19rem;
}
.hero-globe > .container-ecg {
  position: relative;
  z-index: 1;
}
.globe-fond,
.globe-voile {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.globe-fond {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.globe-fond.globe-pret {
  opacity: 1;
}
.globe-voile {
  background:
    linear-gradient(to bottom, var(--dk-bg) 30%, rgba(14, 11, 31, 0) 72%, rgba(14, 11, 31, 0) 88%, var(--dk-bg) 100%);
}
.hero-globe > .globe-pause {
  right: clamp(1rem, 0.25rem + 3.2vw, 2.5rem);
  bottom: 1rem;
}
@media (min-width: 640px) {
  .hero-globe {
    padding-bottom: 24rem;
  }
}
@media (min-width: 1024px) {
  .hero-globe {
    min-height: 40rem;
    padding-bottom: 0;
  }
  .globe-voile {
    background:
      linear-gradient(to bottom, rgba(14, 11, 31, 0) 78%, var(--dk-bg) 100%),
      linear-gradient(to right, var(--dk-bg) 18%, rgba(14, 11, 31, 0.75) 45%, rgba(14, 11, 31, 0) 66%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .globe-fond {
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   Prochain événement (réglé dans js/evenement.js, affiché par js/site.js section 6) :
   bandeau fin en haut de l'accueil, compte à rebours en haut de la page Actualités
   ───────────────────────────────────────────────────────────── */
.evt-bandeau {
  background: #200c2e;
  border-bottom: 1px solid var(--dk-line-mag);
  font-size: 0.875rem;
}
.evt-bandeau-in {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 2.75rem;
  padding-block: 0.5rem;
}
/* L'annonce défile de droite à gauche ; deux séries identiques, la piste avance d'une série */
.evt-defile {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}
.evt-piste {
  display: flex;
  width: max-content;
  animation: evt-defile var(--duree, 30s) linear infinite;
}
.evt-defile:hover .evt-piste {
  animation-play-state: paused;
}
.evt-defile:focus-within .evt-piste {
  animation: none;
}
@keyframes evt-defile {
  to {
    transform: translateX(-50%);
  }
}
.evt-annonce {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  white-space: nowrap;
}
/* Petit losange mauve entre deux annonces */
.evt-annonce::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-inline: 1.75rem 2rem;
  background: var(--color-ecg-magenta-700);
  transform: rotate(45deg);
}
.evt-annonce .evt-texte {
  flex-wrap: nowrap;
}
.evt-etiquette {
  flex: none;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--color-ecg-magenta);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .evt-piste {
    animation: none;
  }
  .evt-annonce[aria-hidden="true"] {
    display: none;
  }
}
.evt-texte {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.1rem 0.75rem;
  text-align: center;
}
.evt-type {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ecg-magenta-700);
}
.evt-titre {
  font-weight: 600;
  color: #fff;
}
.evt-quand {
  color: var(--color-ink-2);
}
.evt-lieu {
  display: inline-block;
}
.evt-lien {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.evt-lien:hover {
  text-decoration-color: currentColor;
}
.evt-zone {
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.evt-carte {
  display: grid;
  gap: 1.75rem;
  padding: 1.75rem;
  background: var(--dk-card);
  border: 1px solid var(--dk-line-mag);
  border-radius: var(--radius-ecg-lg);
}
.evt-infos .h3 {
  margin-top: 0.75rem;
}
.evt-infos .evt-quand {
  margin-top: 0.5rem;
}
.evt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}
.evt-compte {
  display: flex;
  gap: 0.5rem;
}
.evt-unite {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4.25rem;
  padding: 0.6rem 0.5rem 0.5rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--color-line);
}
.evt-nombre {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.evt-nom {
  font-size: 0.75rem;
  color: var(--color-muted);
}
.evt-maintenant {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
}
@media (min-width: 1024px) {
  .evt-carte {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3rem;
    padding: 2rem 2.5rem;
  }
}
@media (max-width: 639.98px) {
  .evt-compte {
    width: 100%;
  }
  .evt-unite {
    flex: 1;
    min-width: 0;
  }
}

/* ─────────────────────────────────────────────────────────────
   Page ECG Protect® : maquette du cockpit (haut de page) et tableau « sans / avec ».
   La maquette est dessinée en HTML, données fictives.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .ep-hero-grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 3.5rem;
  }
}
.ep-cockpit {
  position: relative;
  padding: 0 1rem 0.9rem;
  background: var(--dk-card);
  border: 1px solid var(--dk-line-mag);
  border-radius: var(--radius-ecg-lg);
  box-shadow: 0 30px 80px -40px rgba(169, 59, 147, 0.55);
  font-size: 0.8125rem;
  line-height: 1.35;
}
.ep-cockpit-barre {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 -1rem 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--color-line);
  font-weight: 600;
  color: #fff;
}
.ep-pastilles {
  display: inline-flex;
  gap: 0.35rem;
}
.ep-pastilles i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.ep-cockpit-grille {
  display: grid;
  gap: 0.75rem;
}
.ep-tuile {
  padding: 0.85rem 0.95rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-line);
  border-radius: 12px;
}
.ep-tuile-titre {
  color: var(--color-muted);
}
.ep-score {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}
.ep-anneau {
  flex: none;
  width: 5.25rem;
  height: 5.25rem;
}
.ep-anneau circle {
  fill: none;
  stroke-width: 9;
}
.ep-anneau-fond {
  stroke: rgba(255, 255, 255, 0.08);
}
.ep-anneau-valeur {
  stroke: var(--color-ecg-magenta);
  stroke-linecap: round;
  animation: ep-anneau 1.4s var(--ease-ecg) 0.3s both;
}
@keyframes ep-anneau {
  from {
    stroke-dasharray: 0 100;
  }
}
.ep-anneau text {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  fill: #fff;
}
.ep-anneau .ep-anneau-sur {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  fill: var(--color-muted);
}
.ep-score-detail {
  color: var(--color-ink-2);
}
.ep-score-detail b {
  display: block;
  margin-bottom: 0.15rem;
  font-weight: 600;
  color: #7fd9a6;
}
.ep-barres {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.75rem;
}
.ep-barres li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 2.6rem;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  color: #fff;
}
.ep-barres li > span:last-child {
  font-weight: 400;
  text-align: right;
  color: var(--color-ink-2);
}
.ep-piste {
  display: block;
  height: 0.4rem;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
}
.ep-piste i {
  display: block;
  width: var(--v);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-ecg-magenta), #c86bb4);
  animation: ep-barre 1.2s var(--ease-ecg) 0.4s both;
}
@keyframes ep-barre {
  from {
    width: 0;
  }
}
.ep-chiffres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.ep-chiffre {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
}
.ep-chiffre small {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink-2);
}
.ep-chiffre--alerte {
  color: #ff7a6e;
}
.ep-chiffre--vigilance {
  color: #f5b25a;
}
.ep-plan {
  display: grid;
  gap: 0.6rem;
}
.ep-prochaine {
  margin-top: 0.75rem;
  color: var(--color-ink-2);
}
.ep-prochaine b {
  font-weight: 600;
  color: #fff;
}
.ep-cockpit figcaption {
  margin-top: 0.85rem;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--color-muted);
}
@media (max-width: 479.98px) {
  .ep-chiffres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ep-chiffres > :last-child {
    grid-column: 1 / -1;
  }
}
@media (min-width: 640px) {
  .ep-cockpit-grille {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
  .ep-chiffres,
  .ep-tuile--plan {
    grid-column: 1 / -1;
  }
  .ep-plan {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ep-anneau-valeur,
  .ep-piste i {
    animation: none;
  }
}

.ep-matrice {
  width: 100%;
  max-width: 62rem;
  margin: 2rem auto 0;
  border-collapse: collapse;
  text-align: left;
}
.ep-matrice th {
  padding: 0 0 1.1rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-muted);
  vertical-align: bottom;
}
.ep-matrice th + th {
  padding-left: 1.5rem;
  color: #fff;
}
.ep-matrice th small {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-ink-2);
}
.ep-matrice td {
  position: relative;
  padding: 1.1rem 1.5rem 1.1rem 2.1rem;
  border-top: 1px solid var(--color-line);
  vertical-align: top;
}
.ep-matrice td + td {
  border-left: 1px solid var(--color-line);
  padding-left: 3.6rem;
}
.ep-matrice td::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  left: 0;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: center / 0.7rem no-repeat;
}
/* Sans ECG Protect® : triangle d'avertissement jaune */
.ep-matrice td:first-child::before {
  border-radius: 0;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8 22.6 21H1.4z' fill='%23f5c13d' stroke='%23f5c13d' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M12 9.2v5.6' stroke='%231c1500' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.8' r='1.35' fill='%231c1500'/%3E%3C/svg%3E");
}
.ep-matrice td + td::before {
  left: 1.5rem;
  background-color: var(--color-ecg-magenta);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.ep-matrice strong {
  display: block;
  font-weight: 600;
  color: var(--color-ink-2);
}
.ep-matrice td + td strong {
  color: #fff;
}
.ep-matrice td span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.875rem;
  color: var(--color-muted);
}
.ep-matrice td + td span {
  color: var(--color-ink-2);
}
.ep-matrice-fin {
  margin-top: 2rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
}
/* Téléphone : chaque ligne devient un bloc (⚠ sans, puis ✓ avec) ; les titres de colonnes restent lus par les lecteurs d'écran */
@media (max-width: 767.98px) {
  .ep-matrice,
  .ep-matrice tbody,
  .ep-matrice tr,
  .ep-matrice td {
    display: block;
  }
  .ep-matrice thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .ep-matrice tr {
    padding-block: 1rem;
    border-top: 1px solid var(--color-line);
  }
  .ep-matrice td,
  .ep-matrice td + td {
    padding: 0 0 0 2.1rem;
    border: 0;
  }
  .ep-matrice td + td {
    margin-top: 0.85rem;
  }
  .ep-matrice td::before,
  .ep-matrice td + td::before {
    top: 0.1rem;
    left: 0;
  }
}

/* Logo de l'en-tête, un peu plus grand */
.logo-entete {
  width: auto;
  height: 2.75rem;
}
@media (min-width: 768px) {
  .logo-entete {
    height: 3.25rem;
  }
}

/* « Ce qui démarque » (page ECG Protect®) : texte justifié */
.ep-demarque p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Dernier menu de la barre (Services cyber) : le menu s'ouvre vers la gauche pour rester dans l'écran */
.nav-group:last-child .dropdown {
  left: auto;
  right: 0;
}

/* ─────────────────────────────────────────────────────────────
   Page ECG Protect® : maquettes de la plateforme
   Écrans dessinés en HTML avec des données fictives (« Entreprise Démo »), jamais des captures de la vraie
   plateforme. .mq = un écran ; .ep-ecrans = la rangée de trois écrans.
   ───────────────────────────────────────────────────────────── */
.mq {
  overflow: hidden;
  background: var(--dk-card);
  border: 1px solid var(--dk-line-mag);
  border-radius: var(--radius-ecg-lg);
  box-shadow: 0 30px 80px -40px rgba(169, 59, 147, 0.55);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--color-ink-2);
}
.mq-barre {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--color-line);
  font-weight: 500;
  color: #fff;
}
.mq-pts {
  display: inline-flex;
  gap: 0.35rem;
}
.mq-pts i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.mq-droite {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-muted);
}
.mq-corps {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
}
.mq-tuile {
  padding: 0.8rem 0.9rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-line);
  border-radius: 12px;
}
.mq-t {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--color-muted);
}
.mq-t b {
  font-weight: 550;
  color: #fff;
}
.mq-fictif {
  padding: 0 1rem 0.8rem;
  font-size: 0.72rem;
  color: var(--color-muted);
}
/* jauges en demi-cercle et anneau du CyberScore */
.mq-jauges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.6rem;
  text-align: center;
}
.mq-jauges svg {
  display: block;
  width: 100%;
  max-width: 5.5rem;
  height: auto;
  margin: 0 auto;
}
.mq-jauges p {
  margin-top: 0.15rem;
  font-weight: 550;
  color: #fff;
}
.mq .mq-fond,
.mq .mq-val {
  fill: none;
  stroke-width: 9;
}
.mq .mq-fond {
  stroke: rgba(255, 255, 255, 0.08);
}
.mq .mq-val {
  stroke: var(--color-ecg-magenta-700);
  stroke-linecap: round;
}
.mq svg text {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 550;
  fill: #fff;
}
/* listes d'écarts et d'actions */
.mq-liste {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.6rem;
}
.mq-liste li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
}
.mq-niv {
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 600;
}
.mq-crit {
  background: rgba(255, 122, 110, 0.18);
  color: #ff9a8f;
}
.mq-elev {
  background: rgba(245, 178, 90, 0.18);
  color: #f5c27a;
}
.mq-moy {
  background: rgba(169, 59, 147, 0.25);
  color: var(--color-ecg-lilac);
}
.mq-ref,
.mq-legende {
  font-size: 0.72rem;
  color: var(--color-muted);
}
.mq-etat {
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.mq-ok,
.mq-on {
  color: #7fd9a6;
}
.mq-att {
  color: #f5c27a;
}
.mq-plan {
  color: #c9b6ff;
}
.mq-off {
  color: var(--color-muted);
}
.mq-bouton {
  display: inline-flex;
  margin-top: 0.7rem;
  padding: 0.45rem 0.8rem;
  border-radius: 8px;
  background: var(--color-ecg-magenta);
  font-size: 0.75rem;
  font-weight: 550;
  color: #fff;
}
.mq-puce {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(169, 59, 147, 0.22);
  font-size: 0.72rem;
  color: var(--color-ecg-lilac);
}
.mq-piste {
  display: block;
  height: 0.4rem;
  margin-top: 0.55rem;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
}
.mq-piste i {
  display: block;
  width: var(--v);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-ecg-magenta), #c86bb4);
}
/* connecteurs */
.mq-conn {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.mq-conn div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  font-weight: 450;
  color: #fff;
}
.mq-conn span {
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
/* rangée de trois écrans, chacun avec sa légende ; les uns sous les autres sur tablette et téléphone */
.ep-ecrans {
  display: grid;
  gap: 2.5rem;
  max-width: 36rem;
  margin: 2.5rem auto 0;
}
.ep-ecran {
  margin: 0;
}
.ep-ecran figcaption {
  margin-top: 1rem;
  color: var(--color-ink-2);
}
.ep-ecran figcaption b {
  display: block;
  font-size: 1.1rem;
  font-weight: 500;
  color: #fff;
}
@media (min-width: 1024px) {
  .ep-ecrans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 1.5rem;
    max-width: none;
  }
}
@media (max-width: 479.98px) {
  .mq-jauges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}