/* ==========================================================================
   base.css — reset et styles de base
   Deuxieme feuille de la cascade (apres tokens.css).

   Ne style que des selecteurs d'element (plus `.skip-link`). Aucune classe de
   composant, aucun ID : ils relevent de layout.css, header.css, footer.css et
   components/.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;   /* pas de gonflement du texte en rotation iOS */
}

body {
  margin: 0;
  font-family: var(--lba-font-base);
  font-size: var(--lba-text-size);
  font-weight: var(--lba-font-weight-normal);
  line-height: var(--lba-text-line);
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

/* Elements de contenu : marges remises a plat, gerees au cas par cas. */
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}


/* --------------------------------------------------------------------------
   2. Titres
   --------------------------------------------------------------------------
   Couleur --heading, graisse 700, famille grasse.
   Les tailles sont des tokens (paliers responsive dans tokens.css).
   h1 et h2 n'ont volontairement pas de line-height : la valeur du corps
   (1.5em) s'applique par heritage, on ne la redeclare donc pas.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  color: var(--heading);
  font-family: var(--lba-font-bold);
  font-weight: var(--lba-font-weight-bold);
}

h1 { font-size: var(--lba-h1-size); }
h2 { font-size: var(--lba-h2-size); }

h3 {
  font-size: var(--lba-h3-size);
  line-height: var(--lba-heading-line);
}

h4 {
  font-size: var(--lba-h4-size);
  line-height: var(--lba-heading-line);
}

h5 {
  font-size: var(--lba-h5-size);
  line-height: var(--lba-heading-line);
}

h6 {
  font-size: var(--lba-h6-size);
  line-height: var(--lba-heading-line);
}


/* --------------------------------------------------------------------------
   3. Emphase coloree dans les titres
   --------------------------------------------------------------------------
   Mecanisme des titres bicolores, present sur tout le site : un <b>, <strong>
   ou <span> a l'interieur d'un titre passe en rouge.

   La regle porte sur les elements de titre eux-memes, sans classe
   intermediaire : tous les titres du site sont concernes.
   -------------------------------------------------------------------------- */

h1 b, h1 strong, h1 span,
h2 b, h2 strong, h2 span,
h3 b, h3 strong, h3 span,
h4 b, h4 strong, h4 span,
h5 b, h5 strong, h5 span,
h6 b, h6 strong, h6 span {
  color: var(--primary-color);
}

/* Le gras du corps de texte reprend la famille grasse. */
b, strong {
  font-family: var(--lba-font-bold);
  font-weight: var(--lba-font-weight-bold);
}


/* --------------------------------------------------------------------------
   4. Liens
   -------------------------------------------------------------------------- */

a {
  color: var(--accent);
  transition: color var(--lba-transition-fast);
}

/* Visibilite du focus clavier. `:focus-visible` ne se declenche pas au clic
   souris : aucun effet sur le rendu a la souris. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   5. Listes
   -------------------------------------------------------------------------- */

ul, ol {
  margin: 0;
  padding-left: 1.25em;
}


/* --------------------------------------------------------------------------
   6. Medias
   -------------------------------------------------------------------------- */

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* Les <img> du site portent des attributs width/height (reservation de place au
   chargement) : `height:auto` preserve le ratio quand la largeur est
   contrainte. */
img {
  height: auto;
}


/* --------------------------------------------------------------------------
   7. Formulaires
   --------------------------------------------------------------------------
   La bordure blanche est voulue : les champs sont poses sur le bloc noir
   `.wrap_contact`.
   -------------------------------------------------------------------------- */

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
}

input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
  border: 1px solid var(--white);
  border-radius: var(--lba-radius-input);
  color: var(--text);
  font-size: var(--lba-size-input);
  padding: 10px 20px;
  line-height: 28px;
  resize: none;
}

::placeholder {
  color: var(--text);
  opacity: 1;   /* Firefox applique 0.54 par defaut */
}

/* Boutons. Le hover ne change que la couleur du texte. */
button,
input[type="button"],
input[type="submit"] {
  background-color: var(--primary-color);
  color: var(--white);
  font-family: var(--lba-font-bold);
  font-size: var(--lba-size-button);
  font-weight: var(--lba-font-weight-bold);
  line-height: 20px;
  letter-spacing: -0.32px;
  border: 0;
  border-radius: var(--lba-radius);
  padding: 13px 36px;
  cursor: pointer;
}

button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  color: var(--secondary);
}

@media screen and (max-width: 1400px) {
  input[type="date"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px;
  }
}


/* --------------------------------------------------------------------------
   8. Lien d'evitement
   --------------------------------------------------------------------------
   Permet de sauter directement au contenu principal au clavier. Hors focus
   clavier il est hors ecran : aucun effet visuel.
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: var(--white);
  color: var(--secondary);
  font-weight: var(--lba-font-weight-bold);
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   9. Preference d'animation reduite
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;   /* justifie : neutralise les
       animations declarees ailleurs dans la cascade, y compris a venir */
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}