/* ============================================================================
   radar.css — Source unique des jetons de design et des composants partagés.
   Chargé par TOUTES les pages : vitrine, blog, portail client.

   Charte « Signal Souverain » (docs/2026-07-05_philosophie-design-signal-souverain.md) :
   trois couleurs seulement. Bleu souverain = la source et la légitimité.
   Vert signal = la détection. Rouge Marianne = l'action, jamais décoratif.

   ⚠ Les couleurs vivent ICI et nulle part ailleurs. Avant le 8 août 2026, la
   palette des badges A/B/C/D existait en 6 exemplaires (voir docs/vitrine-seo.md
   §3) et se désynchronisait à chaque retouche. Ne pas réintroduire de couleur en
   dur dans une page : ajouter un jeton ici et le consommer.

   ⚠ #12784a et #000091 servent AUSSI à des usages qui ne sont pas des badges
   (kicker « pourquoi maintenant », statut CRM, liens, bandeau bleu, signature
   d'email). Jamais de chercher/remplacer global sur ces valeurs.
   ========================================================================= */

:root {
  /* ---- Couleurs de marque ------------------------------------------------ */
  --bleu:        #000091;  /* bleu souverain, celui de l'État français */
  --bleu-clair:  #1a1ac2;  /* survol du bleu */
  --bleu-nuit:   #05051f;  /* fond nocturne des salles de contrôle */
  --bleu-abysse: #0a0a33;
  --rouge:       #E1000F;  /* rouge Marianne, réservé à l'action */
  --rouge-clair: #ff1523;
  --signal:      #3ddc84;  /* vert signal, l'écho radar */

  /* ---- Neutres ----------------------------------------------------------- */
  --encre:       #10122b;  /* texte principal */
  --gris:        #5c6079;  /* texte secondaire */
  --gris-clair:  #9aa0bd;  /* texte tertiaire, mentions de source */
  --clair:       #f7f8fd;  /* fond de section alternée */
  --bordure:     #bec4dd;  /* 1,73:1 sur blanc. #e7e9f4 valait 1,21:1 : invisible. */
  --blanc:       #ffffff;

  /* ---- Neutres sur fond sombre ------------------------------------------- */
  --sombre-texte:   #a9aede;
  --sombre-discret: #7d82b8;
  /* .16 donnait rgb(23,25,67) sur le fond #05051f, soit 1,20:1 : le trait
     existait dans le code et pas a l'ecran. .42 -> 1,96:1, la meme valeur
     percue que les separations de l'accueil. */
  --sombre-bordure: rgba(120,130,255,.42);
  --sombre-voile:   rgba(255,255,255,.035);

  /* ---- Badges de note A à D ---------------------------------------------- */
  /* Palette « Signal vif », en vigueur depuis le 25/07/2026. Pastilles pleines
     à lettres blanches. L'ancienne palette désaturée « éteignait » la liste. */
  --note-a: #0ea05a;
  --note-b: #2563eb;
  --note-c: #e8720c;
  --note-d: #e11d2e;

  /* ---- Typographie ------------------------------------------------------- */
  /* Police système : zéro requête réseau, donc zéro pénalité Lighthouse. */
  --police: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --police-mono: 'Cascadia Mono', 'Consolas', ui-monospace, monospace;

  --t-xs:  12px;
  --t-sm:  13.5px;
  --t-md:  15px;
  --t-lg:  16.5px;
  --t-xl:  18px;
  --t-h3:  clamp(17px, 2vw, 19px);
  --t-h2:  clamp(24px, 3.2vw, 34px);
  --t-h1:  clamp(30px, 4.6vw, 54px);

  --interligne:       1.65;
  --interligne-titre: 1.14;

  /* ---- Espacement (échelle spacieuse : page marketing, pas tableau de bord) */
  --e-1: 8px;
  --e-2: 16px;
  --e-3: 24px;
  --e-4: 32px;
  --e-5: 48px;
  --e-6: 64px;
  --e-7: 96px;

  /* ---- Formes ------------------------------------------------------------ */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-plein: 999px;

  /* ---- Ombres ------------------------------------------------------------ */
  --ombre-sm: 0 4px 14px rgba(0,0,145,.06);
  --ombre-md: 0 14px 36px rgba(0,0,145,.10);
  --ombre-lg: 0 30px 70px rgba(0,0,145,.14);
  --ombre-rouge: 0 6px 22px rgba(225,0,15,.35);

  /* ---- Durées ------------------------------------------------------------ */
  /* 150-300 ms : au-delà l'interface paraît molle, en deçà elle paraît sèche. */
  --d-rapide: .18s;
  --d-moyen:  .25s;
  --d-lent:   .7s;

  --largeur-page: 1080px;
}

/* ============================================================================
   1. Base
   ========================================================================= */

/* Volontairement limité : radar.css est chargé par des pages qui ont déjà leur
   propre remise à zéro. On ne touche pas au box-sizing global (le portail ne
   l'applique pas partout), il est porté par les composants nommés ci-dessous.

   ⚠ Ne pas remplacer cette liste par [class*="r-"] : ce sélecteur attraperait
   toute classe contenant « r- » (compteur-, header-, filter-…) et déborderait
   sur les pages qui ne demandent rien. */

.r-evitement, .r-btn, .r-note, .r-lien-fantome,
.r-fond, .r-fond *,
.r-carrousel, .r-carrousel *,
.r-fenetre, .r-fenetre *,
.r-maquette, .r-maquette *,
.r-confiance, .r-confiance * { box-sizing: border-box; }

/* ---- Lien d'évitement ---------------------------------------------------- */
/* Une page à nav fournie impose de pouvoir sauter au contenu (règle skip-links). */
.r-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--rouge);
  color: #fff;
  padding: 12px 22px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
  font-size: var(--t-md);
  text-decoration: none;
}
.r-evitement:focus { left: 0; }

/* ---- Focus visible ------------------------------------------------------- */
/* Ne jamais retirer l'anneau de focus : c'est la seule boussole au clavier. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================================================================
   2. Boutons
   ========================================================================= */

.r-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  padding: 13px 28px;
  border: none;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--d-rapide), box-shadow var(--d-rapide),
              background var(--d-rapide), border-color var(--d-rapide);
}
.r-btn:hover { transform: translateY(-2px); }
.r-btn:active { transform: translateY(0); }

.r-btn--action  { background: var(--rouge); color: #fff; box-shadow: var(--ombre-rouge); }
.r-btn--action:hover { background: var(--rouge-clair); box-shadow: 0 10px 28px rgba(225,0,15,.45); }

.r-btn--bleu    { background: var(--bleu); color: #fff; }
.r-btn--bleu:hover { background: var(--bleu-clair); }

.r-btn--contour { background: #fff; color: var(--bleu); border: 1.5px solid var(--bleu); }
.r-btn--contour:hover { background: #f0f0fb; }

/* Sur fond sombre */
.r-btn--verre {
  background: rgba(255,255,255,.07);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
}
.r-btn--verre:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.4); }

.r-btn--sm { padding: 9px 20px; font-size: var(--t-sm); }
.r-btn--bloc { width: 100%; }

/* Lien discret, souligné en pointillé */
.r-lien-fantome {
  color: var(--sombre-texte);
  font-size: 14.5px;
  text-decoration: none;
  border-bottom: 1px dashed #4a4f8a;
  padding-bottom: 2px;
  transition: color var(--d-rapide);
}
.r-lien-fantome:hover { color: #fff; }

/* ============================================================================
   3. Badges de note A à D
   ========================================================================= */

.r-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
  line-height: 1.25;
}
.r-note--a { background: var(--note-a); }
.r-note--b { background: var(--note-b); }
.r-note--c { background: var(--note-c); }
.r-note--d { background: var(--note-d); }

/* Sur fond sombre, un liseré évite que la pastille ne « flotte ». */
.r-sombre .r-note { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

/* ============================================================================
   4. Fond tech animé (grille + halos dérivants)
   ========================================================================= */

/* Transposition CSS pure de GridGlowBackground (21st.dev). L'original utilise
   Canvas + Framer Motion ; deux dégradés animés suffisent et ne coûtent rien au
   fil principal, ce qui préserve le budget Lighthouse. */

.r-fond {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.r-fond-grille {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(120,130,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,130,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  /* La grille s'efface vers le bas : la rigueur administrative en texture,
     pas en motif de papier peint. */
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

.r-fond-halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
}
.r-fond-halo--bleu {
  width: 620px; height: 620px;
  top: -240px; right: -120px;
  background: radial-gradient(circle, rgba(46,46,190,.55) 0%, transparent 68%);
  animation: r-derive-a 26s ease-in-out infinite alternate;
}
.r-fond-halo--vert {
  width: 460px; height: 460px;
  bottom: -200px; left: -100px;
  background: radial-gradient(circle, rgba(61,220,132,.20) 0%, transparent 70%);
  animation: r-derive-b 34s ease-in-out infinite alternate;
}

/* Dérive lente et irrégulière : « rien ne bondit, tout émerge ». */
@keyframes r-derive-a {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-70px, 50px, 0) scale(1.09); }
  100% { transform: translate3d(40px, 96px, 0) scale(.96); }
}
@keyframes r-derive-b {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(80px, -46px, 0) scale(1.12); }
  100% { transform: translate3d(-30px, -80px, 0) scale(1); }
}

/* ============================================================================
   5. Carrousel produit
   ========================================================================= */

/* Transposition de Snap Carousel (21st.dev) : scroll-snap natif plutôt qu'une
   librairie. Le défilement reste fonctionnel sans JavaScript ; le script
   n'ajoute que l'avance automatique et la synchronisation des onglets. */

.r-carrousel { position: relative; }

.r-carrousel-onglets {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin-bottom: var(--e-3);
}

.r-onglet {
  padding: 9px 18px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-plein);
  background: rgba(255,255,255,.05);
  color: var(--sombre-texte);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--d-rapide), color var(--d-rapide),
              border-color var(--d-rapide);
}
.r-onglet:hover { background: rgba(255,255,255,.1); color: #fff; }
.r-onglet[aria-selected="true"] {
  background: var(--signal);
  border-color: var(--signal);
  color: #04331f;
}

.r-carrousel-piste {
  /* Indispensable : fait de la piste l'offsetParent de ses vues, pour que
     vue.offsetLeft se mesure depuis le bord gauche du contenu défilant et
     s'utilise directement comme scrollLeft. Sans cela, offsetLeft se rapporte
     à .r-carrousel et le défilement programmé ne bouge pas. */
  position: relative;
  display: flex;
  /* Sans cet alignement, chaque vue s'étire à la hauteur de la plus haute et la
     plus courte traîne un grand vide sous elle. */
  align-items: flex-start;
  gap: var(--e-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Marge de respiration pour que les vues voisines s'aperçoivent. */
  padding-bottom: var(--e-2);
}
.r-carrousel-piste::-webkit-scrollbar { display: none; }

.r-carrousel-vue {
  flex: 0 0 100%;
  /* « start » plutôt que « center » : avec des vues pleine largeur séparées par
     un gap, le centrage rend la position d'arrêt imprévisible d'une vue à
     l'autre, et le calcul de l'index au défilement manuel dérive. */
  scroll-snap-align: start;
  min-width: 0;
}

.r-carrousel-legende {
  text-align: center;
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  color: var(--sombre-texte);
}
.r-carrousel-legende b { color: var(--signal); font-weight: 600; }

.r-carrousel-points {
  display: flex;
  justify-content: center;
  gap: var(--e-1);
  margin-top: var(--e-2);
}
.r-point {
  width: 8px; height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  cursor: pointer;
  transition: background var(--d-rapide), width var(--d-rapide);
}
.r-point[aria-current="true"] { background: var(--signal); width: 24px; border-radius: var(--r-plein); }

/* ============================================================================
   6. Cadre de fenêtre applicative
   ========================================================================= */

/* Les cinq livrables viennent d'univers différents (navigateur, Excel, Word).
   Un châssis commun les fait lire comme un seul système, tandis que la barre de
   titre dit de quel logiciel il s'agit. */

.r-fenetre {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--ombre-lg);
  border: 1px solid rgba(255,255,255,.1);
}

.r-fenetre-barre {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 10px 14px;
  background: #e8eaf2;
  border-bottom: 1px solid #d6d9e6;
}
.r-feux { display: flex; gap: 6px; flex: 0 0 auto; }
.r-feux i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.r-feux i:nth-child(1) { background: #ff5f57; }
.r-feux i:nth-child(2) { background: #febc2e; }
.r-feux i:nth-child(3) { background: #28c840; }

.r-fenetre-titre {
  flex: 1;
  min-width: 0;
  font-size: var(--t-xs);
  color: #56597a;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r-fenetre-appli {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  color: #fff;
}
.r-fenetre-appli--web   { background: var(--bleu); }
.r-fenetre-appli--excel { background: #1d6f42; }
.r-fenetre-appli--word  { background: #2b579a; }

.r-fenetre-corps { background: #fff; overflow: hidden; }

/* Dans un carrousel, les cinq livrables doivent occuper exactement la même
   hauteur : sinon le cadre saute d'un onglet à l'autre et la vue la plus courte
   laisse un vide sous elle. Le contenu qui dépasse défile dans le cadre. */
.r-carrousel .r-fenetre-corps {
  height: clamp(320px, 46vh, 430px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Les maquettes de tableaux sont denses par nature. Elles défilent dans leur
   propre cadre plutôt que de pousser la page en défilement horizontal. */
.r-defile { overflow: auto; -webkit-overflow-scrolling: touch; }
.r-defile > * { min-width: 640px; }

/* ============================================================================
   7. Maquettes de livrables
   ========================================================================= */

/* Reconstruites en HTML plutôt que capturées : aucune donnée personnelle, un
   poids de quelques kilo-octets au lieu de 150, et une palette de badges qui
   suit automatiquement les jetons ci-dessus au lieu de se figer dans un PNG. */

.r-maquette {
  font-family: var(--police);
  color: var(--encre);
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
}

/* ---- Portail ------------------------------------------------------------- */
.r-portail-tete {
  background: var(--bleu);
  color: #fff;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: var(--e-1);
  font-weight: 700;
  font-size: 13px;
}
.r-portail-tete .r-pastille {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 8px var(--signal);
}
.r-portail-tete .r-portail-menu {
  margin-left: auto;
  font-weight: 400;
  font-size: 11px;
  color: #c5c9ec;
  display: flex;
  gap: 14px;
}

.r-portail-corps { padding: 16px; }
.r-portail-titre { font-size: 17px; font-weight: 800; letter-spacing: -.3px; margin: 0 0 3px; }
.r-portail-sous  { font-size: 11.5px; color: var(--gris); margin: 0 0 14px; }
.r-portail-sous b { color: var(--note-a); }

.r-portail-actions { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.r-faux-btn {
  padding: 7px 13px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.r-faux-btn--rouge  { background: var(--rouge); color: #fff; }
.r-faux-btn--contour{ background: #fff; color: var(--bleu); border: 1px solid var(--bordure); }

.r-tableau { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.r-tableau th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--bordure);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
}
.r-tableau td {
  padding: 9px 10px;
  border-bottom: 1px solid #f1f2f8;
  white-space: nowrap;
}
.r-tableau tr:last-child td { border-bottom: none; }
.r-tableau .r-denom { font-weight: 700; color: var(--bleu); }
.r-forme {
  font-size: 9.5px; font-weight: 700; letter-spacing: .4px;
  color: var(--bleu); background: #eef0fb;
  padding: 2px 7px; border-radius: 5px;
}

/* ---- Excel --------------------------------------------------------------- */
.r-excel-bandeau {
  background: #1d3557;
  color: #fff;
  text-align: center;
  padding: 10px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
}
.r-excel-sous {
  background: #f3f5fa;
  text-align: center;
  padding: 6px;
  font-size: 10.5px;
  font-style: italic;
  color: var(--gris);
  border-bottom: 1px solid #dfe3ee;
}
.r-grille { width: 100%; border-collapse: collapse; font-size: 11px; }
.r-grille th {
  background: #1d3557;
  color: #fff;
  padding: 7px 9px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.r-grille td {
  padding: 6px 9px;
  border-bottom: 1px solid #e7eaf3;
  border-right: 1px solid #eef0f7;
  white-space: nowrap;
}
.r-grille tr:nth-child(even) td { background: #f7f9fd; }
.r-grille .r-num { font-variant-numeric: tabular-nums; }

/* ---- Document Word (lettre) --------------------------------------------- */
.r-page {
  background: #fff;
  padding: 26px 30px;
  font-size: 11px;
  line-height: 1.7;
  color: #1a1a1a;
}
.r-page-exp { color: #555; font-size: 10.5px; margin-bottom: 18px; }
.r-page-dest { margin-bottom: 16px; font-size: 11px; }
.r-page-dest b { display: block; }
.r-page-date { text-align: right; font-size: 10.5px; color: #555; margin-bottom: 16px; }
.r-page-objet { font-weight: 700; margin-bottom: 14px; }
.r-page p { margin: 0 0 11px; }
.r-page-sign { margin-top: 18px; font-size: 10.5px; color: #555; }

/* ---- Enveloppes ---------------------------------------------------------- */
.r-enveloppes { display: grid; gap: 12px; padding: 18px; background: #f3f4f9; }
.r-enveloppe {
  background: #fff;
  border: 1px solid #dcdfeb;
  border-radius: 3px;
  aspect-ratio: 220 / 110;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.r-enveloppe-bloc { font-size: 10.5px; line-height: 1.5; }
.r-enveloppe-bloc b { display: block; font-size: 11.5px; }
.r-enveloppe-bloc .r-siret { color: #8b8fa6; font-size: 8.5px; letter-spacing: .2px; }

/* ---- Planche d'étiquettes Avery ----------------------------------------- */
.r-avery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #dfe2ec;
  padding: 1px;
}
.r-etiquette {
  background: #fff;
  padding: 12px 11px;
  min-height: 74px;
  font-size: 9.5px;
  line-height: 1.42;
}
.r-etiquette b { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .1px; }
.r-etiquette .r-siret { color: #9296ab; font-size: 8px; }

/* ============================================================================
   8. Bande de confiance
   ========================================================================= */

.r-confiance {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  padding: var(--e-3) var(--e-3);
}
.r-confiance-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-sm);
  color: var(--sombre-texte);
}
.r-confiance-item svg { flex: 0 0 auto; color: var(--signal); }
.r-confiance-item b { color: #fff; font-weight: 600; }

/* ============================================================================
   9. Apparitions au scroll
   ========================================================================= */

.r-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--d-lent) ease, transform var(--d-lent) ease;
}
.r-reveal.visible { opacity: 1; transform: none; }
.r-reveal.d1 { transition-delay: .1s; }
.r-reveal.d2 { transition-delay: .22s; }
.r-reveal.d3 { transition-delay: .34s; }

/* ============================================================================
   10. Mouvement réduit
   ========================================================================= */

/* Règle d'accessibilité de sévérité haute : le mouvement doit rester une
   préférence, jamais une imposition. On coupe la dérive des halos, les
   apparitions et l'avance automatique du carrousel (le script lit ce même
   media query pour ne pas démarrer son minuteur). */
@media (prefers-reduced-motion: reduce) {
  .r-fond-halo--bleu,
  .r-fond-halo--vert { animation: none; }
  .r-reveal { opacity: 1; transform: none; transition: none; }
  .r-carrousel-piste { scroll-behavior: auto; }
  .r-btn:hover { transform: none; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ============================================================================
   11. Adaptation aux petits écrans
   ========================================================================= */

@media (max-width: 820px) {
  .r-avery { grid-template-columns: repeat(2, 1fr); }
  .r-confiance { gap: var(--e-2) var(--e-3); }
}

@media (max-width: 560px) {
  .r-avery { grid-template-columns: 1fr; }
  .r-carrousel-onglets { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .r-carrousel-onglets::-webkit-scrollbar { display: none; }
  .r-btn { padding: 12px 22px; }
}