@import url('https://api.fontshare.com/v2/css?f[]=switzer@500,400,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=sharpie@900&display=swap');

/* Reset et base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* v-cloak - Masque le contenu pendant le rendu Vue.js */
[v-cloak] {
    display: none;
}

/* Fondations - Typographie */
:root {
  /* Tailles de police */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-s: 0.9rem; /* Anciennement xxs */
  --font-size-m: 1.1rem; /* Anciennement s */
  --font-size-l: 1.3rem;  /* Anciennement m */
  --font-size-xl: 1.6rem; /* Anciennement l */
  --font-size-xxl: 2.6rem;   /* Anciennement xl */

  /* Graisses de police */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
}

/* Skeleton Loaders */
.skeleton {
  background: linear-gradient(90deg, 
    var(--color-surface-container-1) 25%, 
    var(--color-surface-container-2) 50%, 
    var(--color-surface-container-1) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--border-radius-sm);
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Skeleton Lines */
.skeleton-line-wide {
  height:var(--font-size-xxl);
  margin-bottom: var(--spacing-v-sm);
}

.skeleton-line-reg {
  height:var(--font-size-l);
  margin-bottom: var(--spacing-v-sm);
}

.skeleton-line--thin {
  height: var(--font-size-s);
  margin-bottom: var(--spacing-v-sm);
}

.skeleton-line--xshort {
  width: 6rem;
}

.skeleton-line--short {
  width: 40%;
}

.skeleton-line--medium {
  width: 70%;
}

.skeleton-line--long {
  width: 85%;
}

.skeleton-button {
  width: 6rem;
  height: 3.6rem;
  border-radius: var(--border-radius-full);
  margin-bottom: var(--spacing-v-md);
}

/* Skeleton Components */
.skeleton-title {
  margin-bottom: var(--spacing-v-md);
}

.skeleton-meta {
  margin-bottom: var(--spacing-v-sm);
}

.skeleton-card {
  height: 5.5rem;
  border-radius: var(--border-radius-md);
}

.skeleton-container {
  position: fixed;
  top: calc(4rem + var(--spacing-v-md));
  left: var(--spacing-h-sm);
  right: var(--spacing-h-sm);
  bottom: var(--spacing-v-md);
}

.skeleton-footer {
  margin-top: calc(100vh - 31.5rem);
}

.skeleton-media {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}



/* Classes de typographie */
.text-xs-reg {
  font-family: 'Switzer', sans-serif;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
}

.text-xs-med {
  font-family: 'Switzer', sans-serif;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.text-xs-bold {
  font-family: 'Switzer', sans-serif;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.text-s-reg {
  font-family: 'Switzer', sans-serif;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
}

.text-m-reg {
  font-family: 'Switzer', sans-serif;
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-regular);
}

.text-m-med {
  font-family: 'Switzer', sans-serif;
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-medium);
}

.text-m-bold {
  font-family: 'Switzer', sans-serif;
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
}

.text-l-reg {
  font-family: 'Switzer', sans-serif;
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-regular);
}

.text-l-med {
  font-family: 'Switzer', sans-serif;
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-medium);
}

.text-l-bold {
  font-family: 'Switzer', sans-serif;
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
}

.text-xl-reg {
  font-family: 'Switzer', sans-serif;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-regular);
}

.text-xl-med {
  font-family: 'Switzer', sans-serif;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
}

.text-xl-bold {
  font-family: 'Switzer', sans-serif;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.text-xxl-reg {
  font-family: 'Switzer', sans-serif;
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-regular);
}

.text-xxl-med {
  font-family: 'Oswald', sans-serif;
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-medium);
}

.text-xxl-bold {
  font-family: 'Switzer', sans-serif;
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-bold);
}

/* Fondations - Espacement */
:root {
  /* Espacement vertical (rem) */
  --spacing-v-sm: 0.5rem;    /* 8px */
  --spacing-v-md: 1rem;      /* 16px */
  --spacing-v-lg: 2rem;      /* 32px */
  --spacing-h-xs: 0.5rem;   /* 4px */
  --spacing-h-sm: 1rem; /* 8px */
  --spacing-h-md: 2rem;
}

/* Classes utilitaires - Marges */
.mt-sm { margin-top: var(--spacing-v-sm); }
.mt-md { margin-top: var(--spacing-v-md); }
.mt-lg { margin-top: var(--spacing-v-lg); }

.mb-sm { margin-bottom: var(--spacing-v-sm); }
.mb-md { margin-bottom: var(--spacing-v-md); }
.mb-lg { margin-bottom: var(--spacing-v-lg); }

.mx-md { margin-left: var(--spacing-h-md); margin-right: var(--spacing-h-md); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Classes utilitaires - Padding */
.pt-sm { padding-top: var(--spacing-v-sm); }
.pt-md { padding-top: var(--spacing-v-md); }
.pt-lg { padding-top: var(--spacing-v-lg); }

.pb-sm { padding-bottom: var(--spacing-v-sm); }
.pb-md { padding-bottom: var(--spacing-v-md); }
.pb-lg { padding-bottom: var(--spacing-v-lg); }

.px-md { padding-left: var(--spacing-h-md); padding-right: var(--spacing-h-md); }

.py-sm { padding-top: var(--spacing-v-sm); padding-bottom: var(--spacing-v-sm); }
.py-md { padding-top: var(--spacing-v-md); padding-bottom: var(--spacing-v-md); }
.py-lg { padding-top: var(--spacing-v-lg); padding-bottom: var(--spacing-v-lg); }

/* Fondations - Bordures et Rayons */
:root {
  --border-width: 0.125rem; /* 2px en rem */
  --border-style-solid: solid;

  --border-radius-sm: 0.75rem; /* 4px en rem */
  --border-radius-md: 1.25rem; /* 8px en rem */
  --border-radius-full: 200rem; /* Rayon Full (forme de gélule) - une grande valeur pour forcer le demi-cercle parfait */
}


/* Classes utilitaires - Rayons */
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-full { border-radius: var(--border-radius-full); }

/* Fondations - Couleurs */
:root {
  /* primary */
  --color-primary: #D10023; /* Bouton, accent, etc. - Rouge en mode clair */
  --color-on-primary: #FFFFFF; /* Texte/Icône sur un fond primary - Blanc en mode clair */
  --color-primary-hover: #EB0027;
  --color-primary-focused: #EB0027;
  --color-primary-pressed: #FF052F;

  /* primary-container */
  --color-primary-container: #FFD6DD; /* Fond de primary - Gris clair en mode clair */
  --color-on-primary-container: #0D0D0D;
  --color-primary-container-hover: #FFBDC8;
  --color-primary-container-focused: #FFBDC8;
  --color-primary-container-pressed: #FFA3B3;

  /* surface */
  --color-surface: #FAFAFA; /* Fond par défaut - Blanc en mode clair */
  --color-on-surface: #0d0d0d; /* Texte sur un fond surface - Gris foncé en mode clair */
  --color-on-surface-variant: #4D4D4D; /* Texte sur un fond surface - Gris foncé en mode clair */
  --color-surface-hover: #F2F2F2;
  --color-surface-focused: #F2F2F2;
  --color-surface-pressed: #EAEAEA;

  /* surface-container-1 */
  --color-surface-container-1: #EAEAEA; /* Encadrés, cartes - Gris clair en mode clair */
  --color-on-surface-container-1: #0d0d0d; /* Texte sur surface-container-1 - Gris moyen en mode clair */
  --color-on-surface-container-1-variant: #4D4D4D; /* Texte sur un fond surface - Gris foncé en mode clair */
  --color-surface-container-1-hover: #DEDEDE;
  --color-surface-container-1-focused: #DEDEDE;
  --color-surface-container-1-pressed: #D1D1D1;

  /* surface-container-2 */
  --color-surface-container-2: #D0D0D0; /* Badge - Encore plus foncé que surface-container-1 (#EAEAEA) */
  --color-on-surface-container-2: #0d0d0d; /* Texte sur surface-container-1 - Gris moyen en mode clair */
  --color-on-surface-container-2-variant: #4D4D4D; /* Texte sur un fond surface - Gris foncé en mode clair */
  --color-surface-container-2-hover: #C4C4C4;
  --color-surface-container-2-focused: #C4C4C4;
  --color-surface-container-2-pressed: #B7B7B7;

  /* neutral */
  --color-neutral: #333333; /* Nouveau: Fond neutre - Gris foncé en mode clair */
  --color-on-neutral: #FFFFFF; /* Nouveau: Texte sur fond neutre - Blanc en mode clair */
  --color-neutral-hover: #404040;
  --color-neutral-focused: #404040;
  --color-neutral-pressed: #4D4D4D;

  /* error */
  --color-error: #E56000; /* Couleur d'erreur - Orange */
  --color-on-error: #FFFFFF; /* Texte/Icône sur un fond error - Blanc en mode clair */

  /* error-container */
  --color-error-container: #FFE1CC; /* Fond d'erreur - Gris clair en mode clair */
  --color-on-error-container: #000000;

  /* success */
  --color-success: #1369AB; /* Couleur de succès - Vert */
  --color-on-success: #FFFFFF; /* Texte/Icône sur un fond success - Blanc en mode clair */

  /* success-container */
  --color-success-container: #DAEDFB; /* Fond de succès - Gris clair en mode clair */
  --color-on-success-container: #000000;

  /* outline */
  --color-outline: #DDDDDD; /* Dividers, bordures - Gris clair en mode clair */
  --color-outline-primary: #FFA3B3; /* Nouveau: Couleur du liseré primaire pour les tabs */
}

/* Règles spécifiques pour le mode sombre via classe */
html.dark-mode {
  /* primary */
  --color-primary: #FFA0B0;
  --color-on-primary: #000000;
  --color-primary-hover: #FF8599;
  --color-primary-focused: #FF8599;
  --color-primary-pressed: #FF6B84;

  /* primary-container */
  --color-primary-container: #5C000F;
  --color-on-primary-container: #FFFFFF;
  --color-primary-container-hover: #750014;
  --color-primary-container-focused: #750014;
  --color-primary-container-pressed: #8F0018;

  /* surface */
  --color-surface: #000000;
  --color-on-surface: #FAFAFA;
  --color-on-surface-variant: #CCCCCC;
  --color-surface-hover: #1A1A1A;
  --color-surface-focused: #1A1A1A;
  --color-surface-pressed: #333333;

  /* surface-container-1 */
  --color-surface-container-1: #333333;
  --color-on-surface-container-1: #FAFAFA;
  --color-on-surface-container-1-variant: #CCCCCC;
  --color-surface-container-1-hover: #404040;
  --color-surface-container-1-focused: #404040;
  --color-surface-container-1-pressed: #4D4D4D;

  /* surface-container-2 */
  --color-surface-container-2: #4D4D4D; /* Badge - Encore plus clair que surface-container-1 (#333333) en mode sombre */
  --color-on-surface-container-2: #FAFAFA; /* Texte sur surface-container-2 - Blanc cassé */
  --color-on-surface-container-2-variant: #CCCCCC;
  --color-surface-container-2-hover: #5A5A5A;
  --color-surface-container-2-focused: #5A5A5A;
  --color-surface-container-2-pressed: #666666;

  /* neutral */
  --color-neutral: #FAFAFA;
  --color-on-neutral: #000000;
  --color-neutral-hover: #EDEDED;
  --color-neutral-focused: #EDEDED;
  --color-neutral-pressed: #E0E0E0;

  /* error */
  --color-error: #FFB580;
  --color-on-error: #000000;

  /* error-container */
  --color-error-container: #5C2600;
  --color-on-error-container: #FFFFFF;

  /* success */
  --color-success: #67B4EE;
  --color-on-success: #000000;

  /* success-container */
  --color-success-container: #093353;
  --color-on-success-container: #FFFFFF;

  /* outline */
  --color-outline: #555555;
  --color-outline-primary: #8F0018; /* Nouveau: Couleur du liseré primaire pour les tabs */
}

/* Classes utilitaires - Couleurs de texte */
.on-primary { color: var(--color-on-primary); }
.on-surface { color: var(--color-on-surface); }
.on-surface-variant { color: var(--color-on-surface-variant); }
.on-surface-container { color: var(--color-on-surface-container-1); }
.on-surface-container-1 { color: var(--color-on-surface-container-1); }
.on-surface-container-1-variant { color: var(--color-on-surface-container-1-variant); }
.on-surface-container-2 { color: var(--color-on-surface-container-2); }
.on-surface-container-2-variant { color: var(--color-on-surface-container-2-variant); }
.on-error { color: var(--color-on-error); }
.on-success { color: var(--color-on-success); }
.on-neutral { color: var(--color-on-neutral); }
.on-primary-container { color: var(--color-on-primary-container); }
.on-error-container { color: var(--color-on-error-container); }
.on-success-container { color: var(--color-on-success-container); }

/* Classes utilitaires - Couleurs de fond */
.primary { background-color: var(--color-primary); }
.surface { background-color: var(--color-surface); }
.surface-container { background-color: var(--color-surface-container-1); }
.surface-container-1 { background-color: var(--color-surface-container-1); }
.surface-container-2 { background-color: var(--color-surface-container-2); }
.error { background-color: var(--color-error); }
.success { background-color: var(--color-success); }
.neutral { background-color: var(--color-neutral); }
.primary-container { background-color: var(--color-primary-container); }
.error-container { background-color: var(--color-error-container); }
.success-container { background-color: var(--color-success-container); }

/* Classes utilitaires - Bordures (utilise --color-outline) */
.outline { border: var(--border-width) var(--border-style-solid) var(--color-outline); }
.outline-primary { border: var(--border-width) var(--border-style-solid) var(--color-outline-primary); }

body {
  color: var(--color-on-surface); /* Couleur du texte par défaut */
  background-color: var(--color-surface); /* Couleur de fond par défaut */
}



/* Composants/Utilitaires - Divider */
.divider-h {
  width: 100%;
  height: var(--border-width);
  background-color: var(--color-outline);
}

/* Composants/Utilitaires - Icônes (SVG) */
.icon-svg {
  width: 1.5rem; /* 24px */
  height: 1.5rem; /* 24px */
  vertical-align: middle; /* Pour aligner avec le texte */
  fill: currentColor; /* Permet de changer la couleur de l'icône avec la propriété color */
}

/* Annotations du design system */
.helper {
    color: #df2bdf;
}

.helper-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 30rem;
    padding: var(--spacing-v-md) var(--spacing-h-md);
}

/* Style pour les boîtes de couleur dans les tests */
/* La classe .color-box a été supprimée. Ses styles sont maintenant appliqués en ligne dans design-system-test.html ou via d'autres classes utilitaires. */

/* Fondations - Dimensions des boutons d'icônes */
:root {
  --icon-button-size-s: 2.5rem; /* 40px */
  --icon-button-size-m: 3rem;   /* 48px */
  --icon-button-size-l: 3.5rem;   /* 56px */
}

/* Composants - Boutons d'icônes */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-full); /* Par défaut, forme de gélule */
  border: none; /* Pas de bordure par défaut */
  cursor: pointer;
  padding: 0; /* Supprime le padding par défaut des boutons */
  flex-shrink: 0; /* Empêche le bouton de rétrécir */
  transition: background-color 0.1s ease; /* Ajout d'une transition douce pour les changements de fond */
  -webkit-tap-highlight-color: transparent; /* Supprime le carré bleu au tap sur mobile */
  touch-action: manipulation; /* Améliore la réactivité tactile et peut aider à prévenir la persistance de l'état active */
}



/* Variante Toggle - Base */
.icon-button-toggle {
  border-radius: var(--border-radius-md);
}

/* Variante Toggle - Primary OFF */
.icon-button-primary.icon-button-toggle.icon-button-toggle-off {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  border-radius: var(--border-radius-full); /* Spécifique pour l'état OFF */
}

/*.icon-button-primary.icon-button-toggle.icon-button-toggle-off:hover {
  background: var(--color-primary-container-hover);
}*/

.icon-button-primary.icon-button-toggle.icon-button-toggle-off:focus-visible {
  background: var(--color-primary-container-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.icon-button-primary.icon-button-toggle.icon-button-toggle-off:active {
  background: var(--color-primary-container-pressed);
}

/* Variante Toggle - Primary ON */
.icon-button-primary.icon-button-toggle.icon-button-toggle-on {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/*.icon-button-primary.icon-button-toggle.icon-button-toggle-on:hover {
  background: var(--color-primary-hover);
}*/

.icon-button-primary.icon-button-toggle.icon-button-toggle-on:focus-visible {
  background: var(--color-primary-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.icon-button-primary.icon-button-toggle.icon-button-toggle-on:active {
  background: var(--color-primary-pressed);
}

/* Variante Toggle - Neutral OFF */
.icon-button-neutral.icon-button-toggle.icon-button-toggle-off {
  background: var(--color-surface-container-1);
  color: var(--color-on-surface-container-1);
  border-radius: var(--border-radius-full); /* État OFF = radius full */
}

/*.icon-button-neutral.icon-button-toggle.icon-button-toggle-off:hover {
  background: var(--color-surface-container-1-hover);
}*/

.icon-button-neutral.icon-button-toggle.icon-button-toggle-off:focus-visible {
  background: var(--color-surface-container-1-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.icon-button-neutral.icon-button-toggle.icon-button-toggle-off:active {
  background: var(--color-surface-container-1-pressed);
}

/* Variante Toggle - Neutral ON */
.icon-button-neutral.icon-button-toggle.icon-button-toggle-on {
  background: var(--color-neutral);
  color: var(--color-on-neutral);
  /* État ON = radius md, géré par .icon-button-toggle */
}

/*.icon-button-neutral.icon-button-toggle.icon-button-toggle-on:hover {
  background: var(--color-neutral-hover);
}*/

.icon-button-neutral.icon-button-toggle.icon-button-toggle-on:focus-visible {
  background: var(--color-neutral-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.icon-button-neutral.icon-button-toggle.icon-button-toggle-on:active {
  background: var(--color-neutral-pressed);
}

/* Variante Toggle - Outline OFF */
.icon-button-outline.icon-button-toggle.icon-button-toggle-off {
  background: transparent;
  color: var(--color-on-surface);
  border: var(--border-width) var(--border-style-solid) var(--color-outline) ;
  border-radius: var(--border-radius-full);
}

/*.icon-button-outline.icon-button-toggle.icon-button-toggle-off:hover {
  background: var(--color-surface-hover);
}*/

.icon-button-outline.icon-button-toggle.icon-button-toggle-off:focus-visible {
  background: var(--color-surface-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.icon-button-outline.icon-button-toggle.icon-button-toggle-off:active {
  background: var(--color-surface-pressed);
}

/* Variante Toggle - Outline ON */
.icon-button-outline.icon-button-toggle.icon-button-toggle-on {
  background: var(--color-surface-container-1);
  color: var(--color-on-surface-container-1);
  border: none;
  /* État ON = radius md, géré par .button-toggle */
}

/*.icon-button-outline.icon-button-toggle.icon-button-toggle-on:hover {
  background: var(--color-surface-hover);
}*/

.icon-button-outline.icon-button-toggle.icon-button-toggle-on:focus-visible {
  background: var(--color-surface-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.icon-button-outline.icon-button-toggle.icon-button-toggle-on:active {
  background: var(--color-surface-pressed);
}

/* Tailles des boutons d'icônes */
.icon-button-s {
  width: var(--icon-button-size-s);
  height: var(--icon-button-size-s);
}

.icon-button-m {
  width: var(--icon-button-size-m);
  height: var(--icon-button-size-m);
}

.icon-button-l {
  width: var(--icon-button-size-l);
  height: var(--icon-button-size-l);
}

/* Couleurs des boutons d'icônes */
.icon-button-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.icon-button-primary:focus-visible {
  background: var(--color-primary-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.icon-button-primary:active {
  background: var(--color-primary-pressed);
}

.icon-button-surface {
  background: var(--color-surface);
  color: var(--color-on-surface);
}

.icon-button-surface:focus-visible {
  background: var(--color-surface-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.icon-button-surface:active {
  background: var(--color-surface-pressed);
}

/* Couleurs des boutons d'icônes - Outline */
.icon-button-outline {
  background: transparent;
  color: var(--color-on-surface);
  border: var(--border-width) var(--border-style-solid) var(--color-outline);
}

/*.icon-button-outline:hover {
  background: var(--color-surface-hover);
}*/

.icon-button-outline:focus-visible {
  background: var(--color-surface-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.icon-button-outline:active {
  background: var(--color-surface-pressed);
}

.icon-button-surface-container {
  background: var(--color-surface-container-1);
  color: var(--color-on-surface-container-1);
}

/*.icon-button-surface-container:hover {
  background: var(--color-surface-container-1-hover);
}*/

.icon-button-surface-container:focus-visible {
  background: var(--color-surface-container-1-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.icon-button-surface-container:active {
  background: var(--color-surface-container-1-pressed);
}

.icon-button-neutral {
  background: var(--color-neutral);
  color: var(--color-on-neutral);
}

/*.icon-button-neutral:hover {
  background: var(--color-neutral-hover);
}*/

.icon-button-neutral:focus-visible {
  background: var(--color-neutral-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.icon-button-neutral:active {
  background: var(--color-neutral-pressed);
}

/* Composants - Boutons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-full); /* Par défaut, forme de gélule */
  border: none;
  cursor: pointer;
  font-family: 'Switzer', sans-serif;
  font-weight: var(--font-weight-medium); /* Texte des boutons en medium par défaut */
  transition: background-color 0.1s ease, color 0.1s ease; /* Transition douce */
  text-decoration: none; /* Pour les balises <a> utilisées comme boutons */
  white-space: nowrap; /* Empêche le texte de se casser sur plusieurs lignes */
  -webkit-tap-highlight-color: transparent; /* Supprime le carré bleu au tap sur mobile */
  touch-action: manipulation; /* Améliore la réactivité tactile et peut aider à prévenir la persistance de l'état active */
}

.button:active {
  outline: none; /* Supprime le contour au tap sur mobile */
  box-shadow: none; /* Supprime l'ombre au tap sur mobile */
  opacity: 1; /* Assure que le bouton reste opaque */
  background-image: none; /* Empêche tout arrière-plan d'image par défaut */
}

/* New variant - Follow Button */
.button-follow {
  padding-left: var(--spacing-v-sm);
}

.button .icon-svg {
  margin-left: var(--spacing-v-sm);
}

.button-follow.button-toggle-on .icon-add {
  display: none;
}

/* Tailles des boutons */
.button-s {
  font-size: var(--font-size-s);
  height: var(--icon-button-size-s);
  padding: 0 var(--font-size-s);
}

.button-m {
  font-size: var(--font-size-m);
  height: var(--icon-button-size-m);
  padding: 0 var(--font-size-m);
}

.button-l {
  font-size: var(--font-size-l);
  height: var(--icon-button-size-l);
  padding: 0 var(--font-size-l);
}

/* Couleurs des boutons - Primary */
.button-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/*.button-primary:hover {
  background: var(--color-primary-hover);
}*/

.button-primary:focus-visible {
  background: var(--color-primary-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.button-primary:active {
  background: var(--color-primary-pressed);
}

/* Couleurs des boutons - Neutral */
.button-neutral {
  background: var(--color-neutral);
  color: var(--color-on-neutral);
}

/*.button-neutral:hover {
  background: var(--color-neutral-hover);
}*/

.button-neutral:focus-visible {
  background: var(--color-neutral-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.button-neutral:active {
  background: var(--color-neutral-pressed);
}

/* Couleurs des boutons - Surface */
.button-surface {
  background: var(--color-surface);
  color: var(--color-on-surface);
}

/*.button-surface:hover {
  background: var(--color-surface-hover);
}*/

.button-surface:focus-visible {
  background: var(--color-surface-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.button-surface:active {
  background: var(--color-surface-pressed);
}

/* Couleurs des boutons - Surface Container */
.button-surface-container {
  background: var(--color-surface-container-1);
  color: var(--color-on-surface-container-1);
}

/*.button-surface-container:hover {
  background: var(--color-surface-container-1-hover);
}*/

.button-surface-container:focus-visible {
  background: var(--color-surface-container-1-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.button-surface-container:active {
  background: var(--color-surface-container-1-pressed);
}

/* Couleurs des boutons - Outline */
.button-outline {
  background: transparent;
  color: var(--color-on-surface);
  border: var(--border-width) var(--border-style-solid) var(--color-outline);
}

/*.button-outline:hover {
  background: var(--color-surface-hover);
}*/

.button-outline:focus-visible {
  background: var(--color-surface-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.button-outline:active {
  background: var(--color-surface-pressed);
}

/* Variante Toggle - Base pour les boutons (même logique que icon-button-toggle) */
.button-toggle {
  border-radius: var(--border-radius-md);
}

/* Variante Toggle - Primary OFF */
.button-primary.button-toggle.button-toggle-off {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  border-radius: var(--border-radius-full); /* Spécifique pour l'état OFF */
}

/*.button-primary.button-toggle.button-toggle-off:hover {
  background: var(--color-primary-container-hover);
}*/

.button-primary.button-toggle.button-toggle-off:focus-visible {
  background: var(--color-primary-container-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.button-primary.button-toggle.button-toggle-off:active {
  background: var(--color-primary-container-pressed);
}

/* Variante Toggle - Primary ON */
.button-primary.button-toggle.button-toggle-on {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/*.button-primary.button-toggle.button-toggle-on:hover {
  background: var(--color-primary-hover);
}*/

.button-primary.button-toggle.button-toggle-on:focus-visible {
  background: var(--color-primary-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.button-primary.button-toggle.button-toggle-on:active {
  background: var(--color-primary-pressed);
}

/* Variante Toggle - Neutral OFF */
.button-neutral.button-toggle.button-toggle-off {
  background: var(--color-surface-container-1);
  color: var(--color-on-surface-container-1);
  border-radius: var(--border-radius-full);
}

/*.button-neutral.button-toggle.button-toggle-off:hover {
  background: var(--color-surface-container-1-hover);
}*/

.button-neutral.button-toggle.button-toggle-off:focus-visible {
  background: var(--color-surface-container-1-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.button-neutral.button-toggle.button-toggle-off:active {
  background: var(--color-surface-container-1-pressed);
}

/* Variante Toggle - Neutral ON */
.button-neutral.button-toggle.button-toggle-on {
  background: var(--color-neutral);
  color: var(--color-on-neutral);
}

/*.button-neutral.button-toggle.button-toggle-on:hover {
  background: var(--color-neutral-hover);
}*/

.button-neutral.button-toggle.button-toggle-on:focus-visible {
  background: var(--color-neutral-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.button-neutral.button-toggle.button-toggle-on:active {
  background: var(--color-neutral-pressed);
}

/* Variante Toggle - Outline OFF */
.button-outline.button-toggle.button-toggle-off {
  background: transparent;
  color: var(--color-on-surface);
  border: var(--border-width) var(--border-style-solid) var(--color-outline);
  border-radius: var(--border-radius-full);
}

/*.button-outline.button-toggle.button-toggle-off:hover {
  background: var(--color-surface-hover);
}*/

.button-outline.button-toggle.button-toggle-off:focus-visible {
  background: var(--color-surface-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.button-outline.button-toggle.button-toggle-off:active {
  background: var(--color-surface-pressed);
}

/* Variante Toggle - Outline ON */
.button-outline.button-toggle.button-toggle-on {
  background: var(--color-surface-container-1);
  color: var(--color-on-surface-container-1);
  border: none;
  /* État ON = radius md, géré par .button-toggle */
}

/*.button-outline.button-toggle.button-toggle-on:hover {
  background: var(--color-surface-hover);
}*/

.button-outline.button-toggle.button-toggle-on:focus-visible {
  background: var(--color-surface-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.button-outline.button-toggle.button-toggle-on:active {
  background: var(--color-surface-pressed);
}

/* Variante Toggle - Follow Outline OFF */
.button-follow.button-outline.button-toggle.button-toggle-off {
  background: transparent;
  color: var(--color-on-surface);
  border: var(--border-width) var(--border-style-solid) var(--color-outline);
  border-radius: var(--border-radius-full);
}

/*.button-follow.button-outline.button-toggle.button-toggle-off:hover {
  background: var(--color-surface-hover);
}*/

.button-follow.button-outline.button-toggle.button-toggle-off:focus-visible {
  background: var(--color-surface-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.button-follow.button-outline.button-toggle.button-toggle-off:active {
  background: var(--color-surface-pressed);
}

/* Variante Toggle - Follow Outline ON */
.button-follow.button-outline.button-toggle.button-toggle-on {
  background: var(--color-surface-container-1);
  color: var(--color-on-surface-container-1);
  border: none;
  /* État ON = radius md, géré par .button-toggle */
}

/*.button-follow.button-outline.button-toggle.button-toggle-on:hover {
  background: var(--color-surface-hover);
}*/

.button-follow.button-outline.button-toggle.button-toggle-on:focus-visible {
  background: var(--color-surface-focused);
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.button-follow.button-outline.button-toggle.button-toggle-on:active {
  background: var(--color-surface-pressed);
}

/* Composants - Tabs */
.tabs-container {
  display: flex;
  overflow-x: auto; /* Permet le défilement horizontal si les onglets dépassent */
  -webkit-overflow-scrolling: touch; /* Améliore le défilement sur iOS */
  background-color: var(--color-surface);
  padding: 0 var(--spacing-h-md); /* Padding horizontal pour les bords du conteneur */
  width: 100%;
  box-sizing: border-box; /* S'assure que le padding n'ajoute pas à la largeur totale */
}

/* Masquer la barre de défilement pour les navigateurs Webkit (Chrome, Safari) */
.tabs-container::-webkit-scrollbar {
  display: none;
}

/* Masquer la barre de défilement pour Firefox */
.tabs-container {
  scrollbar-width: none; /* Masque la barre de défilement */
}

/* Masquer la barre de défilement pour IE et Edge */
.tabs-container {
  -ms-overflow-style: none; /* Masque la barre de défilement */
}

.tab-item {
  flex-shrink: 0; /* Prevents tabs from shrinking */
  padding: 0 var(--font-size-s);
  height: var(--icon-button-size-s); /* Utilise la même hauteur que le petit bouton d'icône */
  display: flex;
  align-items: center;
  background-color: transparent; /* Fond transparent par défaut */
  border: none;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease; /* Smooth transition */
  outline: none; /* Removes outline on focus */
  -webkit-tap-highlight-color: transparent; /* Removes blue highlight on mobile tap */
  position: relative; /* Pour positionner le pseudo-élément */
}


.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--font-size-s); /* Alignement avec le début du texte */
  right: var(--font-size-s); /* Alignement avec la fin du texte */
  height: var(--border-width);
  background-color: var(--color-outline-primary);
}

/*.tab-item:hover {
  color: var(--color-outline);
}*/

.tab-item:focus-visible {
  outline: var(--border-width) solid var(--color-outline);
  outline-offset: var(--border-width);
}

.tab-item:active {
  background-color: var(--color-surface-pressed);
}

/* Composants - Badge */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-full);
  flex-shrink: 0;
  font-weight: var(--font-weight-medium);
}

/* Tailles des badges */
.badge-xs {
  min-width: 1rem;
  height: 1rem;
  padding: 0 var(--spacing-h-xs);
}

.badge-s {
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 var(--spacing-h-sm);
}

.badge-m {
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--spacing-h-sm);
}

.badge-l {
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 var(--spacing-h-sm);
}

/* Couleurs des badges */
.badge-surface-container-2 {
  background-color: var(--color-surface-container-2);
  color: var(--color-on-surface-container-2);
}

/* Support pour d'autres couleurs futures */
.badge-surface-container-1 {
  background-color: var(--color-surface-container-1);
  color: var(--color-on-surface-container-1);
}

.badge-primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.badge-neutral {
  background-color: var(--color-neutral);
  color: var(--color-on-neutral);
}




/* Composants - App Bar */
.app-bar {
  width: 100%;
  height: 4rem; /* 64px en rem */
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-h-xs); /* Padding horizontal de 4px */
  box-sizing: border-box;
  gap: var(--spacing-h-sm); /* Espacement de 8px entre les éléments */
}

.app-bar-home {
  justify-content: space-between;
}

.app-bar-home .tabs-container {
  flex-grow: 1;
  padding-left: var(--spacing-h-xs);
  padding-right: var(--spacing-h-xs);
}

.app-bar-subscreen {
  justify-content: flex-start;
}

.app-bar-subscreen .app-bar-title {
  flex-grow: 1;
  text-align: left;
}

/* AppBar variante surface-container */
.app-bar.app-bar-surface-container {
  background-color: var(--color-surface-container);
  color: var(--color-on-surface-container);
}

.app-bar.app-bar-surface-container .app-bar-title {
  color: var(--color-on-surface-container);
}

/* Composants - Cards */
.card-other-media {
  background-color: var(--color-surface-container-1);
  color: var(--color-on-surface-container-1);
  display: flex;
  flex-direction: column;
  padding: var(--spacing-v-md);
  border-radius: var(--border-radius-md);
  gap: var(--spacing-v-sm);
  cursor: pointer;
  transition: all 0.3s ease;
  height: 5.2rem;
  position: fixed;
  bottom: calc(var(--spacing-v-md) + env(safe-area-inset-bottom, 0px));
  left: var(--spacing-h-sm);
  right: var(--spacing-h-sm);
}

.card-other-media.expanded {
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  height: 100dvh;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  z-index: 1000;
  padding: 0;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

/* Styles spécifiques pour l'état expanded - pas de changement de couleur au scroll */
.card-other-media.expanded .articles-list {
  background-color: var(--color-surface);
}

/* Désactiver l'overscroll global quand la carte est expanded */
body.card-expanded {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

.card-other-media.expanded .article-item {
  background-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}


/* Liste des articles dans la card expanded */
.card-other-media .articles-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-v-sm) 0;
  padding-bottom: calc(var(--spacing-v-sm) + env(safe-area-inset-bottom, 0px));
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

.card-other-media .article-item {
  display: flex;
  align-items: flex-start;
  padding: var(--spacing-v-md) var(--spacing-h-sm);
  gap: var(--spacing-h-sm);
  cursor: pointer;
  border-bottom: 1px solid var(--color-outline-variant);
}



.card-other-media .article-content {
  flex: 1;
  min-width: 0;
}

.card-other-media .article-title {
  margin: 0 0 var(--spacing-v-sm) 0;
  line-height: 1.3;
}

.card-other-media .article-meta {
  margin: 0;
  line-height: 1.2;
}


.card-other-media .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-h-sm);
}


.card-other-media .card-media-list-container {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  position: relative;
}

.card-other-media .card-media-list {
  line-height: 1.2;
  white-space: nowrap;
  display: block;
  width: 100%;
}

.card-other-media .scrolling-text {
  display: inline-block;
  white-space: nowrap;
}

.card-other-media .scrolling-text.animate-scroll {
  animation: scrollText cubic-bezier(0.1, 0, 1, 1) infinite;
  animation-delay: 1s;
}

@keyframes scrollText {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}



.card-other-media:active {
  background-color: var(--color-surface-container-1-pressed);
  outline: none;
  box-shadow: none;
  opacity: 1;
  background-image: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* Composants - List */
.list-item {
  width: 100%;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  display: flex;
  align-items: flex-start;
  padding: var(--spacing-v-md) var(--spacing-v-md);
  gap: var(--spacing-v-md);
}

.list-item .list-text-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: var(--icon-button-size-s); /* Hauteur de l'icon-button small */
  justify-content: center; /* Centrer verticalement le contenu */
}

/* Composants - List Container */
.list-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background-color: var(--color-surface);
}

/* --- Circular Image --- */
.circular-image {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background-color: var(--color-surface-container-1); /* Couleur de fond pour le cas où l'image ne remplit pas */
}

.circular-image-font-size-xs {
    width: calc(var(--font-size-xs) * 1.5);
    height: calc(var(--font-size-xs) * 1.5);
}

.circular-image-font-size-s {
    width: calc(var(--font-size-s) * 1.5);
    height: calc(var(--font-size-s) * 1.5);
}

.circular-image-font-size-m {
    width: calc(var(--font-size-m) * 1.5);
    height: calc(var(--font-size-m) * 1.5);
}

.circular-image-font-size-l {
    width: calc(var(--font-size-l) * 1.5);
    height: calc(var(--font-size-l) * 1.5);
}

.circular-image-font-size-xl {
    width: calc(var(--font-size-xl) * 1.5);
    height: calc(var(--font-size-xl) * 1.5);
}

.circular-image-font-size-xxl {
    width: calc(var(--font-size-xxl) * 1.5);
    height: calc(var(--font-size-xxl) * 1.5);
}