/* ============================================================
   RENAÎTRE — Addictologie
   style.css
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS DE COULEURS
   ------------------------------------------------------------ */
:root {
  /* Primaires */
  --color-primary:          #6A9E7F; /* Vert sauge — apaisement, guérison */
  --color-primary-light:    #8FB89F; /* Vert sauge clair — hover, nuances */
  --color-primary-dark:     #4D7A61; /* Vert sauge foncé — états actifs */

  /* Secondaires */
  --color-secondary:        #C47A5A; /* Terracotta doux — chaleur humaine */
  --color-secondary-light:  #D9967B; /* Terracotta clair — hover */
  --color-accent:           #E8A882; /* Terracotta pâle — CTA, boutons */

  /* Fonds */
  --color-bg:               #FAF7F2; /* Blanc cassé crème — fond principal */
  --color-bg-alt:           #EFF5F1; /* Vert très pâle — sections alternées */
  --color-bg-card:          #FFFFFF; /* Blanc pur — cartes, modale */

  /* Textes */
  --color-text:             #2E2A26; /* Gris brun foncé — corps de texte */
  --color-text-muted:       #7A6E67; /* Gris chaud — légendes, sous-titres */
  --color-text-on-primary:  #FFFFFF; /* Texte sur fond primaire */
  --color-text-on-accent:   #FFFFFF; /* Texte sur boutons terracotta */

  /* Utilitaires */
  --color-border:           #DDD8D0; /* Bordures douces */
  --color-border-focus:     #6A9E7F; /* Focus ring — accessibilité */
  --color-error:            #B94F3A; /* Erreurs — rouge brun (pas d'alarme) */
  --color-success:          #4D7A61; /* Succès — vert primaire foncé */

  /* Overlays / ombres */
  --shadow-sm:   0 1px 3px rgba(46, 42, 38, 0.08);
  --shadow-md:   0 4px 12px rgba(46, 42, 38, 0.10);
  --shadow-lg:   0 8px 24px rgba(46, 42, 38, 0.12);
}


/* ------------------------------------------------------------
   2. RESET STANDARD
   ------------------------------------------------------------ */

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

/* Suppression des marges et paddings par défaut */
html,
body,
h1, h2, h3, h4, h5, h6,
p,
blockquote,
figure,
ul, ol, li,
dl, dt, dd,
form,
fieldset,
legend,
table,
caption,
th, td,
article, aside, details,
footer, header, main, nav, section, summary {
  margin:  0;
  padding: 0;
}

/* Base HTML */
html {
  font-size: 100%; /* 16px par défaut */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: 1.6;
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Listes sans style par défaut */
ul,
ol {
  list-style: none;
}

/* Liens */
a {
  color: inherit;
  text-decoration: none;
}

/* Médias responsifs */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Formulaires */
input,
button,
textarea,
select {
  font: inherit;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
}

button {
  cursor: pointer;
}

/* Tableaux */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Accessibilité — focus visible */
:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}