/* ==========================================================
   VVV NOOR — RADIA ASSOCIATION
   Design system global
========================================================== */

:root {
  /* Typographies */
  --radia-font-display: "Sora", Arial, sans-serif;
  --radia-font-body: "Manrope", Arial, sans-serif;

  /* ========================================================
     COULEURS OFFICIELLES RADIA
  ======================================================== */

  /* Couleur principale */
  --radia-primary: #52a79d;
  --radia-primary-dark: #347f77;
  --radia-primary-deep: #1d5751;
  --radia-primary-soft: rgba(82, 167, 157, 0.14);

  /* Couleur claire */
  --radia-sky: #cff4de;
  --radia-sky-light: #e9faf0;
  --radia-sky-soft: rgba(207, 244, 222, 0.55);

  /* Beige officiel */
  --radia-beige: #cfbc98;
  --radia-beige-light: #e8ddc8;
  --radia-beige-soft: rgba(207, 188, 152, 0.18);

  /* Blancs */
  --radia-white: #ffffff;
  --radia-off-white: #fbfaf7;
  --radia-cream: #f5f1e9;

  /* Couleurs profondes */
  --radia-night: #163c39;
  --radia-deep: #245f59;
  --radia-dark: #102c2a;

  /* Compatibilité avec les anciens noms */
  --radia-ivory: var(--radia-off-white);
  --radia-gold: var(--radia-beige);
  --radia-gold-light: var(--radia-beige-light);
  --radia-hope: var(--radia-primary);
  --radia-warm: var(--radia-beige);

  /* Textes */
  --radia-text-dark: #183b38;
  --radia-text: #315651;
  --radia-text-muted: #6b8581;
  --radia-text-light: #ffffff;
  --radia-text-soft: #e9f5f2;

  /* Surfaces */
  --radia-surface: rgba(255, 255, 255, 0.1);
  --radia-surface-light: rgba(255, 255, 255, 0.84);
  --radia-surface-primary: rgba(82, 167, 157, 0.1);
  --radia-surface-beige: rgba(207, 188, 152, 0.16);

  /* Bordures */
  --radia-border: rgba(82, 167, 157, 0.24);
  --radia-border-light: rgba(255, 255, 255, 0.24);
  --radia-border-beige: rgba(207, 188, 152, 0.42);

  /* Dégradés */
  --radia-gradient-primary:
    linear-gradient(
      135deg,
      #52a79d 0%,
      #6fbbb1 48%,
      #cff4de 100%
    );

  --radia-gradient-soft:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f5f1e9 52%,
      #cff4de 100%
    );

  --radia-gradient-deep:
    linear-gradient(
      135deg,
      #102c2a 0%,
      #1d5751 52%,
      #52a79d 100%
    );

  --radia-gradient-beige:
    linear-gradient(
      135deg,
      #cfbc98 0%,
      #e8ddc8 100%
    );

  /* Ombres */
  --radia-shadow-soft:
    0 24px 80px rgba(24, 59, 56, 0.12);

  --radia-shadow-medium:
    0 28px 90px rgba(24, 59, 56, 0.18);

  --radia-shadow-deep:
    0 35px 120px rgba(16, 44, 42, 0.3);

  --radia-shadow-primary:
    0 22px 60px rgba(82, 167, 157, 0.25);

  /* Rayons */
  --radia-radius-small: 14px;
  --radia-radius-medium: 24px;
  --radia-radius-large: 38px;
  --radia-radius-pill: 999px;

  /* Largeur */
  --radia-container: 1360px;

  /* Transitions */
  --radia-transition-fast: 180ms ease;
  --radia-transition: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --radia-transition-slow: 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================
   RESET GLOBAL
========================================================== */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--radia-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--radia-text-dark);
  background: var(--radia-off-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

::selection {
  color: var(--radia-white);
  background: var(--radia-primary);
}

::-moz-selection {
  color: var(--radia-white);
  background: var(--radia-primary);
}

/* ==========================================================
   TYPOGRAPHIE
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  color: var(--radia-text-dark);
  font-family: var(--radia-font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

p {
  margin-top: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition:
    color var(--radia-transition-fast),
    opacity var(--radia-transition-fast),
    background-color var(--radia-transition-fast),
    border-color var(--radia-transition-fast),
    transform var(--radia-transition);
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

img,
video,
svg,
picture,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* ==========================================================
   FORMULAIRES
========================================================== */

input,
textarea,
select {
  width: 100%;
  color: var(--radia-text-dark);
  background: var(--radia-white);
  border: 1px solid var(--radia-border);
  border-radius: var(--radia-radius-small);
  outline: none;
  transition:
    border-color var(--radia-transition-fast),
    box-shadow var(--radia-transition-fast),
    background-color var(--radia-transition-fast);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--radia-primary);
  box-shadow:
    0 0 0 4px rgba(82, 167, 157, 0.14);
}

input::placeholder,
textarea::placeholder {
  color: var(--radia-text-muted);
  opacity: 0.8;
}

/* ==========================================================
   ELEMENTOR — NETTOYAGE
========================================================== */

.elementor-widget-html,
.elementor-widget-html .elementor-widget-container {
  width: 100%;
}

.elementor-button,
.elementor-widget-button .elementor-button {
  font-family: var(--radia-font-body);
}

.elementor a,
.elementor button {
  outline: none;
}

.elementor-section,
.e-con {
  --container-max-width: var(--radia-container);
}

.elementor-widget-html button,
.elementor-widget-html a {
  box-shadow: none;
}

.elementor-widget-html button:hover,
.elementor-widget-html button:focus,
.elementor-widget-html a:hover,
.elementor-widget-html a:focus {
  box-shadow: none;
}

/* ==========================================================
   UTILITAIRES
========================================================== */

.vvv-designer-radia-container {
  width: min(
    calc(100% - 40px),
    var(--radia-container)
  );
  margin-inline: auto;
}

.vvv-designer-radia-text-primary {
  color: var(--radia-primary);
}

.vvv-designer-radia-text-beige {
  color: var(--radia-beige);
}

.vvv-designer-radia-bg-primary {
  background: var(--radia-primary);
}

.vvv-designer-radia-bg-light {
  background: var(--radia-sky-light);
}

.vvv-designer-radia-bg-beige {
  background: var(--radia-beige);
}

.vvv-designer-radia-bg-white {
  background: var(--radia-white);
}

.vvv-designer-radia-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================
   ACCESSIBILITÉ
========================================================== */

:focus-visible {
  outline: 2px solid var(--radia-primary);
  outline-offset: 4px;
}

@media (max-width: 767px) {
  .vvv-designer-radia-container {
    width: min(calc(100% - 28px), var(--radia-container));
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

```css
/* ==========================================================
   ELEMENTOR — SUPPRESSION DES COULEURS ROSES / VIOLETTES
   Palette globale officielle Radia
========================================================== */

/*
 * Remplacement des couleurs globales du kit Elementor.
 * Le sélecteur fonctionne quel que soit l’identifiant du kit :
 * elementor-kit-5, elementor-kit-12, etc.
 */

body[class*="elementor-kit-"],
body.elementor-page {
  --e-global-color-primary: var(--radia-primary);
  --e-global-color-secondary: var(--radia-primary-dark);
  --e-global-color-text: var(--radia-text-dark);
  --e-global-color-accent: var(--radia-beige);

  --e-global-typography-primary-font-family: var(--radia-font-display);
  --e-global-typography-secondary-font-family: var(--radia-font-body);
  --e-global-typography-text-font-family: var(--radia-font-body);
  --e-global-typography-accent-font-family: var(--radia-font-body);
}

/* ==========================================================
   LIENS ELEMENTOR
========================================================== */

.elementor :where(
  a:not(.elementor-button)
) {
  color: inherit;
}

.elementor :where(
  a:not(.elementor-button)
):hover,
.elementor :where(
  a:not(.elementor-button)
):focus {
  color: var(--radia-primary-dark);
}

/* Liens actifs */

.elementor :where(
  .elementor-item-active,
  .current-menu-item > a,
  .current_page_item > a,
  .current-menu-ancestor > a
) {
  color: var(--radia-primary);
}

/* ==========================================================
   BOUTONS ELEMENTOR
========================================================== */

.elementor :where(
  .elementor-button,
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
) {
  font-family: var(--radia-font-body);
  -webkit-tap-highlight-color: transparent;
}

.elementor :where(
  .elementor-button,
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
):hover,
.elementor :where(
  .elementor-button,
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
):focus,
.elementor :where(
  .elementor-button,
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
):active {
  color: var(--radia-white);
  background-color: var(--radia-primary-dark);
  border-color: var(--radia-primary-dark);
  box-shadow:
    0 16px 38px rgba(82, 167, 157, 0.22);
}

/* Texte et icônes internes des boutons */

.elementor :where(
  .elementor-button:hover,
  .elementor-button:focus,
  .elementor-button:active
) :where(
  .elementor-button-text,
  .elementor-button-icon,
  i,
  svg
) {
  color: inherit;
  fill: currentColor;
  stroke: currentColor;
}

/* ==========================================================
   MENUS ELEMENTOR
========================================================== */

.elementor :where(
  .elementor-nav-menu--main .elementor-item
):hover,
.elementor :where(
  .elementor-nav-menu--main .elementor-item
):focus,
.elementor :where(
  .elementor-nav-menu--main .elementor-item
):active {
  color: var(--radia-primary-dark);
  background-color: transparent;
}

.elementor :where(
  .elementor-nav-menu--dropdown .elementor-item
):hover,
.elementor :where(
  .elementor-nav-menu--dropdown .elementor-item
):focus,
.elementor :where(
  .elementor-nav-menu--dropdown .elementor-item
):active {
  color: var(--radia-primary-dark);
  background-color: var(--radia-sky-light);
}

/* Trait animé ou soulignement du menu */

.elementor :where(
  .elementor-nav-menu--main .elementor-item
)::after,
.elementor :where(
  .elementor-nav-menu--main .elementor-item
)::before {
  background-color: var(--radia-primary);
}

/* ==========================================================
   ICÔNES ELEMENTOR
========================================================== */

.elementor :where(
  .elementor-icon
) {
  color: var(--radia-primary);
  fill: var(--radia-primary);
}

.elementor :where(
  .elementor-icon
):hover,
.elementor :where(
  .elementor-icon
):focus {
  color: var(--radia-primary-dark);
  fill: var(--radia-primary-dark);
}

/* Icônes sociales */

.elementor :where(
  .elementor-social-icon
):hover,
.elementor :where(
  .elementor-social-icon
):focus {
  color: var(--radia-white);
  background-color: var(--radia-primary);
}

.elementor :where(
  .elementor-social-icon:hover,
  .elementor-social-icon:focus
) :where(
  i,
  svg
) {
  color: inherit;
  fill: currentColor;
}

/* ==========================================================
   LISTES D’ICÔNES
========================================================== */

.elementor :where(
  .elementor-icon-list-item a
):hover,
.elementor :where(
  .elementor-icon-list-item a
):focus {
  color: var(--radia-primary-dark);
}

.elementor :where(
  .elementor-icon-list-item a:hover,
  .elementor-icon-list-item a:focus
) :where(
  .elementor-icon-list-text,
  .elementor-icon-list-icon
) {
  color: inherit;
}

.elementor :where(
  .elementor-icon-list-item a:hover,
  .elementor-icon-list-item a:focus
) svg {
  fill: currentColor;
  stroke: currentColor;
}

/* ==========================================================
   FORMULAIRES ELEMENTOR
========================================================== */

.elementor :where(
  input,
  textarea,
  select
):focus {
  color: var(--radia-text-dark);
  background-color: var(--radia-white);
  border-color: var(--radia-primary);
  outline: none;
  box-shadow:
    0 0 0 4px rgba(82, 167, 157, 0.14);
}

/* Cases à cocher et boutons radio */

.elementor :where(
  input[type="checkbox"],
  input[type="radio"]
) {
  accent-color: var(--radia-primary);
}

/* ==========================================================
   PAGINATION, FILTRES ET ONGLETS
========================================================== */

.elementor :where(
  .page-numbers,
  .elementor-pagination a,
  .elementor-filter,
  .e-filter-item
):hover,
.elementor :where(
  .page-numbers,
  .elementor-pagination a,
  .elementor-filter,
  .e-filter-item
):focus {
  color: var(--radia-white);
  background-color: var(--radia-primary);
  border-color: var(--radia-primary);
}

.elementor :where(
  .page-numbers.current,
  .elementor-filter-active,
  .e-filter-item[aria-pressed="true"]
) {
  color: var(--radia-white);
  background-color: var(--radia-primary);
  border-color: var(--radia-primary);
}

/* ==========================================================
   ACCORDÉONS ET ONGLETS ELEMENTOR
========================================================== */

.elementor :where(
  .elementor-tab-title:hover,
  .elementor-tab-title:focus,
  .elementor-tab-title.elementor-active
) {
  color: var(--radia-primary-dark);
}

.elementor :where(
  .elementor-accordion-icon,
  .elementor-toggle-icon
) {
  color: var(--radia-primary);
}

/* ==========================================================
   LIENS DANS LES TEXTES
========================================================== */

.elementor-widget-text-editor :where(a):hover,
.elementor-widget-heading :where(a):hover,
.elementor-widget-theme-post-content :where(a):hover {
  color: var(--radia-primary-dark);
  text-decoration-color: var(--radia-primary);
}

/* ==========================================================
   FOCUS ET ACCESSIBILITÉ
========================================================== */

.elementor :where(
  a,
  button,
  input,
  textarea,
  select,
  [tabindex]
):focus {
  outline: none;
}

.elementor :where(
  a,
  button,
  input,
  textarea,
  select,
  [tabindex]
):focus-visible {
  outline: 2px solid var(--radia-primary);
  outline-offset: 4px;
}

/* ==========================================================
   EMPÊCHER LES ANCIENNES OMBRES ROSES ELEMENTOR
========================================================== */

.elementor :where(
  a,
  button,
  .elementor-button,
  .elementor-icon,
  .elementor-social-icon
):focus,
.elementor :where(
  a,
  button,
  .elementor-button,
  .elementor-icon,
  .elementor-social-icon
):active {
  text-shadow: none;
}

/* ==========================================================
   SÉLECTION DE TEXTE
========================================================== */

.elementor ::selection {
  color: var(--radia-white);
  background-color: var(--radia-primary);
}

.elementor ::-moz-selection {
  color: var(--radia-white);
  background-color: var(--radia-primary);
}
```