/* ==========================================================================
   BERYWAM — feuille de style unique
   --------------------------------------------------------------------------
   Approche « Intrinsic Web Design » (Jen Simmons) :
   - aucune media query de largeur d'écran : les mises en page s'adaptent
     d'elles-mêmes grâce à flex-wrap, grid auto-fit/minmax, clamp(), min() ;
   - les media queries servent uniquement aux préférences de l'utilisateur
     (animations réduites, thème sombre) ;
   - propriétés logiques (inline/block) pour être indépendant du sens d'écriture.

   Organisation en couches (@layer) : l'ordre de déclaration fixe la priorité,
   ce qui évite les batailles de spécificité et les !important.
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;


/* --------------------------------------------------------------------------
   Police Oswald (titres) — auto-hébergée, aucun appel à Google Fonts.
   Sous-ensemble limité aux MAJUSCULES, chiffres et ponctuation (7 Ko) :
   elle ne doit donc être utilisée qu'avec text-transform: uppercase.
   Licence SIL Open Font License 1.1.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Oswald";
  src: url("/assets/fonts/oswald-500-caps.woff2") format("woff2");
  font-weight: 500;
  font-display: swap; /* le texte s'affiche tout de suite avec la police de secours */
}

/* Couleurs du fond animé, déclarées comme vraies couleurs pour pouvoir
   être animées en douceur (sans @property, le fond reste simplement fixe). */
@property --bg-a { syntax: "<color>"; inherits: false; initial-value: #d22e1c; }
@property --bg-b { syntax: "<color>"; inherits: false; initial-value: #fdaf05; }


/* ---------- Remise à zéro minimale ---------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  img, svg { display: block; max-inline-size: 100%; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  input, button, textarea, select { font: inherit; }
  /* L'attribut hidden l'emporte toujours, même sur un display: grid/flex */
  [hidden] { display: none !important; }
}


/* ---------- Variables (jetons de design) ---------------------------------- */
@layer tokens {
  :root {
    /* Palette de la marque, reprise du site d'origine */
    --red: #d22e1c;
    --orange: #fdaf05;
    --yellow: #fdc80a;
    --black: #010202;
    --white: #fff;

    /* Rôles : ce sont eux qui changent en thème sombre */
    --ink: var(--black);        /* texte, icônes, logos */
    --paper: var(--white);      /* texte posé sur un fond --ink */
    --shade: rgb(0 0 0 / 0);    /* voile appliqué sur le fond animé */
    --logo-filter: none;        /* les logos SVG sont noirs d'origine */
    --field-bg: rgb(255 255 255 / 0.9); /* fond des champs de formulaire */

    /* Typographie fluide : la taille grandit avec la fenêtre, entre deux bornes */
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-title: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, var(--font-body);
    --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --step-1: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
    --step-2: clamp(1.6rem, 1.2rem + 2vw, 2.75rem);

    /* Espacements fluides */
    --space-s: clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);
    --space-m: clamp(1.25rem, 1rem + 1.25vw, 2rem);
    --space-l: clamp(2rem, 1.5rem + 2.5vw, 4rem);
    --gutter: 1rem;             /* marge latérale minimale sur mobile */

    /* Durées reprises du site d'origine */
    --spin-duration: 15s;       /* rotation 3D du logo */
    --bg-duration: 10s;         /* cycle du dégradé */

    color-scheme: light;
  }

  /* Thème sombre : même dégradé, assombri par un voile, contenus en blanc */
  @media (prefers-color-scheme: dark) {
    :root {
      --ink: var(--white);
      --paper: var(--black);
      --shade: rgb(0 0 0 / 0.55);
      --logo-filter: invert(1);
      --field-bg: rgb(0 0 0 / 0.55);
      color-scheme: dark;
    }
  }
}


/* ---------- Styles de base ------------------------------------------------ */
@layer base {
  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body {
    min-block-size: 100dvh;
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.5;
    color: var(--ink);
    background-color: var(--orange); /* couleur de secours avant le dégradé */
  }

  /* Fond animé de la marque (rouge → orange → jaune → orange → rouge).
     Il vit dans un pseudo-élément fixe : son animation ne touche jamais la
     mise en page, et seul ce calque est repeint. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(var(--shade), var(--shade)),
      linear-gradient(to top, var(--bg-a), var(--bg-b));
    animation:
      bg-a var(--bg-duration) linear infinite,
      bg-b var(--bg-duration) linear infinite calc(var(--bg-duration) / -8);
  }

  h1, h2, h3 {
    font-family: var(--font-title);
    font-weight: 500;
    text-transform: uppercase; /* obligatoire : la police ne contient que les capitales */
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-wrap: balance;
  }

  h2 { font-size: var(--step-2); }

  p { text-wrap: pretty; }

  a { color: inherit; text-underline-offset: 0.2em; }

  /* Focus clavier bien visible sur tous les fonds */
  :focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 4px;
    border-radius: 4px;
  }
}


/* ---------- Mise en page -------------------------------------------------- */
@layer layout {
  /* Colonne principale : 64rem max, et toujours une marge sur les côtés.
     min() choisit tout seul la plus petite des deux valeurs : pas besoin
     de point de rupture. */
  .wrapper {
    inline-size: min(100% - 2 * var(--gutter), 64rem);
    margin-inline: auto;
  }

  /* Page en trois zones : en-tête, contenu extensible, pied de page.
     En haut, petite marge fluide (8 à 16 px) : les drapeaux restent
     près du bord et le logo remonte. */
  .page {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-block-size: 100dvh;
    gap: var(--space-l);
    padding-block: clamp(0.5rem, 0.25rem + 1vw, 1rem) var(--space-m);
  }

  /* Pile verticale centrée, espacée régulièrement */
  .stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);
    text-align: center;
  }

  /* Grille qui passe seule de 1 à plusieurs colonnes selon la place :
     chaque colonne fait au moins 20rem (ou toute la largeur si l'écran est
     plus étroit). Servira à la vidéo, à la newsletter et au contact. */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--space-m);
    align-self: stretch; /* occupe toute la largeur dans une pile centrée */
  }

  /* Ligne d'éléments qui passent à la ligne quand il n'y a plus de place */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--gap, var(--space-s));
  }
}


/* ---------- Composants ---------------------------------------------------- */
@layer components {

  /* Logo : symbole qui tourne en 3D + logotype BERYWAM.
     Les deux images passent l'une sous l'autre si la largeur manque. */
  .logo {
    --gap: clamp(0.5rem, 2vw, 1.25rem);
    font-size: inherit; /* le h1 ne sert qu'à la sémantique */
  }

  .logo img { filter: var(--logo-filter); }

  .logo__symbol {
    block-size: clamp(4rem, 3rem + 6vw, 7.5rem);
    inline-size: auto;
    aspect-ratio: 1;
    /* Rotation 3D identique au site d'origine : un tour complet sur l'axe
       vertical en 15 s, à vitesse constante, en boucle. */
    animation: spin-y var(--spin-duration) linear infinite;
  }

  .logo__text {
    block-size: clamp(3.8rem, 2.9rem + 5.8vw, 7.2rem);
    inline-size: auto;
    aspect-ratio: 20.41 / 6.24;
  }

  .tagline {
    font-family: var(--font-title);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--step-1);
    line-height: 1.2;
  }

  /* Membres : chaque nom reste entier ; le point de séparation est ajouté
     en CSS après chaque nom sauf le dernier, pour ne jamais commencer une
     ligne par un point. */
  .members {
    --gap: 0 0.4em;
    font-weight: 600;
  }

  .members li:not(:last-child)::after {
    content: "·";
    margin-inline-start: 0.4em;
  }

  /* Icônes des réseaux sociaux, comme dans le pied de page d'origine.
     Au survol, elles font un tour sur elles-mêmes, comme les « bouches »
     du menu d'origine. */
  .social { --gap: clamp(1rem, 0.5rem + 2.5vw, 2rem); }

  .social a {
    display: grid;
    place-items: center;
    padding: 0.35rem;
    border-radius: 50%;
    transition: transform 1s ease;
  }

  .social a:hover { transform: rotate(1turn); }

  .social .icon {
    block-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem);
    inline-size: auto;
    aspect-ratio: 1;
  }

  /* Bloc de contenu (écouter, vidéo, newsletter, contact…).
     container-type permet aux éléments internes de s'adapter à la largeur
     du bloc lui-même plutôt qu'à celle de l'écran (unités cqi). */
  .block {
    container-type: inline-size;
    /* Un conteneur de requêtes n'a pas de largeur « naturelle » : on lui
       demande donc d'occuper toute la largeur disponible. */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    /* Marge intérieure fluide : 1rem sur mobile, 1,5rem au plus sur grand
       écran. (Une valeur en cqi serait calculée ici sur la largeur de la
       fenêtre, faute de conteneur parent : trop large sur grand écran.) */
    padding: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
    border: 3px solid var(--ink);
    border-radius: 1.25rem;
    text-align: center;
  }

  /* Liens de streaming en « pastilles » contrastées (noir sur fond
     coloré), lisibles quelle que soit la phase du dégradé. */
  .chips { --gap: 0.6rem; }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.55em 1em;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: transform 0.2s ease;
  }

  .chip:hover { transform: translateY(-2px); }

  .chip .icon { inline-size: 1.25em; block-size: 1.25em; flex: none; }

  /* Vidéo YouTube : vignette 16:9 cliquable, remplacée par le lecteur
     (iframe de même classe) au clic. Les bandes noires de la vignette
     YouTube (format 4:3) sont rognées par object-fit: cover. */
  .video {
    position: relative;
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--black);
    color: var(--white);
    text-decoration: none;
  }

  .video img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .video:hover img { transform: scale(1.04); }

  /* Bouton lecture dessiné en CSS : disque noir + triangle blanc */
  .video::before,
  .video::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 1;
  }

  .video::before {
    inline-size: clamp(3.5rem, 18cqi, 5rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--black);
    box-shadow: 0 0 0 3px var(--white);
    transition: background 0.2s ease;
  }

  .video:hover::before { background: var(--red); }

  .video::after {
    inline-size: clamp(1.2rem, 6cqi, 1.7rem);
    aspect-ratio: 1;
    translate: 12% 0; /* centre optique du triangle */
    background: var(--white);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }

  /* Titre posé sur la vignette, sur un voile sombre pour rester lisible */
  .video__title {
    position: absolute;
    inset: auto 0 0;
    padding: 2.5rem 0.9rem 0.7rem;
    background: linear-gradient(transparent, rgb(0 0 0 / 0.85));
    font-weight: 700;
    line-height: 1.3;
    text-align: start;
  }

  /* Le lecteur n'a pas d'effet de survol ni de pseudo-éléments */
  iframe.video::before,
  iframe.video::after { content: none; }

  /* Sélecteur de langue : deux drapeaux calés en haut, côté fin de ligne
     (à droite en français/anglais). align-self agit dans la pile .stack.
     Le drapeau de la langue affichée est net, avec une ombre légère ;
     l'autre (le lien) est en retrait : plus petit, couleurs adoucies mais
     reconnaissables ; il reprend ses couleurs au survol ou au clavier.
     Zone cliquable ≥ 24 px. */
  .lang-switch {
    align-self: flex-end;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-block-end: calc(-0.5 * var(--space-m)); /* rapproche le logo sans le toucher */
  }

  .lang-switch > * {
    display: block;
    flex: none;
    padding: 0.25rem;
  }

  .lang-switch a {
    border-radius: 0.3rem;
    opacity: 0.8;
    filter: saturate(0.35);
    transition: opacity 0.2s ease, filter 0.2s ease;
  }

  /* Seul le dessin rétrécit : la zone cliquable garde sa taille */
  .lang-switch a svg {
    scale: 0.8;
    transition: scale 0.2s ease;
  }

  .lang-switch a:hover,
  .lang-switch a:focus-visible { opacity: 1; filter: none; }

  .lang-switch a:hover svg,
  .lang-switch a:focus-visible svg { scale: 1; }

  /* Contour clavier plus fin que celui du reste du site, à la taille du drapeau */
  .lang-switch a:focus-visible { outline-width: 2px; outline-offset: 0; }

  /* Taille fixe : le « max-inline-size: 100% » général pouvait réduire
     les drapeaux à zéro */
  .lang-switch svg {
    display: block;
    inline-size: 1.75rem;
    block-size: auto;
    max-inline-size: none;
    aspect-ratio: 3 / 2;
    border-radius: 0.15rem;
    /* Liseré discret : le blanc des drapeaux reste visible sur fond blanc */
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent);
  }

  /* Drapeau de la langue affichée, et drapeau survolé : exactement le même
     rendu (taille et ombre), pour qu'ils paraissent de même hauteur */
  .lang-switch__current svg,
  .lang-switch a:hover svg,
  .lang-switch a:focus-visible svg {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent),
      0 2px 6px rgb(0 0 0 / 0.35);
  }

  /* Formulaires : colonne centrée de largeur limitée, libellés à gauche.
     Contact : Nom et E-mail côte à côte s'il y a 2 × 14rem de place
     (flex-wrap) ; Sujet et Message toujours en pleine largeur. */
  .form-area {
    display: grid;
    gap: var(--space-s);
  }

  .form {
    display: grid;
    gap: var(--space-s);
    inline-size: min(100%, var(--form-width, 42rem));
    margin-inline: auto;
    text-align: start;
  }

  .form--compact { --form-width: 34rem; }

  .form__fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
  }

  /* Newsletter : champ et bouton sur une ligne s'il y a la place, sinon
     bouton dessous en pleine largeur (le champ grandit 999 fois plus vite) */
  .form__inline {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
  }

  .form__inline .field { flex: 999 1 14rem; }
  .form__inline .form__actions { flex: 1 0 auto; }
  .form__inline .button { inline-size: 100%; }

  .field { display: grid; gap: 0.3rem; flex: 1 1 14rem; }
  .field--wide { flex-basis: 100%; }
  .field label { font-weight: 700; }

  .field input,
  .field textarea {
    inline-size: 100%;
    padding: 0.7em 0.9em;
    border: 2px solid var(--ink);
    border-radius: 0.6rem;
    background: var(--field-bg);
    color: var(--ink);
  }

  .field textarea { resize: vertical; min-block-size: 8rem; }

  /* Champ mal rempli, signalé seulement après une saisie (:user-invalid) :
     bordure épaissie et pointillée, visible sur toutes les couleurs du fond */
  .field :user-invalid { border-width: 3px; border-style: dashed; }

  .form__hint,
  .form__legal {
    font-size: 0.85rem;
    text-align: center;
  }

  /* Champ piège : hors de la vue et du clavier, mais présent pour les robots */
  .form__trap {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .form__captcha { justify-self: center; }
  .form__captcha:empty { display: none; }

  .form__actions { text-align: center; }

  /* Bordure = même hauteur que les champs voisins */
  button.button {
    border: 2px solid var(--ink);
    font-size: inherit;
    cursor: pointer;
  }

  .form__actions .button { min-inline-size: min(100%, 12rem); }

  button.button:disabled { cursor: progress; }

  /* Pendant l'envoi : roue d'attente devant le texte du bouton */
  .form[aria-busy="true"] .button::before {
    content: "";
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    margin-inline-end: 0.6em;
    vertical-align: -0.15em;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  /* Encadré de résultat (succès ou échec), à la place du formulaire :
     couleurs inversées pour qu'il ressorte, apparition en douceur */
  .form-result {
    inline-size: min(100%, 34rem);
    margin-inline: auto;
    padding: clamp(1.25rem, 5cqi, 2.25rem);
    border-radius: 1rem;
    background: var(--ink);
    color: var(--paper);
    animation: result-in 0.45s ease-out both;
  }

  .form-result > div {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
  }

  .form-result h3 { font-size: var(--step-1); }

  /* Icône en CSS : coche sur jaune (succès), « ! » sur rouge (échec) */
  .form-result [data-tone]::before {
    content: "";
    inline-size: 3.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23010202' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 60% no-repeat;
    animation: pop 0.5s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .form-result [data-tone="error"]::before {
    background: var(--red) 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'%3E%3Cpath d='M12 5.5v8.5M12 18.5v.01'/%3E%3C/svg%3E") center / 60% no-repeat;
  }

  .form-result__note { font-size: 0.85rem; opacity: 0.85; }

  /* Focus donné pour les lecteurs d'écran ; pas cliquable : pas de contour */
  .form-result:focus { outline: none; }

  /* Lien de l'encadré : bouton après un échec (« Réessayer »), simple
     lien après un succès (« Envoyer un autre message ») */
  .form-result__back {
    margin-block-start: 0.25rem;
    font-weight: 700;
    text-wrap: balance;
    text-decoration-thickness: 1px;
  }

  [data-tone="error"] .form-result__back {
    padding: 0.5em 1.2em;
    border: 2px solid currentColor;
    border-radius: 999px;
    text-decoration: none;
  }

  [data-tone="error"] .form-result__back:hover { background: var(--paper); color: var(--ink); }
  [data-tone="success"] .form-result__back:hover { text-decoration-thickness: 2px; }

  .form-result :focus-visible { outline-color: var(--paper); }

  /* Bandeau de consentement (créé par main.js) : posé en bas de l'écran,
     centré, jamais bloquant. Le texte et les boutons se placent côte à côte
     s'il y a la place, l'un sous l'autre sinon (flex-wrap + flex-basis). */
  .consent {
    position: fixed;
    inset-inline: 0;
    inset-block-end: var(--gutter);
    z-index: 10;
    inline-size: min(100% - 2 * var(--gutter), 44rem);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: var(--ink);
    color: var(--paper);
    box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 0.35);
    font-size: 0.9rem;
  }

  .consent p { flex: 1 1 18rem; }

  .consent__buttons {
    display: flex;
    flex: 1 0 auto;
    justify-content: center;
    gap: 0.75rem;
  }

  /* « Refuser » et « Accepter » strictement identiques (exigence CNIL) */
  .consent button {
    flex: 1;
    padding: 0.6em 1.4em;
    border: 2px solid var(--paper);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
  }

  .consent :focus-visible { outline-color: var(--paper); }

  /* Bouton qui ressemble à un lien (« Gérer les cookies ») */
  .link-button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    cursor: pointer;
  }

  /* Pied de page */
  .site-footer {
    font-size: 0.875rem;
    --gap: 0.5rem 1.25rem;
  }

  .site-footer a { text-decoration-thickness: 1px; }

  /* Pages de texte (mentions légales, 404) */
  .prose {
    inline-size: min(100%, 65ch); /* longueur de ligne confortable */
    margin-inline: auto;
    text-align: start;
    display: flex;
    flex-direction: column;
    gap: 1em;
  }

  .prose h2 { font-size: var(--step-1); margin-block-start: 1em; }

  .button {
    display: inline-block;
    padding: 0.7em 1.4em;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease;
  }

  .button:hover:not(:disabled) { transform: translateY(-2px); }
}


/* ---------- Utilitaires --------------------------------------------------- */
@layer utilities {
  /* Masqué à l'écran mais lu par les lecteurs d'écran */
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .icon { fill: currentColor; }
}


/* ---------- Animations ---------------------------------------------------- */
@keyframes spin-y {
  to { transform: rotateY(1turn); }
}

/* Roue d'attente des boutons d'envoi */
@keyframes spin {
  to { rotate: 1turn; }
}

/* Encadré de résultat des formulaires : apparition, puis icône qui « saute » */
@keyframes result-in {
  from { opacity: 0; translate: 0 0.75rem; }
}

@keyframes pop {
  from { scale: 0; }
}

/* Les deux couleurs du dégradé parcourent le même cycle, légèrement
   décalées dans le temps : on retrouve l'effet de défilement d'origine. */
@keyframes bg-a {
  0%, 100% { --bg-a: var(--red); }
  25%, 75% { --bg-a: var(--orange); }
  50%      { --bg-a: var(--yellow); }
}

@keyframes bg-b {
  0%, 100% { --bg-b: var(--red); }
  25%, 75% { --bg-b: var(--orange); }
  50%      { --bg-b: var(--yellow); }
}

/* L'utilisateur a demandé moins d'animations dans son système :
   le logo et le fond restent immobiles. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  body::before {
    background:
      linear-gradient(var(--shade), var(--shade)),
      linear-gradient(to top, var(--red), var(--orange) 55%, var(--yellow));
  }
}