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





[hidden] {
  display: none !important;
}

body,
h1, h2, h3,
p,
figure,
ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}


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


button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}




:root { color-scheme: light; }
html.sombre { color-scheme: dark; }

body {
  font-family: var(--police);
  font-size: var(--t-texte);
  font-weight: var(--poids-normal);
  line-height: var(--interligne);
  color: var(--texte);
  background: var(--fond-page);
  
  -webkit-text-size-adjust: 100%;
}






:focus-visible {
  outline: calc(var(--trait) * 2) solid var(--texte);
  outline-offset: calc(var(--trait) * 2);
}




html {
  scroll-padding-top: var(--haut-collant);
}



.stat    { font-size: var(--t-stat);     font-weight: var(--poids-moyen); }
.prix    { font-size: var(--t-prix);     font-weight: var(--poids-moyen); }
.titre   { font-size: var(--t-titre);    font-weight: var(--poids-moyen); }
.titre-2 { font-size: var(--t-titre-2);  font-weight: var(--poids-moyen); }
.mention { font-size: var(--t-mention); }

.secondaire { color: var(--texte-secondaire); }
.discret    { color: var(--texte-discret); }



.mono { font-family: var(--police-mono); }

a { color: var(--accent); }





.bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e8);
  width: 100%;
  height: var(--hauteur-controle);
  padding: 0 var(--e12);
  border: var(--trait) solid transparent;
  border-radius: var(--rayon-pilule);
  font-size: var(--t-titre-2);
  font-weight: var(--poids-moyen);
  text-align: center;
  text-decoration: none;   
}


.bouton-principal {
  background: var(--accent);
  color: var(--sur-aplat);
}


.bouton-contact {
  background: var(--vert);
  color: var(--sur-aplat);
}




.bouton-secondaire {
  border-color: var(--bordure);
  background: var(--fond-bloc);
  color: var(--texte);
}

.bouton-danger {
  border-color: var(--alerte);
  background: var(--fond-bloc);
  color: var(--alerte);
}


.bouton-texte {
  color: var(--texte-secondaire);
}




.libelle {
  display: block;
  margin-bottom: var(--e4);
  font-size: var(--t-mention);
  color: var(--texte-secondaire);
}







.champ {
  width: 100%;
  height: var(--cible-tactile);
  padding: 0 var(--e16);
  border: 1.5px solid var(--bord-champ);
  border-radius: var(--rayon-pilule);
  background: var(--fond-champ);
  color: var(--texte);
  font-size: 16px;
}

.champ:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--halo-champ);
}







textarea.champ {
  height: auto;
  min-height: calc(var(--cible-tactile) * 3);
  padding: var(--e12) var(--e16);
  border-radius: var(--rayon-bloc);
  line-height: var(--interligne);
  resize: vertical;
}


.aide {
  margin-top: var(--e4);
  font-size: var(--t-mention);
  color: var(--texte-discret);
}







.pastille,
.menu-pastille {
  display: inline-flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e4) var(--e10);
  border-radius: var(--rayon-pastille);
  font-size: var(--t-mention);
}


.pastille-verifie  { background: var(--vert-fond);      color: var(--vert); }



.pastille-rupture  { background: var(--attention-fond); color: var(--attention); }
.pastille-suspendu { background: var(--alerte-fond);    color: var(--alerte); }




.pastille-confirme { background: var(--vert-fond);      color: var(--vert); }
.pastille-probleme { background: var(--alerte-fond);    color: var(--alerte); }
.pastille-annule   { background: var(--fond-image);     color: var(--texte-secondaire); }









.cache-visuel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icone {
  width: var(--icone);
  height: var(--icone);
  flex: none;              
  fill: none;
  stroke: currentColor;
  stroke-width: var(--trait-icone);
  stroke-linecap: round;
  stroke-linejoin: round;
}


.icone-carte {
  width: var(--icone-carte);
  height: var(--icone-carte);
}








@media (hover: hover) {

  .bouton-principal:hover {
    background: var(--survol-principal);
  }

  .bouton-contact:hover {
    background: var(--survol-contact);
  }

  


  .bouton-secondaire:hover,
  .bouton-danger:hover {
    background: var(--survol-secondaire);
  }
}