@layer reset, theme, layouts, components;

/* ==========================================
* Reset CSS, made par Alsacréations
* Source : https://github.com/alsacreations/reset
* Consignes : à placer dans un layer inférieur aux autres layers
========================================== */

@layer reset {
  /* ----------------------------
  * Modèle de boîte
  * ---------------------------- */

  /* Modèle de boîte uniforme et prévention des débordements flex/grid */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    min-width: 0;
  }

  /* ----------------------------
  * Document global
  * ---------------------------- */

  html {
    overflow-wrap: break-word;
    hanging-punctuation: first allow-end last;
    scrollbar-gutter: stable;
    text-size-adjust: none;
  }

  html:focus-within {
    scroll-behavior: smooth;
  }

  body {
    min-height: 100svh;
    margin: 0;
    overflow-x: clip;
    line-height: 1.5;
    text-rendering: optimizespeed;
  }

  /* ----------------------------
  * États des éléments
  * ---------------------------- */

  :focus {
    outline: none;
  }

  /* Focus clavier */
  :focus-visible {
    outline: 2px solid;
    outline-offset: 2px;
  }

  :disabled {
    opacity: 70%;
    cursor: not-allowed;
  }

  /* ----------------------------
  * Liens et ancres
  * ---------------------------- */

  /* Marge au-dessus des ancres ciblées */
  :target {
    scroll-margin-block: 1rem;
  }

  /* Liens sans classe */
  a:not([class]) {
    text-decoration-skip-ink: auto;
  }

  /* ----------------------------
  * Typographie
  * ---------------------------- */

  /* Hauteur de ligne réduite sur les éléments de titre */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  button,
  input,
  label {
    line-height: 1.1;
  }

  /* Amélioration de la typographie avec text-wrap */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  blockquote {
    text-wrap: balance;
  }

  p,
  li,
  figcaption {
    text-wrap: pretty;
  }

  /* Guillemets français */
  q {
    quotes: "«\00A0" "\00A0»";
  }

  /* ----------------------------
  * Listes
  * ---------------------------- */

  ul,
  ol {
    padding-inline-start: 1em;
    list-style-position: outside;

    &[role="list"] {
      margin: 0;
      padding-inline-start: 0;
      list-style: none;
    }

    & li {
      margin-block: 0.1em;
    }
  }

  /* ----------------------------
  * Média et contenus
  * ---------------------------- */

  /* Prévention des débordements */
  img,
  picture,
  table,
  td,
  blockquote,
  pre,
  code,
  input,
  textarea,
  select,
  video,
  svg,
  iframe {
    max-width: 100%;
  }

  /* Affichage en bloc pour les éléments média */
  img,
  picture,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
  }

  /* Préservation du ratio d'affichage */
  :where(img, picture):where(:not([src$=".svg"])) {
    height: auto;
  }

  /* Suppression des marges par défaut */
  figure {
    margin: 0;
  }

  /* ----------------------------
  * Formulaires
  * ---------------------------- */

  /* Normalisation des éléments de formulaire */
  input,
  button,
  textarea,
  select {
    margin: 0;
    background-color: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    vertical-align: middle;
  }

  /* Conteneurs de formulaire */
  form,
  fieldset {
    border: none;
  }

  fieldset {
    margin: 0;
    padding: 1em 0;
  }

  legend {
    max-width: 100%;
    border: 0;
    color: inherit;
    white-space: normal;
  }

  label {
    display: inline-block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  button {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  textarea {
    overflow: auto;
    vertical-align: top;
    white-space: pre-wrap;
    resize: vertical;
  }

  /* ----------------------------
  * Éléments préformatés
  * ---------------------------- */

  pre,
  code,
  kbd,
  samp {
    font-family: ui-monospace, monospace;
    font-size: 1em;
  }

  pre {
    overflow: auto;
    line-height: normal;
    white-space: pre-wrap;
    tab-size: 2;
  }

  :where(:not(pre)) > code {
    padding: 2px 6px;
    border-radius: 6px;
    background-color: buttonface;
    font-size: 0.95em;
  }

  /* ----------------------------
  * SVG
  * ---------------------------- */

  /* Couleur par défaut des SVG */
  svg:not([fill]) {
    fill: currentcolor;
  }

  svg {
    overflow: visible;
  }

  svg * {
    transform-box: fill-box;
  }

  /* Masquage des SVG contenant des symboles */
  svg:has(symbol) {
    display: none;
  }

  /* ----------------------------
  * Accessibilité (ARIA)
  * ---------------------------- */

  [aria-busy="true"] {
    cursor: progress;
  }

  [aria-controls] {
    cursor: pointer;
  }

  [aria-disabled="true"],
  [disabled] {
    cursor: not-allowed;
  }

  /* ----------------------------
  * Masquage visuel accessible
  * ---------------------------- */

  /* Masquage du contenu visuellement tout en le gardant accessible aux technologies d'assistance. */
  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    clip-path: inset(50%) !important;
  }

  /* ----------------------------
  * Préférences animations
  * ---------------------------- */

  /* Désactivation des animations pour les utilisateurs sensibles */
  @media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
      transition-duration: 0s !important;
      transition-delay: 0s !important;
      animation-duration: 1ms !important;
      animation-delay: -1ms !important;
      animation-iteration-count: 1 !important;
      background-attachment: initial !important;
      scroll-behavior: auto !important;
    }
  }
}